anentrypoint-design 0.0.312 → 0.0.313

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.312",
+  "version": "0.0.313",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/content.js

@@ -547,7 +547,10 @@ export function SearchInput({ value = '', placeholder = 'search…', onInput, on
         h('span', { key: 'cnt', class: 'sr-only', role: 'status', 'aria-live': 'polite' }, resultCount));
 }
 
-export function TextField({ label, value = '', type = 'text', placeholder = '', onInput, onChange, name, key, hint, multiline, rows = 4, maxLength, min, max, error, title, 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy }) {
+export function TextField({ label, value = '', type = 'text', placeholder = '', onInput, onChange, name, key, hint, multiline, rows = 4, maxLength, min, max, error, title, size = 'md', 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy }) {
+    // size: 'sm' | 'md' | 'lg' — md is the base .ds-field control; sm/lg add a
+    // wrapper modifier that snaps the control height/padding/font to --ctl-*.
+    const sizeCls = size === 'sm' ? ' ds-field--sm' : (size === 'lg' ? ' ds-field--lg' : '');
     const errorId = error != null ? ((key ? key : 'tf') + '-err') : null;
     const describedBy = ariaDescribedBy || errorId || null;
     const input = multiline
@@ -573,7 +576,7 @@ export function TextField({ label, value = '', type = 'text', placeholder = '',
             oninput: onInput ? (e) => onInput(e.target.value, e) : null,
             onchange: onChange ? (e) => onChange(e.target.value, e) : null
         });
-    return h('label', { key, class: 'ds-field' },
+    return h('label', { key, class: 'ds-field' + sizeCls },
         ...[
             label != null ? h('span', { key: 'l', class: 'ds-field-label' }, label) : null,
             input,
@@ -584,7 +587,8 @@ export function TextField({ label, value = '', type = 'text', placeholder = '',
     );
 }
 
-export function Select({ label, value = '', options = [], onChange, name, key, placeholder, hint, title, 'aria-label': ariaLabel }) {
+export function Select({ label, value = '', options = [], onChange, name, key, placeholder, hint, title, size = 'md', 'aria-label': ariaLabel }) {
+    const sizeCls = size === 'sm' ? ' ds-field--sm' : (size === 'lg' ? ' ds-field--lg' : '');
     const opts = [];
     if (placeholder != null) opts.push(h('option', { key: '_ph', value: '', disabled: true, selected: value === '' || value == null }, placeholder));
     for (const o of options) {
@@ -599,8 +603,9 @@ export function Select({ label, value = '', options = [], onChange, name, key, p
         title,
         onchange: onChange ? (e) => onChange(e.target.value, e) : null
     }, ...opts);
-    if (label == null && hint == null) return select;
-    return h('label', { key, class: 'ds-field' },
+    if (label == null && hint == null && size === 'md') return select;
+    if (label == null && hint == null) return h('label', { key, class: 'ds-field' + sizeCls }, select);
+    return h('label', { key, class: 'ds-field' + sizeCls },
         label != null ? h('span', { key: 'l', class: 'ds-field-label' }, label) : null,
         select,
         hint != null ? h('span', { key: 'h', class: 'ds-field-hint' }, hint) : null

package/src/components/editor-primitives.js

@@ -53,7 +53,30 @@ export function Tabs({ items = [], active, onChange, children, 'aria-label': ari
             if (btn) btn.focus();
         });
     };
-    return h('div', { class: 'ds-ep-tabs' },
+    // Position the sliding underline from the active tab's geometry. The ref is
+    // on the OUTER .ds-ep-tabs (position:relative) — the indicator is its child,
+    // NOT the flex head's (an abspos child of a horizontal flex row mis-sizes to
+    // 0 in Chromium). Runs on every render (ref fires after applyDiff) so a tab
+    // change re-measures; the CSS transition animates the move. left/width come
+    // from the active tab; top sits the bar on the head's bottom edge.
+    const positionSlider = (root) => {
+        if (!root) return;
+        const head = root.querySelector('.ds-ep-tabs-head');
+        const active = root.querySelector('.ds-ep-tab.active');
+        const ind = root.querySelector('.ds-ep-tab-indicator');
+        if (!head || !active || !ind) return;
+        // Size via left+right insets, NOT width: an abspos element's inline
+        // `width` computes to 0 in some flex-sibling layouts (Chromium), but
+        // left+right insets size reliably. left/right animate via the CSS
+        // transition on .ds-ep-tab-indicator.
+        const rootW = root.offsetWidth;
+        const l = active.offsetLeft, w = active.offsetWidth;
+        ind.style.left = l + 'px';
+        ind.style.right = Math.max(0, rootW - l - w) + 'px';
+        ind.style.top = (head.offsetTop + head.offsetHeight - 2) + 'px';
+        head.classList.add('has-slider');
+    };
+    return h('div', { class: 'ds-ep-tabs', ref: positionSlider },
         h('div', { class: 'ds-ep-tabs-head', role: 'tablist', 'aria-label': ariaLabel || 'tabs' },
             ...items.map((it, idx) => h('button', {
                 key: it.id,
@@ -69,6 +92,9 @@ export function Tabs({ items = [], active, onChange, children, 'aria-label': ari
                 onkeydown: (e) => onTabKeyDown(e, idx)
             }, it.label))
         ),
+        // The sliding underline — child of the outer column (see positionSlider).
+        // Keyed + decorative. Renders at 0-width until positioned (no-JS: hidden).
+        h('span', { key: '__ind', class: 'ds-ep-tab-indicator', 'aria-hidden': 'true' }),
         h('div', {
             class: 'ds-ep-tabs-body',
             role: 'tabpanel',

package/src/components/shell.js

@@ -12,14 +12,22 @@ export function Brand({ name = '247420', leaf } = {}) {
         leaf || null);
 }
 
-export function Chip({ tone = '', children }) {
-    return h('span', { class: 'chip' + (tone ? ' tone-' + tone : '') }, children);
+export function Chip({ tone = '', size = 'md', tag = false, children }) {
+    // size: 'sm' | 'md' | 'lg'; tag=true -> rectangular sentence-case variant
+    // for dense data (drops the all-caps pill). Both are orthogonal to tone.
+    const sizeCls = size === 'sm' ? ' chip--sm' : (size === 'lg' ? ' chip--lg' : '');
+    return h('span', { class: 'chip' + sizeCls + (tag ? ' chip--tag' : '') + (tone ? ' tone-' + tone : '') }, children);
 }
 
-export function Btn({ href, variant = 'default', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled, class: className, key }) {
+export function Btn({ href, variant = 'default', size = 'md', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled, class: className, key }) {
     // Support legacy primary/ghost props for backward compatibility, but prefer variant
     const resolvedVariant = variant !== 'default' ? variant : (primary ? 'primary' : (ghost ? 'ghost' : (danger ? 'danger' : 'default')));
+    // size: 'sm' | 'md' | 'lg' — md is the base .btn rule (no class); sm/lg add a
+    // modifier that snaps height/padding/font to the --ctl-* ladder. Unknown
+    // sizes fall back to md so a typo never drops the button's base styling.
+    const sizeCls = size === 'sm' ? ' btn-sm' : (size === 'lg' ? ' btn-lg' : '');
     const cls = (resolvedVariant === 'primary' ? 'btn-primary' : (resolvedVariant === 'ghost' ? 'btn-ghost' : (resolvedVariant === 'danger' ? 'btn-primary danger' : 'btn')))
+        + sizeCls
         + (disabled ? ' is-disabled' : '')
         + (className ? ' ' + className : '');
     const onclick = (e) => {
@@ -67,8 +75,10 @@ export function IconButton({ icon, onClick, title, size = 'base', variant = 'gho
     }, Glyph({ children: icon, size }));
 }
 
-export function Badge({ children, variant = 'default', tone = 'neutral' }) {
-    return h('span', { class: 'ds-badge ds-badge-' + variant + ' tone-' + tone }, children);
+export function Badge({ children, variant = 'default', tone = 'neutral', size = 'md' }) {
+    // size: 'sm' | 'md' | 'lg' — md is the base 18px badge.
+    const sizeCls = size === 'sm' ? ' ds-badge--sm' : (size === 'lg' ? ' ds-badge--lg' : '');
+    return h('span', { class: 'ds-badge ds-badge-' + variant + sizeCls + ' tone-' + tone }, children);
 }
 
 // Pill — plain non-interactive label chip for tag-like annotations (a phase