@shineuix/core 1.0.0 → 1.0.1

package/dist/collection/components/sui-icon-field/sui-icon-field.js

@@ -18,7 +18,7 @@ const SIZES = ['sm', 'md', 'lg'];
  * it posts `name=value`.
  *
  * @slot end - Trailing content inside the field's edge: a shortcut hint, a unit, a small action. It
- * sits after the clear control and the trailing icon, centred on the field's height, and the input
+ * sits after the clear control and the trailing icon, centered on the field's height, and the input
  * gives up room for it only while it is filled. A press on it that lands on nothing focusable puts
  * the caret in the input, so a `sui-kbd` hint reads and behaves as part of the field.
  */
@@ -217,7 +217,7 @@ export class SuiIconField {
         const width = w == null || w === '' ? undefined : typeof w === 'number' || /^\d+(\.\d+)?$/.test(String(w)) ? `${w}px` : String(w);
         const bad = this.invalid || !!this.error;
         const size = SIZES.includes(this.size) ? this.size : 'md';
-        return (h(FieldShell, { key: '0d83da24002605f3a7c444df759a1f849d64af3a', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, h("div", { key: 'f40863a9cd0d800071861b0048cb4f7e19b86c4a', class: { 'sui-input': true, 'sui-frame': true, 'sui-icon-field': true, [size]: true, invalid: bad, focus: this.focused, disabled: this.isDisabled, readonly: this.readOnly, 'has-icon': !!this.icon, 'has-end': this.hasEnd }, style: width ? { width } : undefined }, this.icon ? h("i", { class: `${this.icon} icon lead`, "aria-hidden": "true" }) : null, h("input", { key: 'bc71fb40288c6fd83cb43fc73b2f7e9f1880755f', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: this.type, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, autocomplete: this.autocomplete, pattern: this.pattern, minLength: this.minLength, inputMode: this.hints.inputmode, enterKeyHint: this.hints.enterkeyhint, "aria-label": this.label ? null : this.hostLabel || (this.hostLabelledby ? null : this.placeholder), "aria-labelledby": this.label ? null : this.hostLabelledby, "aria-invalid": bad ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: this.onChange }), this.clearable && this.value && !this.isDisabled && !this.readOnly ? (h("button", { type: "button", class: { clear: true, 'before-icon': !!this.endIcon || this.hasEnd }, "aria-label": localeText(undefined, 'icon-field.clear', undefined, 'Clear'), onClick: this.clear }, h(Glyph, { glyph: circleXmark }))) : null, this.endIcon ? h("i", { class: `${this.endIcon} icon trail`, "aria-hidden": "true" }) : null, h("span", { key: '71600da279926be20c7aaefd023ffb80184ad07d', class: "end", ref: (el) => (this.endEl = el), onMouseDown: this.onEndPress }, h("slot", { key: '2cb1e0ff98f9c612d2ca37521613bfcccb6d0de8', name: "end" })))));
+        return (h(FieldShell, { key: '46bcb9e4374efdb4984950ca3a18712702c3eef7', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, h("div", { key: '0cd91cac8d3dfc28553a3aea01fe7b1cfde2ab2b', class: { 'sui-input': true, 'sui-frame': true, 'sui-icon-field': true, [size]: true, invalid: bad, focus: this.focused, disabled: this.isDisabled, readonly: this.readOnly, 'has-icon': !!this.icon, 'has-end': this.hasEnd }, style: width ? { width } : undefined }, this.icon ? h("i", { class: `${this.icon} icon lead`, "aria-hidden": "true" }) : null, h("input", { key: 'f8c3d05db3545a8177964c5602eead474557bdc9', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: this.type, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, autocomplete: this.autocomplete, pattern: this.pattern, minLength: this.minLength, inputMode: this.hints.inputmode, enterKeyHint: this.hints.enterkeyhint, "aria-label": this.label ? null : this.hostLabel || (this.hostLabelledby ? null : this.placeholder), "aria-labelledby": this.label ? null : this.hostLabelledby, "aria-invalid": bad ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: this.onChange }), this.clearable && this.value && !this.isDisabled && !this.readOnly ? (h("button", { type: "button", class: { clear: true, 'before-icon': !!this.endIcon || this.hasEnd }, "aria-label": localeText(undefined, 'icon-field.clear', undefined, 'Clear'), onClick: this.clear }, h(Glyph, { glyph: circleXmark }))) : null, this.endIcon ? h("i", { class: `${this.endIcon} icon trail`, "aria-hidden": "true" }) : null, h("span", { key: '3183488e505eb7e3701f0713716e760c058f0d6a', class: "end", ref: (el) => (this.endEl = el), onMouseDown: this.onEndPress }, h("slot", { key: 'e84d332f1340f4fea741d09d7c57927b0e9fa3ce', name: "end" })))));
     }
     static get is() { return "sui-icon-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sui-ifta-label/sui-ifta-label.js

@@ -133,7 +133,7 @@ export class SuiIftaLabel {
     };
     render() {
         const invalid = this.invalid || !!this.error;
-        return (h(FieldShell, { key: '49d90864339ca67ccad6f89fba05100ac8250b01', help: this.help, error: this.error, descId: this.fieldId }, h("div", { key: 'c9177ac5eed4e8bc60d420fae0a7b4adf309cec2', class: { 'sui-input': true, 'sui-frame': true, 'sui-ifta': true, focus: this.focused, invalid, disabled: this.isDisabled, readonly: this.readOnly }, onClick: () => this.input?.focus() }, h("label", { key: 'b84e98a4a3120eec090c8c1c1d225dd8d15e9633', class: "ifta-label", htmlFor: this.fieldId }, this.label, this.required ? h("span", { class: "sui-field-req", "aria-hidden": "true" }, "*") : null), h("input", { key: 'e62f8a8ae5052a01a3cc83bb9eea3a85597934e4', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: this.type, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, maxLength: this.maxLength, pattern: this.pattern, minLength: this.minLength, inputMode: this.hints.inputmode, enterKeyHint: this.hints.enterkeyhint, "aria-label": this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-invalid": invalid ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: this.onChange }))));
+        return (h(FieldShell, { key: '04b3343b7f84f09bfd9c4632b36f0bcabf131dd7', help: this.help, error: this.error, descId: this.fieldId }, h("div", { key: '4f3370c99d6676072d0ef67c2fbdd05fd2d1f768', class: { 'sui-input': true, 'sui-frame': true, 'sui-ifta': true, focus: this.focused, invalid, disabled: this.isDisabled, readonly: this.readOnly }, onClick: () => this.input?.focus() }, h("label", { key: 'c5867efb75ce1bcc47000742345accd4289abd2c', class: "ifta-label", htmlFor: this.fieldId }, this.label, this.required ? h("span", { class: "sui-field-req", "aria-hidden": "true" }, "*") : null), h("input", { key: 'c759ac1aec1f281afbaae105c0b1f34d7f69e7b3', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: this.type, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, maxLength: this.maxLength, pattern: this.pattern, minLength: this.minLength, inputMode: this.hints.inputmode, enterKeyHint: this.hints.enterkeyhint, "aria-label": this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-invalid": invalid ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: this.onChange }))));
     }
     static get is() { return "sui-ifta-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sui-image/sui-image.css

@@ -1,8 +1,10 @@
 :host { display: inline-block; font-family: var(--font-sans); }
 
-.figure { margin: 0; display: inline-block; }
+/* The element carries the width; the figure and the frame fill it. Unset, the element shrinks to the
+   picture as before, and a button frame, which would shrink to its content, fills it all the same. */
+.figure { margin: 0; display: block; }
 .frame {
-  position: relative; display: block; overflow: hidden; box-sizing: border-box; padding: 0; margin: 0;
+  position: relative; display: block; width: 100%; overflow: hidden; box-sizing: border-box; padding: 0; margin: 0;
   border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunken);
   cursor: default; font: inherit; color: inherit; text-align: start;
 }

package/dist/collection/components/sui-image/sui-image.js

@@ -32,7 +32,8 @@ export class SuiImage {
     alt = '';
     /** Caption under the image (11.5px faint ink) and under the lightbox preview. */
     caption;
-    /** Frame width: a number of px or any CSS length. */
+    /** Width: a number of px or any CSS length, a percentage of the container included. The element
+     *  takes it, the frame fills it and the caption wraps to it. */
     width;
     /** Frame height: a number of px or any CSS length. */
     height;
@@ -59,7 +60,7 @@ export class SuiImage {
     /**
      * Shows the lightbox. Mutable; the element opens it on click and closes it on Escape, the scrim
      * and the close control. Focus is trapped inside while it is open and returns to the frame
-     * afterwards. Zoomed past 1x, the picture drags to pan and the arrow keys pan it too. While open,
+     * afterward. Zoomed past 1x, the picture drags to pan and the arrow keys pan it too. While open,
      * and while it fades out, the lightbox paints in the browser's top layer, so a transformed or
      * clipping ancestor cannot trap it; everything outside it is inert and the page does not scroll,
      * and a node the page adds outside it while it is open goes inert too. The lightbox is
@@ -349,8 +350,9 @@ export class SuiImage {
         return (h("button", { type: "button", class: "tool", "aria-label": label, onClick: onClick }, h(Glyph, { glyph: glyph })));
     }
     render() {
+        // The width is the element's, not the frame's: a percentage on the frame resolved against a
+        // figure that shrinks to its content, so width="100%" drew the picture's own width.
         const frameStyle = {
-            width: SuiImage.len(this.width),
             height: SuiImage.len(this.height),
             borderRadius: this.radius || undefined,
         };
@@ -358,10 +360,10 @@ export class SuiImage {
         const fit = SuiImage.one(FITS, this.fit, 'cover');
         const picture = [
             this.failed ? null : (h("img", { class: { pic: true, [fit]: true }, src: this.src, alt: this.alt, loading: SuiImage.one(LOADINGS, this.loading, 'lazy'), onError: this.onImageError })),
-            h("span", { key: 'a26973d182b104f7a4bdc114bdd3bfe5697fbbb1', class: "fallback", hidden: !this.failed }, h("slot", { key: '02e2716a07d9d3fef1c016da68ff83604dcafdc2', name: "error" })),
+            h("span", { key: '8c7b09836fbd132e42ada35d52ab7f00546e9677', class: "fallback", hidden: !this.failed }, h("slot", { key: 'b971b0b60c1b9088563ef84b0c5d5eb433d2af9d', name: "error" })),
             this.failed && !hasSlotted(this.host, 'error') ? h(MediaFallback, { text: localeText(undefined, 'image.unavailable', undefined, 'Image unavailable') }) : null,
         ];
-        return (h(Host, { key: 'f02baa9ae7c9a0b775607cda11d8dffb56a74583' }, h("figure", { key: 'd9b8a137ff65c6083abecf8f5ed89c95567cfde4', class: "figure" }, this.interactive ? (h("button", { type: "button", class: "frame preview", style: frameStyle, "aria-label": localeFormat(undefined, 'image.preview', undefined, 'Preview: {name}', { name: name }), "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.layerId : undefined, onClick: this.openPreview }, picture, h("span", { class: "veil", "aria-hidden": "true" }, h(Glyph, { glyph: magnifyingGlassPlus })))) : (h("div", { class: { frame: true, failed: this.failed }, style: frameStyle }, picture)), this.caption ? h("figcaption", { class: "caption" }, this.caption) : null), this.open || this.closing ? (h("div", { id: this.layerId, class: { layer: true, closing: this.closing }, inert: this.closing, ref: (el) => (this.layer = el), role: "dialog", "aria-label": name, onClick: this.onLayerClick, onKeyDown: this.onLayerKeyDown }, h("div", { class: "bar" }, this.caption ? h("div", { class: "big-caption" }, this.caption) : null, h("div", { class: "tools" }, this.tool(localeText(undefined, 'image.zoomIn', undefined, 'Zoom in'), magnifyingGlassPlus, () => this.setZoom(Math.min(2.5, +(this.zoom + 0.25).toFixed(2)))), this.tool(localeText(undefined, 'image.zoomOut', undefined, 'Zoom out'), magnifyingGlassMinus, () => this.setZoom(Math.max(0.5, +(this.zoom - 0.25).toFixed(2)))), h("span", { class: "sep", "aria-hidden": "true" }), this.tool(localeText(undefined, 'image.rotateLeft', undefined, 'Rotate left'), rotateLeft, () => this.turn(-90)), this.tool(localeText(undefined, 'image.rotateRight', undefined, 'Rotate right'), rotateRight, () => this.turn(90)), h("span", { class: "sep", "aria-hidden": "true" }), this.tool(localeText(undefined, 'image.close', undefined, 'Close'), xmark, () => this.requestClose('close-button')))), h("div", { class: "stage", ref: (el) => (this.stage = el) }, h("img", { class: { big: true, pannable: this.pannable, panning: this.panning }, ref: (el) => (this.big = el), src: this.bigSrc, alt: this.alt, style: { transform: this.transform() }, onError: this.onPreviewError, onPointerDown: this.onPanDown })))) : null));
+        return (h(Host, { key: '634729e4a9db6c5aa5752f1c37e2b324b8810513', style: { width: SuiImage.len(this.width) } }, h("figure", { key: 'a21f0a5409a42d2ff2b46e2e6152c386664ddac8', class: "figure" }, this.interactive ? (h("button", { type: "button", class: "frame preview", style: frameStyle, "aria-label": localeFormat(undefined, 'image.preview', undefined, 'Preview: {name}', { name: name }), "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.layerId : undefined, onClick: this.openPreview }, picture, h("span", { class: "veil", "aria-hidden": "true" }, h(Glyph, { glyph: magnifyingGlassPlus })))) : (h("div", { class: { frame: true, failed: this.failed }, style: frameStyle }, picture)), this.caption ? h("figcaption", { class: "caption" }, this.caption) : null), this.open || this.closing ? (h("div", { id: this.layerId, class: { layer: true, closing: this.closing }, inert: this.closing, ref: (el) => (this.layer = el), role: "dialog", "aria-label": name, onClick: this.onLayerClick, onKeyDown: this.onLayerKeyDown }, h("div", { class: "bar" }, this.caption ? h("div", { class: "big-caption" }, this.caption) : null, h("div", { class: "tools" }, this.tool(localeText(undefined, 'image.zoomIn', undefined, 'Zoom in'), magnifyingGlassPlus, () => this.setZoom(Math.min(2.5, +(this.zoom + 0.25).toFixed(2)))), this.tool(localeText(undefined, 'image.zoomOut', undefined, 'Zoom out'), magnifyingGlassMinus, () => this.setZoom(Math.max(0.5, +(this.zoom - 0.25).toFixed(2)))), h("span", { class: "sep", "aria-hidden": "true" }), this.tool(localeText(undefined, 'image.rotateLeft', undefined, 'Rotate left'), rotateLeft, () => this.turn(-90)), this.tool(localeText(undefined, 'image.rotateRight', undefined, 'Rotate right'), rotateRight, () => this.turn(90)), h("span", { class: "sep", "aria-hidden": "true" }), this.tool(localeText(undefined, 'image.close', undefined, 'Close'), xmark, () => this.requestClose('close-button')))), h("div", { class: "stage", ref: (el) => (this.stage = el) }, h("img", { class: { big: true, pannable: this.pannable, panning: this.panning }, ref: (el) => (this.big = el), src: this.bigSrc, alt: this.alt, style: { transform: this.transform() }, onError: this.onPreviewError, onPointerDown: this.onPanDown })))) : null));
     }
     static get is() { return "sui-image"; }
     static get encapsulation() { return "scoped"; }
@@ -466,7 +468,7 @@ export class SuiImage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Frame width: a number of px or any CSS length."
+                    "text": "Width: a number of px or any CSS length, a percentage of the container included. The element\ntakes it, the frame fills it and the caption wraps to it."
                 },
                 "getter": false,
                 "setter": false,
@@ -520,7 +522,7 @@ export class SuiImage {
                     "references": {
                         "SuiImageFit": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-image/sui-image.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-image/sui-image.tsx",
                             "id": "src/components/sui-image/sui-image.tsx::SuiImageFit"
                         }
                     }
@@ -546,7 +548,7 @@ export class SuiImage {
                     "references": {
                         "SuiImageLoading": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-image/sui-image.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-image/sui-image.tsx",
                             "id": "src/components/sui-image/sui-image.tsx::SuiImageLoading"
                         }
                     }
@@ -595,7 +597,7 @@ export class SuiImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Shows the lightbox. Mutable; the element opens it on click and closes it on Escape, the scrim\nand the close control. Focus is trapped inside while it is open and returns to the frame\nafterwards. Zoomed past 1x, the picture drags to pan and the arrow keys pan it too. While open,\nand while it fades out, the lightbox paints in the browser's top layer, so a transformed or\nclipping ancestor cannot trap it; everything outside it is inert and the page does not scroll,\nand a node the page adds outside it while it is open goes inert too. The lightbox is\n`role=\"dialog\"` with no `aria-modal`, so VoiceOver keeps reading the toast region; Tab goes on\nfrom the lightbox into the toast stack and back. An element the page marks `data-sui-keep-live`\nstays usable with everything in it, and focus may move into it and back."
+                    "text": "Shows the lightbox. Mutable; the element opens it on click and closes it on Escape, the scrim\nand the close control. Focus is trapped inside while it is open and returns to the frame\nafterward. Zoomed past 1x, the picture drags to pan and the arrow keys pan it too. While open,\nand while it fades out, the lightbox paints in the browser's top layer, so a transformed or\nclipping ancestor cannot trap it; everything outside it is inert and the page does not scroll,\nand a node the page adds outside it while it is open goes inert too. The lightbox is\n`role=\"dialog\"` with no `aria-modal`, so VoiceOver keeps reading the toast region; Tab goes on\nfrom the lightbox into the toast stack and back. An element the page marks `data-sui-keep-live`\nstays usable with everything in it, and focus may move into it and back."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sui-inplace/sui-inplace.js

@@ -159,7 +159,7 @@ export class SuiInplace {
     render() {
         const placeholder = localeText(undefined, 'inplace.placeholder', this.placeholder, 'Click to edit');
         const locked = this.disabled || this.readOnly;
-        return (h(Host, { key: 'b3bdad0742ec1f24e5d4fffe2a6afee1b1f8584a' }, this.label ? h("span", { class: "sui-inplace-label" }, this.label) : null, this.editing ? (h("span", { class: "sui-inplace-field", "data-value": this.value || placeholder }, h("input", { ref: (el) => (this.input = el), class: "sui-inplace-input sui-frame", type: "text", size: 1, name: this.name, value: this.value, placeholder: this.placeholder, "aria-label": this.label || placeholder, onInput: this.onInput, onBlur: this.onBlur, onKeyDown: this.onInputKey }))) : (h("span", { ref: (el) => (this.text = el), class: { 'sui-inplace-text': true, empty: !this.value, locked }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, "aria-readonly": this.readOnly && !this.disabled ? 'true' : undefined, "aria-label": this.disabled ? undefined : this.label || undefined, onClick: locked ? undefined : () => this.begin(), onKeyDown: locked ? undefined : this.onTextKey }, h("span", { class: "value" }, this.value || placeholder), locked ? null : h(Glyph, { glyph: penToSquareRegular }))), !this.editing && this.name ? h("input", { type: "hidden", name: this.name, value: this.value }) : null));
+        return (h(Host, { key: '44759a46406ae15c593d34c486b979813121ca7e' }, this.label ? h("span", { class: "sui-inplace-label" }, this.label) : null, this.editing ? (h("span", { class: "sui-inplace-field", "data-value": this.value || placeholder }, h("input", { ref: (el) => (this.input = el), class: "sui-inplace-input sui-frame", type: "text", size: 1, name: this.name, value: this.value, placeholder: this.placeholder, "aria-label": this.label || placeholder, onInput: this.onInput, onBlur: this.onBlur, onKeyDown: this.onInputKey }))) : (h("span", { ref: (el) => (this.text = el), class: { 'sui-inplace-text': true, empty: !this.value, locked }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, "aria-readonly": this.readOnly && !this.disabled ? 'true' : undefined, "aria-label": this.disabled ? undefined : this.label || undefined, onClick: locked ? undefined : () => this.begin(), onKeyDown: locked ? undefined : this.onTextKey }, h("span", { class: "value" }, this.value || placeholder), locked ? null : h(Glyph, { glyph: penToSquareRegular }))), !this.editing && this.name ? h("input", { type: "hidden", name: this.name, value: this.value }) : null));
     }
     static get is() { return "sui-inplace"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sui-input-group/sui-input-group.css

@@ -22,7 +22,7 @@
 }
 ::slotted(:first-child) { border-inline-start: none; }
 ::slotted(input), ::slotted([data-grow]) { flex: 1 1 0; width: 0; }
-/* A growing element takes the width and hands it to the box inside it, centred in the frame. */
+/* A growing element takes the width and hands it to the box inside it, centered in the frame. */
 ::slotted([data-grow]:not(input)) { flex-direction: column; justify-content: center; }
 ::slotted(sui-input-group-addon) { align-items: center; }
 
@@ -35,7 +35,7 @@
 ::slotted(sui-button) { align-items: stretch; }
 /* A button is a segment: square, the frame's height, no border of its own (the rule before it
    divides), and its focus ring drawn inside, where the frame does not clip it; on a filled button
-   that inset ring takes the colour that stands on the fill, since the focus colour may be the fill. */
+   that inset ring takes the color that stands on the fill, since the focus color may be the fill. */
 ::slotted(sui-button), ::slotted(sui-icon-button) {
   --sui-button-radius: 0; --sui-button-height: calc(var(--sui-group-height, var(--control-md)) - 2px); --sui-button-border: transparent;
   --sui-button-hover-border: transparent; --sui-button-focus-offset: -3px; --sui-button-focus-shadow: none;

package/dist/collection/components/sui-input-group-addon/sui-input-group-addon.js

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SuiInputGroupAddon {
     render() {
-        return (h(Host, { key: '9c6c955aa8f342625371e845303b877a3c883a07' }, h("slot", { key: '74c95fa3b70f163443293d424e285950b4a7988a' })));
+        return (h(Host, { key: '342c69b3bb6d66a2eb1888a3eb7309eb4cc38847' }, h("slot", { key: '73d4dc32aeb4f8c4c01eaee44a5ec63f470adc94' })));
     }
     static get is() { return "sui-input-group-addon"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sui-input-mask/sui-input-mask.js

@@ -245,7 +245,7 @@ export class SuiInputMask {
         const optional = this.mask.includes('?');
         const requiredPart = optional ? this.mask.slice(0, this.mask.indexOf('?')) : '';
         const size = SIZES.includes(this.size) ? this.size : 'md';
-        return (h(FieldShell, { key: '634471bc71366453ed3e4e2f9bfcf3c0ba8f730c', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, h("input", { key: '5b74078d0252d5effe929593cf04f1464d00e301', ref: (el) => (this.input = el), id: this.fieldId, class: { 'sui-input': true, 'sui-frame': true, 'sui-mask': true, [size]: true, invalid }, type: "text", value: this.value, placeholder: placeholder, maxLength: pattern.length, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, autocomplete: this.autocomplete ?? 'off', "aria-label": this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-invalid": invalid ? 'true' : null, "aria-describedby": [describedBy(this.fieldId, this.help, this.error), `${this.fieldId}-fmt`].filter(Boolean).join(' ') || null, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onInput: this.onInput, onChange: this.onChange }), h("span", { key: '4bb157280e88de2a4c6355e05f37ca93862e1949', class: "sui-mask-fmt", id: `${this.fieldId}-fmt` }, optional && requiredPart
+        return (h(FieldShell, { key: '7ae81732110f63e53c55f5d25f2b7d6be76071ea', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, h("input", { key: 'd3ed14244f1eba2e4590a039876f91488b023a5f', ref: (el) => (this.input = el), id: this.fieldId, class: { 'sui-input': true, 'sui-frame': true, 'sui-mask': true, [size]: true, invalid }, type: "text", value: this.value, placeholder: placeholder, maxLength: pattern.length, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, autocomplete: this.autocomplete ?? 'off', "aria-label": this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-invalid": invalid ? 'true' : null, "aria-describedby": [describedBy(this.fieldId, this.help, this.error), `${this.fieldId}-fmt`].filter(Boolean).join(' ') || null, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onInput: this.onInput, onChange: this.onChange }), h("span", { key: 'bd610e4b2b15ac2e366ca1817a2f1b91dfb50e86', class: "sui-mask-fmt", id: `${this.fieldId}-fmt` }, optional && requiredPart
             ? localeFormat(undefined, 'input-mask.formatPartial', undefined, 'Format: {pattern} ({part} required)', { pattern, part: requiredPart })
             : localeFormat(undefined, 'input-mask.format', undefined, 'Format: {pattern}', { pattern }))));
     }

package/dist/collection/components/sui-input-number/sui-input-number.css

@@ -1,4 +1,6 @@
 :host { display: block; font-family: var(--font-sans); min-inline-size: min(180px, 100%); }
+/* align is this element's prop, not the legacy attribute the browser maps to text-align. */
+:host([align]) { text-align: inherit; }
 :host .sui-input.sui-number { display: flex; align-items: stretch; overflow: hidden; padding: 0; cursor: text; }
 .sui-number .field {
   flex: 1 1 0; width: 0; min-width: 0; border: none; outline: none; background: transparent; color: inherit;
@@ -6,7 +8,7 @@
 }
 .sui-number .field:disabled { color: var(--disabled-ink); cursor: not-allowed; }
 .sui-input.sui-number.readonly:not(.disabled) { background: var(--surface-sunken); }
-.sui-number.currency .field { text-align: end; }
+.sui-number.end .field { text-align: end; }
 .sui-number .affix { display: flex; align-items: center; color: var(--ink-faint); }
 .sui-number.disabled .affix { color: var(--ink-placeholder); }
 

package/dist/collection/components/sui-input-number/sui-input-number.js

@@ -45,7 +45,7 @@ export class SuiInputNumber {
     variant = 'default';
     /**
      * Ink for the quiet variant on the brand chrome. `inverse` takes the inverse inks, the inverse hover
-     * wash and the inverse focus colour, as `sui-button`'s tone of the same name does, so the value
+     * wash and the inverse focus color, as `sui-button`'s tone of the same name does, so the value
      * reads on a `tone="brand"` toolbar. Opening the field shows its shell in the card's own inks. The
      * default variant ignores it.
      */
@@ -82,6 +82,13 @@ export class SuiInputNumber {
      * without `money`.
      */
     currency = 'USD';
+    /**
+     * Which side of the field the number sits on, in the reading direction. Unset, a `money` field
+     * sits at the end and any other at the start. Set `end` where figures stack and should line up
+     * on their last digit: quantities, hours and rates in a line-item form, as a table's number
+     * column does. A `quiet` field is as wide as its number, so it has no side to choose.
+     */
+    align;
     /**
      * BCP 47 tag that sets the grouping and decimal characters, e.g. "de-DE" shows 1.234,50 and
      * accepts it typed. Unset, the page's locale (`setLocale()` or `<html lang>`), else en-US, as on
@@ -253,7 +260,7 @@ export class SuiInputNumber {
     }
     /** Coerce, round to `decimals`, then clamp to `min`/`max`, so the number the element holds, posts
         and reports through `aria-valuenow` is always the one it displays. Never emits: a mount-time or
-        author-driven normalisation is not a user commit (same rule as sui-color-editor). */
+        author-driven normalization is not a user commit (same rule as sui-color-editor). */
     normalizeValue(v) {
         const n = this.coerce(v);
         if (n == null)
@@ -359,9 +366,9 @@ export class SuiInputNumber {
         const quiet = this.variant === 'quiet';
         const boxClass = quiet
             ? { 'sui-inline': true, text: true, [size]: true, invalid, disabled: this.isDisabled, readonly: this.readOnly, shell: this.focused, inverse: this.tone === 'inverse' }
-            : { 'sui-input': true, 'sui-frame': true, 'sui-number': true, [size]: true, invalid, disabled: this.isDisabled, readonly: this.readOnly, currency: money };
-        const field = (h("input", { key: 'a4c8c21dfb522a74b4fbf3878796755e0e5789ff', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: "text", size: quiet ? 1 : undefined, inputMode: this.dec() === 0 && this.min != null && this.min >= 0 ? 'numeric' : 'decimal', role: "spinbutton", "aria-label": quiet ? this.label || this.hostLabel : this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, value: this.text, placeholder: this.placeholder, autocomplete: this.autocomplete, disabled: this.isDisabled, readOnly: this.readOnly, required: this.required, "aria-valuenow": this.value == null ? null : this.value, "aria-valuetext": this.valueText(), "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-invalid": invalid ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onKeyDown: this.onKeyDown }));
-        return (h(FieldShell, { key: '0ea6de51137e5f48f992f045262d0fdc49159cd9', label: quiet ? undefined : this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, h("div", { key: '41735dbe06d8836322aad8e355ddd87519f5360b', class: boxClass, onMouseDown: this.onWrapMouseDown }, prefix ? h("span", { class: "affix prefix", "aria-hidden": "true" }, prefix) : null, quiet ? h("span", { class: "fit", "data-value": this.text || this.placeholder || '' }, field) : field, suffix ? h("span", { class: "affix suffix" }, suffix) : null, !this.hideButtons ? (h("div", { class: "steppers" }, h("button", { type: "button", class: "step", tabIndex: -1, disabled: this.isDisabled || this.readOnly, "aria-label": this.stepLabel(1), onClick: () => this.stepBy(1) }, h(Glyph, { glyph: chevronUp })), h("div", { class: "step-rule", "aria-hidden": "true" }), h("button", { type: "button", class: "step", tabIndex: -1, disabled: this.isDisabled || this.readOnly, "aria-label": this.stepLabel(-1), onClick: () => this.stepBy(-1) }, h(Glyph, { glyph: chevronDown })))) : null)));
+            : { 'sui-input': true, 'sui-frame': true, 'sui-number': true, [size]: true, invalid, disabled: this.isDisabled, readonly: this.readOnly, currency: money, end: (this.align ?? (money ? 'end' : 'start')) === 'end' };
+        const field = (h("input", { key: '44d4cfd31b446097bd297a4d65b469e36665f68d', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: "text", size: quiet ? 1 : undefined, inputMode: this.dec() === 0 && this.min != null && this.min >= 0 ? 'numeric' : 'decimal', role: "spinbutton", "aria-label": quiet ? this.label || this.hostLabel : this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, value: this.text, placeholder: this.placeholder, autocomplete: this.autocomplete, disabled: this.isDisabled, readOnly: this.readOnly, required: this.required, "aria-valuenow": this.value == null ? null : this.value, "aria-valuetext": this.valueText(), "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-invalid": invalid ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onKeyDown: this.onKeyDown }));
+        return (h(FieldShell, { key: '6a4509fbe04a7ce3aaa1278410747ef599890e3e', label: quiet ? undefined : this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, h("div", { key: '1662135e4297eae51bd49d7fe8b2fdd66c9804ae', class: boxClass, onMouseDown: this.onWrapMouseDown }, prefix ? h("span", { class: "affix prefix", "aria-hidden": "true" }, prefix) : null, quiet ? h("span", { class: "fit", "data-value": this.text || this.placeholder || '' }, field) : field, suffix ? h("span", { class: "affix suffix" }, suffix) : null, !this.hideButtons ? (h("div", { class: "steppers" }, h("button", { type: "button", class: "step", tabIndex: -1, disabled: this.isDisabled || this.readOnly, "aria-label": this.stepLabel(1), onClick: () => this.stepBy(1) }, h(Glyph, { glyph: chevronUp })), h("div", { class: "step-rule", "aria-hidden": "true" }), h("button", { type: "button", class: "step", tabIndex: -1, disabled: this.isDisabled || this.readOnly, "aria-label": this.stepLabel(-1), onClick: () => this.stepBy(-1) }, h(Glyph, { glyph: chevronDown })))) : null)));
     }
     static get is() { return "sui-input-number"; }
     static get encapsulation() { return "scoped"; }
@@ -507,7 +514,7 @@ export class SuiInputNumber {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Ink for the quiet variant on the brand chrome. `inverse` takes the inverse inks, the inverse hover\nwash and the inverse focus colour, as `sui-button`'s tone of the same name does, so the value\nreads on a `tone=\"brand\"` toolbar. Opening the field shows its shell in the card's own inks. The\ndefault variant ignores it."
+                    "text": "Ink for the quiet variant on the brand chrome. `inverse` takes the inverse inks, the inverse hover\nwash and the inverse focus color, as `sui-button`'s tone of the same name does, so the value\nreads on a `tone=\"brand\"` toolbar. Opening the field shows its shell in the card's own inks. The\ndefault variant ignores it."
                 },
                 "getter": false,
                 "setter": false,
@@ -692,6 +699,25 @@ export class SuiInputNumber {
                 "attribute": "currency",
                 "defaultValue": "'USD'"
             },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Which side of the field the number sits on, in the reading direction. Unset, a `money` field\nsits at the end and any other at the start. Set `end` where figures stack and should line up\non their last digit: quantities, hours and rates in a line-item form, as a table's number\ncolumn does. A `quiet` field is as wide as its number, so it has no side to choose."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align"
+            },
             "locale": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sui-input-otp/sui-input-otp.js

@@ -296,7 +296,7 @@ export class SuiInputOtp {
         const desc = describedBy(this.fieldId, this.help, this.error);
         const size = SIZES.includes(this.size) ? this.size : 'md';
         this.inputs = [];
-        return (h(FieldShell, { key: '7bd6efecb1f07de3044524c1293d99c5fad93c5a', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: `${this.fieldId}-1`, descId: this.fieldId }, h("div", { key: '332e7ee7521b625ff5ef0b03ee0a663c88a587c6', class: { 'sui-otp': true, [size]: true }, role: "group", "aria-label": this.label || this.hostLabel || (this.hostLabelledby ? undefined : localeText(undefined, 'input-otp.oneTimeCode', undefined, 'One-time code')), "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-describedby": desc, "aria-invalid": invalid ? 'true' : null, onFocusin: this.onFocusIn, onFocusout: this.onFocusOut }, this.cells.map((v, i) => (h("input", { key: i, id: i === 0 ? `${this.fieldId}-1` : undefined, ref: (el) => {
+        return (h(FieldShell, { key: '4a38d4d02878508e04adb11aab037fd4b9e9833e', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: `${this.fieldId}-1`, descId: this.fieldId }, h("div", { key: '94688e0bbcb8ca424c70856bdb84d09025ba0a3d', class: { 'sui-otp': true, [size]: true }, role: "group", "aria-label": this.label || this.hostLabel || (this.hostLabelledby ? undefined : localeText(undefined, 'input-otp.oneTimeCode', undefined, 'One-time code')), "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-describedby": desc, "aria-invalid": invalid ? 'true' : null, onFocusin: this.onFocusIn, onFocusout: this.onFocusOut }, this.cells.map((v, i) => (h("input", { key: i, id: i === 0 ? `${this.fieldId}-1` : undefined, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: { 'sui-input': true, 'sui-frame': true, cell: true, [size]: true, invalid }, type: this.masked ? 'password' : 'text', inputMode: this.alphanumeric ? 'text' : 'numeric', autocomplete: i === 0 ? 'one-time-code' : 'off', maxLength: 1, value: v, disabled: this.isDisabled, readOnly: this.readOnly, "aria-label": this.alphanumeric

package/dist/collection/components/sui-input-tags/sui-input-tags.js

@@ -318,7 +318,7 @@ export class SuiInputTags {
                     "references": {
                         "SuiInputTagsValue": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-input-tags/sui-input-tags.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-input-tags/sui-input-tags.tsx",
                             "id": "src/components/sui-input-tags/sui-input-tags.tsx::SuiInputTagsValue"
                         }
                     }
@@ -538,7 +538,7 @@ export class SuiInputTags {
                     "references": {
                         "SuiInputTagsValue": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-input-tags/sui-input-tags.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-input-tags/sui-input-tags.tsx",
                             "id": "src/components/sui-input-tags/sui-input-tags.tsx::SuiInputTagsValue"
                         }
                     }

package/dist/collection/components/sui-kbd/sui-kbd.js

@@ -22,7 +22,7 @@ export class SuiKbd {
      */
     quiet = false;
     render() {
-        return (h(Host, { key: '822d0e4695959ad7a0a72c1cc9f130853c934cf3' }, h("kbd", { key: '7eb4d95af6355ce397f7c5c178338122a6473616', class: { 'sui-kbd': true, [this.size === 'sm' ? 'sm' : 'md']: true, inverse: this.tone === 'inverse', quiet: this.quiet } }, h("slot", { key: '301716f01a0b9d50a67371b5ec37be6e05a21334' }))));
+        return (h(Host, { key: 'fc8f631a3edfd62da8a344b7917d6dc802908637' }, h("kbd", { key: '49ed337f6689d9d514e0afaa8792daaaf87e9a24', class: { 'sui-kbd': true, [this.size === 'sm' ? 'sm' : 'md']: true, inverse: this.tone === 'inverse', quiet: this.quiet } }, h("slot", { key: 'b4d6fca2187b88620985ff69074151729b8fb761' }))));
     }
     static get is() { return "sui-kbd"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sui-knob/sui-knob.js

@@ -30,7 +30,7 @@ export class SuiKnob {
     min = 0;
     /** Highest value. */
     max = 100;
-    /** Increment between values; drag positions and keyboard steps snap to it. Decimals are honoured.
+    /** Increment between values; drag positions and keyboard steps snap to it. Decimals are honored.
      *  A drag crosses the whole range in 150px whatever the step, so a coarse step lands on the grid
      *  without slowing the drag. */
     step = 1;
@@ -204,7 +204,7 @@ export class SuiKnob {
         const pct = span > 0 ? clamp((this.num - this.min) / span, 0, 1) : 0;
         const deg = 270 * pct;
         const size = Math.max(0, this.diameter);
-        return (h(FieldShell, { key: '15234d94a00fa6742ef5a5295540fd116b84381f', help: this.help, error: this.error, descId: this.fieldId }, h("div", { key: '0786926eb0b9015c6cd3b28bc711170cfc34306c', class: { 'sui-knob': true, disabled: this.isDisabled, 'read-only': this.readOnly, invalid: !!this.error, dragging: this.dragging, empty } }, h("div", { key: '35a4fd0827707677af507a57bf10824d6a3f25d7', ref: (el) => (this.dial = el), class: "dial", role: "slider", tabIndex: this.isDisabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuenow": this.num, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuetext": empty ? localeText(undefined, 'knob.noValue', undefined, 'No value') : this.fmt(this.num), "aria-orientation": "vertical", "aria-disabled": this.isDisabled ? 'true' : null, "aria-readonly": this.readOnly ? 'true' : null, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), style: { width: `${size}px`, height: `${size}px`, '--sui-knob-deg': `${deg}deg` }, onPointerDown: this.onDown, onKeyDown: this.onKeyDown }, h("div", { key: 'a5e96f5da9888ecab99d7282f0a33b48071b9505', class: "face", style: { width: `${Math.max(0, size - 22)}px`, height: `${Math.max(0, size - 22)}px`, fontSize: `${size / 4.4}px` } }, empty ? null : h("span", { class: "figure" }, this.fmt(this.num)))), this.label ? (h("span", { class: "label" }, this.label, this.required ? h("span", { class: "sui-field-req", "aria-hidden": "true" }, "*") : null)) : null)));
+        return (h(FieldShell, { key: '768fb33418aeae58b820e1859f69bfc2e4b969d6', help: this.help, error: this.error, descId: this.fieldId }, h("div", { key: '336ec1f6e86e691293c1476c4f98884940168e31', class: { 'sui-knob': true, disabled: this.isDisabled, 'read-only': this.readOnly, invalid: !!this.error, dragging: this.dragging, empty } }, h("div", { key: 'c29eb2466e9a7809581a43979b1cf2a7a1aa4257', ref: (el) => (this.dial = el), class: "dial", role: "slider", tabIndex: this.isDisabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuenow": this.num, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuetext": empty ? localeText(undefined, 'knob.noValue', undefined, 'No value') : this.fmt(this.num), "aria-orientation": "vertical", "aria-disabled": this.isDisabled ? 'true' : null, "aria-readonly": this.readOnly ? 'true' : null, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), style: { width: `${size}px`, height: `${size}px`, '--sui-knob-deg': `${deg}deg` }, onPointerDown: this.onDown, onKeyDown: this.onKeyDown }, h("div", { key: '90c03c06a2a77109b530425e38a986afaa8015dd', class: "face", style: { width: `${Math.max(0, size - 22)}px`, height: `${Math.max(0, size - 22)}px`, fontSize: `${size / 4.4}px` } }, empty ? null : h("span", { class: "figure" }, this.fmt(this.num)))), this.label ? (h("span", { class: "label" }, this.label, this.required ? h("span", { class: "sui-field-req", "aria-hidden": "true" }, "*") : null)) : null)));
     }
     static get is() { return "sui-knob"; }
     static get encapsulation() { return "scoped"; }
@@ -350,7 +350,7 @@ export class SuiKnob {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Increment between values; drag positions and keyboard steps snap to it. Decimals are honoured.\nA drag crosses the whole range in 150px whatever the step, so a coarse step lands on the grid\nwithout slowing the drag."
+                    "text": "Increment between values; drag positions and keyboard steps snap to it. Decimals are honored.\nA drag crosses the whole range in 150px whatever the step, so a coarse step lands on the grid\nwithout slowing the drag."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sui-list/sui-list.js

@@ -347,7 +347,7 @@ export class SuiList {
                     "references": {
                         "SuiListEntry": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-list/sui-list.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-list/sui-list.tsx",
                             "id": "src/components/sui-list/sui-list.tsx::SuiListEntry"
                         }
                     }
@@ -553,7 +553,7 @@ export class SuiList {
                     "references": {
                         "SuiListItem": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-list/sui-list.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-list/sui-list.tsx",
                             "id": "src/components/sui-list/sui-list.tsx::SuiListItem"
                         },
                         "SuiRenderResult": {
@@ -599,7 +599,7 @@ export class SuiList {
                     "references": {
                         "SuiListItemPickDetail": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-list/sui-list.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-list/sui-list.tsx",
                             "id": "src/components/sui-list/sui-list.tsx::SuiListItemPickDetail"
                         }
                     }

package/dist/collection/components/sui-listbox/sui-listbox.js

@@ -439,7 +439,7 @@ export class SuiListbox {
                     "references": {
                         "SuiListboxEntry": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-listbox/sui-listbox.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-listbox/sui-listbox.tsx",
                             "id": "src/components/sui-listbox/sui-listbox.tsx::SuiListboxEntry"
                         }
                     }

package/dist/collection/components/sui-mega-menu/sui-mega-menu.js

@@ -824,7 +824,7 @@ export class SuiMegaMenu {
                     "references": {
                         "SuiMegaMenuItem": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-mega-menu/sui-mega-menu.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-mega-menu/sui-mega-menu.tsx",
                             "id": "src/components/sui-mega-menu/sui-mega-menu.tsx::SuiMegaMenuItem"
                         }
                     }
@@ -931,7 +931,7 @@ export class SuiMegaMenu {
                     "references": {
                         "SuiMegaMenuLink": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-mega-menu/sui-mega-menu.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-mega-menu/sui-mega-menu.tsx",
                             "id": "src/components/sui-mega-menu/sui-mega-menu.tsx::SuiMegaMenuLink"
                         }
                     }

package/dist/collection/components/sui-menubar/sui-menubar.js

@@ -707,7 +707,7 @@ export class SuiMenubar {
                     "references": {
                         "SuiMenubarItem": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-menubar/sui-menubar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-menubar/sui-menubar.tsx",
                             "id": "src/components/sui-menubar/sui-menubar.tsx::SuiMenubarItem"
                         }
                     }

package/dist/collection/components/sui-message/sui-message.js

@@ -88,7 +88,7 @@ export class SuiMessage {
         const ev = this.suiClose.emit('close-button');
         if (ev.defaultPrevented)
             return;
-        const next = byKeyboard ? this.neighbour() : undefined;
+        const next = byKeyboard ? this.neighbor() : undefined;
         this.host.setAttribute('hidden', '');
         next?.focus({ preventScroll: true });
     };
@@ -106,7 +106,7 @@ export class SuiMessage {
      * page; focus moves instead to where Tab would have gone next, or back to where it came from
      * when the message was the last stop, so the reader keeps their place.
      */
-    neighbour() {
+    neighbor() {
         if (typeof document === 'undefined' || !document.body)
             return undefined;
         let all = [];
@@ -128,7 +128,7 @@ export class SuiMessage {
         const mark = this.icon
             ? h("i", { class: `${this.icon} icon`, "aria-hidden": "true" })
             : h(Glyph, { glyph: SEVERITY_GLYPH[severity], class: "icon" });
-        return (h(Host, { key: 'baa8dc385ecf09acc1fa829491d734febaf23d95' }, h("div", { key: '81d50b5f22b543c9ad8833f70ca93bd2b264a720', class: { msg: true, [severity]: true }, role: critical ? 'alert' : 'status' }, mark, h("div", { key: 'f33edd3734b4c1494462a67be3aa9fb40b9c1c97', class: "body" }, this.heading ? h("div", { class: { heading: true, 'has-body': this.hasBody } }, this.heading) : null, h("div", { key: '34ef4e635ac2d55f4233d419f10f2e9efb054220', ref: (el) => (this.textEl = el), class: { text: true, empty: !this.hasBody } }, h("slot", { key: '346cec8fa92d52eca02c1b351ef722252d39a1a6' }))), this.hasAction ? h("span", { class: "action" }, h("slot", { name: "action" })) : null, this.closable ? (h("sui-icon-button", { class: "close", size: "sm", "aria-label": localeText(undefined, 'message.dismiss', undefined, 'Dismiss'), onPointerDown: this.onClosePointerDown, onClick: this.close }, h(Glyph, { glyph: xmark }))) : null)));
+        return (h(Host, { key: '5324bb99afff57112f5d52eae40c3cd67eaa4db2' }, h("div", { key: 'f0afd77bdf5766df60145c7646edf5d1edabd184', class: { msg: true, [severity]: true }, role: critical ? 'alert' : 'status' }, mark, h("div", { key: '3e6ebbc244d05e67f433ad111d3adfad7a93f0b2', class: "body" }, this.heading ? h("div", { class: { heading: true, 'has-body': this.hasBody } }, this.heading) : null, h("div", { key: '488bd43d9211f4ac51f551b6a383958da1385d14', ref: (el) => (this.textEl = el), class: { text: true, empty: !this.hasBody } }, h("slot", { key: '4d61ea938d07de0a2f29323c50b3d93396e19963' }))), this.hasAction ? h("span", { class: "action" }, h("slot", { name: "action" })) : null, this.closable ? (h("sui-icon-button", { class: "close", size: "sm", "aria-label": localeText(undefined, 'message.dismiss', undefined, 'Dismiss'), onPointerDown: this.onClosePointerDown, onClick: this.close }, h(Glyph, { glyph: xmark }))) : null)));
     }
     static get is() { return "sui-message"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sui-meter-group/sui-meter-group.js

@@ -27,7 +27,7 @@ export class SuiMeterGroup {
      *  under it. `vertical` stands the bar up as a column that fills the height of the element or of
      *  its parent (give one of them a height, e.g. `style="height:180px"`; 120px is the floor),
      *  stacks the segments top to bottom in legend order, and puts the total and the legend beside
-     *  it. An unrecognised value falls back to `horizontal`. */
+     *  it. An unrecognized value falls back to `horizontal`. */
     orientation = 'horizontal';
     render() {
         const segments = Array.isArray(this.segments) ? this.segments : [];
@@ -67,7 +67,7 @@ export class SuiMeterGroup {
                     "references": {
                         "SuiMeterSegment": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-meter-group/sui-meter-group.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-meter-group/sui-meter-group.tsx",
                             "id": "src/components/sui-meter-group/sui-meter-group.tsx::SuiMeterSegment"
                         }
                     }
@@ -91,7 +91,7 @@ export class SuiMeterGroup {
                     "references": {
                         "SuiMeterTotal": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-meter-group/sui-meter-group.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-meter-group/sui-meter-group.tsx",
                             "id": "src/components/sui-meter-group/sui-meter-group.tsx::SuiMeterTotal"
                         }
                     }
@@ -157,7 +157,7 @@ export class SuiMeterGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Which way the bar runs. `horizontal` (default) is the pill across the card with the legend\nunder it. `vertical` stands the bar up as a column that fills the height of the element or of\nits parent (give one of them a height, e.g. `style=\"height:180px\"`; 120px is the floor),\nstacks the segments top to bottom in legend order, and puts the total and the legend beside\nit. An unrecognised value falls back to `horizontal`."
+                    "text": "Which way the bar runs. `horizontal` (default) is the pill across the card with the legend\nunder it. `vertical` stands the bar up as a column that fills the height of the element or of\nits parent (give one of them a height, e.g. `style=\"height:180px\"`; 120px is the floor),\nstacks the segments top to bottom in legend order, and puts the total and the legend beside\nit. An unrecognized value falls back to `horizontal`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sui-mini-toolbar/sui-mini-toolbar.js

@@ -80,7 +80,7 @@ export class SuiMiniToolbar {
         this.disposeRoving = rovingTabindex(this.host, ROVING, 'horizontal');
     }
     render() {
-        return (h(Host, { key: 'b7e5cb8d8520e76c4fa3ca7df31b88b134da959d', role: "toolbar", class: { hidden: !this.open && !this.closing, closing: this.closing }, inert: this.closing, "aria-hidden": this.open ? null : 'true', style: { left: `${Number(this.x) || 0}px`, top: `${Number(this.y) || 0}px` } }, h("slot", { key: '9dcad9e1aecf2e86a7a25a6af8fb59ba6f9e1efb' })));
+        return (h(Host, { key: 'f99a3f1159c7233f014d265220396ddd748e5150', role: "toolbar", class: { hidden: !this.open && !this.closing, closing: this.closing }, inert: this.closing, "aria-hidden": this.open ? null : 'true', style: { left: `${Number(this.x) || 0}px`, top: `${Number(this.y) || 0}px` } }, h("slot", { key: '9bd890a80350c47f0a5692ce058129b75c8a7681' })));
     }
     static get is() { return "sui-mini-toolbar"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sui-multi-select/sui-multi-select.js

@@ -96,7 +96,7 @@ export class SuiMultiSelect {
     variant = 'default';
     /**
      * Ink for the quiet variant on the brand chrome. `inverse` takes the inverse inks, the inverse hover
-     * wash and the inverse focus colour, as `sui-button`'s tone of the same name does, so the value
+     * wash and the inverse focus color, as `sui-button`'s tone of the same name does, so the value
      * reads on a `tone="brand"` toolbar. Opening the field shows its shell in the card's own inks. The
      * default variant ignores it.
      */
@@ -591,12 +591,12 @@ export class SuiMultiSelect {
         const triggerClass = inline
             ? { 'sui-inline': true, [size]: true, open: this.open, shell: this.open, invalid, placeholder: selOpts.length === 0, disabled: this.isDisabled, readonly: this.readOnly, inverse: this.tone === 'inverse' }
             : { 'sui-popup-trigger': true, 'sui-frame': true, trigger: true, [size]: true, focus: this.focused, open: this.open, invalid, placeholder: selOpts.length === 0, disabled: this.isDisabled, readonly: this.readOnly };
-        return (h(FieldShell, { key: '13f5f69dd8e98705440f6c069d26a29e05a20967', label: inline ? undefined : this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, h("div", { key: '6ff8b2f8b80c7bf5d8c46394edce016b4e5a8acd', class: { 'sui-multi-select': true, open: this.open, inline }, onKeyDown: this.onKeyDown }, h("div", { key: '2c31bb89205b4d51c20bf032c447ceb9e1514842', ref: (el) => (this.trigger = el), id: this.fieldId, class: triggerClass, role: "combobox", tabIndex: this.isDisabled ? -1 : 0, "aria-label": this.label || this.hostLabel, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.fieldId}-list`, "aria-activedescendant": activeId, "aria-disabled": this.isDisabled ? 'true' : null, "aria-invalid": invalid ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-readonly": this.readOnly ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), "aria-keyshortcuts": canClear ? 'Delete' : null, "aria-busy": this.loading ? 'true' : null, onClick: this.onTriggerClick, onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, h("span", { key: '5a37d4b2f0e8a41e2926273adaf5f5e5dc222134', class: "chips" }, selOpts.length === 0 ? h("span", { class: "val placeholder-text" }, localeText(undefined, 'multi-select.placeholder', this.placeholder, 'Select')) : null, selOpts.slice(0, this.maxChips).map((o) => (h("sui-chip", { size: "sm", key: o.value, label: o.label, icon: o.icon, removable: !this.readOnly, disabled: this.isDisabled, onSuiRemove: (e) => { e.stopPropagation(); this.toggle(o); } }))), selOpts.length > this.maxChips ? h("span", { class: "more" }, localeFormat(undefined, 'multi-select.more', undefined, '+{count} more', { count: selOpts.length - this.maxChips })) : null), canClear ? (h("span", { class: "clear", "aria-hidden": "true", onClick: this.clear }, h(Glyph, { glyph: xmark }))) : null, this.loading
+        return (h(FieldShell, { key: '6a07ed117bb50585038154309d9756d31ce77462', label: inline ? undefined : this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, h("div", { key: 'c94a66b8f8b190c5144fb3c23e294f32cd133981', class: { 'sui-multi-select': true, open: this.open, inline }, onKeyDown: this.onKeyDown }, h("div", { key: '27e6507e6bbab4acd7d8a9726856ff20fd34cea3', ref: (el) => (this.trigger = el), id: this.fieldId, class: triggerClass, role: "combobox", tabIndex: this.isDisabled ? -1 : 0, "aria-label": this.label || this.hostLabel, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.fieldId}-list`, "aria-activedescendant": activeId, "aria-disabled": this.isDisabled ? 'true' : null, "aria-invalid": invalid ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-readonly": this.readOnly ? 'true' : null, "aria-describedby": describedBy(this.fieldId, this.help, this.error), "aria-keyshortcuts": canClear ? 'Delete' : null, "aria-busy": this.loading ? 'true' : null, onClick: this.onTriggerClick, onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, h("span", { key: 'a7a21435f54e42e9f30fc78ad2be58be89bd3eb1', class: "chips" }, selOpts.length === 0 ? h("span", { class: "val placeholder-text" }, localeText(undefined, 'multi-select.placeholder', this.placeholder, 'Select')) : null, selOpts.slice(0, this.maxChips).map((o) => (h("sui-chip", { size: "sm", key: o.value, label: o.label, icon: o.icon, removable: !this.readOnly, disabled: this.isDisabled, onSuiRemove: (e) => { e.stopPropagation(); this.toggle(o); } }))), selOpts.length > this.maxChips ? h("span", { class: "more" }, localeFormat(undefined, 'multi-select.more', undefined, '+{count} more', { count: selOpts.length - this.maxChips })) : null), canClear ? (h("span", { class: "clear", "aria-hidden": "true", onClick: this.clear }, h(Glyph, { glyph: xmark }))) : null, this.loading
             ? h(Glyph, { glyph: circleNotch, class: "spin sui-popup-spin" })
             : h(Glyph, { glyph: chevronDown, class: "chev" })), this.open || this.closing ? (h("div", { key: "panel", ref: (el) => (this.panel = el), class: { 'sui-popup-panel': true, panel: true, closing: this.closing }, inert: this.closing, role: "presentation", onScroll: this.onPanelScroll, onKeyDown: this.onPanelKey, ...{ onSuiChange: stop } }, this.filter ? (h("div", { class: "sui-popup-search" }, h("div", { class: "sui-popup-search-box sui-frame" }, h(Glyph, { glyph: magnifyingGlass }), h("input", { ref: (el) => (this.filterInput = el), type: "text", placeholder: localeText(undefined, 'multi-select.search', undefined, 'Search'), "aria-label": localeText(undefined, 'multi-select.searchOptions', undefined, 'Search options'), "aria-controls": `${this.fieldId}-list`, "aria-activedescendant": activeId, value: this.query, onInput: (e) => { this.query = e.target.value; this.hoverIdx = 0; this.resetScroll(); } })))) : null, this.loading ? h(PopupLoading, { message: loadingText }) : null, !this.loading && list.length === 0 ? h("div", { key: "empty", class: "sui-popup-empty" }, emptyText) : null, h("div", { key: "list", id: `${this.fieldId}-list`, role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.hostLabel, "aria-busy": this.loading ? 'true' : null }, this.loading ? null : [
             h("div", { id: `${this.fieldId}-all`, role: "option", "aria-label": localeText(undefined, 'multi-select.selectAll', undefined, 'Select all'), "aria-selected": allSelected ? 'true' : 'false', class: { all: true, hover: this.hoverIdx === ALL_ROW, keynav: this.keyNav && this.hoverIdx === ALL_ROW }, onMouseEnter: () => (this.hoverIdx = ALL_ROW), onClick: () => this.toggleAll() }, h("sui-checkbox", { ...{ inert: true }, class: "all-box", label: localeText(undefined, 'multi-select.selectAll', undefined, 'Select all'), size: "sm", checked: allSelected, indeterminate: someSelected, disabled: this.isDisabled })),
             popupRows(runs, win, (r) => `${this.fieldId}-grp-${r}`, (o, i) => this.renderRow(o, i, vals, list.length)),
-        ]))) : null, h(PopupStatus, { key: 'e335ff4a7d868fba896b0cf9e141609f9367fc21', message: !this.open ? '' : this.loading ? loadingText : list.length === 0 ? emptyText : '' }))));
+        ]))) : null, h(PopupStatus, { key: '7f18f7a7a0703d4afd69a053b43388c5371d5d11', message: !this.open ? '' : this.loading ? loadingText : list.length === 0 ? emptyText : '' }))));
     }
     static get is() { return "sui-multi-select"; }
     static get encapsulation() { return "scoped"; }
@@ -679,7 +679,7 @@ export class SuiMultiSelect {
                     "references": {
                         "SuiMultiSelectEntry": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-multi-select/sui-multi-select.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-multi-select/sui-multi-select.tsx",
                             "id": "src/components/sui-multi-select/sui-multi-select.tsx::SuiMultiSelectEntry"
                         }
                     }
@@ -987,7 +987,7 @@ export class SuiMultiSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Ink for the quiet variant on the brand chrome. `inverse` takes the inverse inks, the inverse hover\nwash and the inverse focus colour, as `sui-button`'s tone of the same name does, so the value\nreads on a `tone=\"brand\"` toolbar. Opening the field shows its shell in the card's own inks. The\ndefault variant ignores it."
+                    "text": "Ink for the quiet variant on the brand chrome. `inverse` takes the inverse inks, the inverse hover\nwash and the inverse focus color, as `sui-button`'s tone of the same name does, so the value\nreads on a `tone=\"brand\"` toolbar. Opening the field shows its shell in the card's own inks. The\ndefault variant ignores it."
                 },
                 "getter": false,
                 "setter": false,