design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-label): expand dees-label demo coverage and update supporting dependencies

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 10:44:17 +00:00
parent 3e101840a6
commit c1672bb8ae
5 changed files with 174 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
ts_web/elements/00group-layout/dees-label/dees-label.demo.ts
View File

@@ -1,7 +1,128 @@
import { html, cssManager } from '@design.estate/dees-element';
import { html, css, cssManager } from '@design.estate/dees-element';
export const demoFunc = () => {
return html`
<dees-label .label=${'a label'}></dees-label>
`;
}
export const demoFunc = () => html`
<style>
${css`
.demo-container {
display: flex;
flex-direction: column;
gap: 24px;
padding: 24px;
max-width: 800px;
margin: 0 auto;
}
.demo-section {
background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
border-radius: 8px;
padding: 24px;
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
}
.demo-section h3 {
margin-top: 0;
margin-bottom: 16px;
color: ${cssManager.bdTheme('#333', '#fff')};
}
.demo-section p {
color: ${cssManager.bdTheme('#666', '#999')};
margin-bottom: 16px;
font-size: 13px;
}
.label-grid {
display: flex;
flex-direction: column;
gap: 24px;
}
.label-row {
display: flex;
align-items: baseline;
gap: 16px;
}
.label-row .annotation {
font-size: 12px;
font-family: monospace;
color: ${cssManager.bdTheme('#888', '#666')};
flex-shrink: 0;
min-width: 200px;
}
`}
</style>
<div class="demo-container">
<div class="demo-section">
<h3>Basic Label</h3>
<p>A simple text label with no additional indicators.</p>
<div class="label-grid">
<div class="label-row">
<span class="annotation">label="Username"</span>
<dees-label .label=${'Username'}></dees-label>
</div>
<div class="label-row">
<span class="annotation">label="Email Address"</span>
<dees-label .label=${'Email Address'}></dees-label>
</div>
</div>
</div>
<div class="demo-section">
<h3>Required Indicator</h3>
<p>When <code>required</code> is set, a red asterisk appears after the label text.</p>
<div class="label-grid">
<div class="label-row">
<span class="annotation">required=${'{true}'}</span>
<dees-label .label=${'Full Name'} .required=${true}></dees-label>
</div>
<div class="label-row">
<span class="annotation">required=${'{false}'} (default)</span>
<dees-label .label=${'Nickname'} .required=${false}></dees-label>
</div>
</div>
</div>
<div class="demo-section">
<h3>Description (Info Icon)</h3>
<p>When <code>description</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
<div class="label-grid">
<div class="label-row">
<span class="annotation">description="..."</span>
<dees-label .label=${'API Key'} .description=${'Your API key can be found in the developer settings dashboard.'}></dees-label>
</div>
<div class="label-row">
<span class="annotation">short description</span>
<dees-label .label=${'Region'} .description=${'Select your nearest datacenter.'}></dees-label>
</div>
</div>
</div>
<div class="demo-section">
<h3>Required + Description</h3>
<p>Both indicators can be combined. The asterisk appears first, then the info icon.</p>
<div class="label-grid">
<div class="label-row">
<span class="annotation">required + description</span>
<dees-label .label=${'Password'} .required=${true} .description=${'Must be at least 8 characters with one uppercase letter and one number.'}></dees-label>
</div>
<div class="label-row">
<span class="annotation">required + description</span>
<dees-label .label=${'Email Address'} .required=${true} .description=${'We will send a verification link to this address.'}></dees-label>
</div>
</div>
</div>
<div class="demo-section">
<h3>Empty Label</h3>
<p>When <code>label</code> is empty or not set, nothing is rendered. The element below has no label text:</p>
<div class="label-grid">
<div class="label-row">
<span class="annotation">label="" (empty)</span>
<dees-label .label=${''}></dees-label>
</div>
</div>
</div>
</div>
`;