@spfx-fast/sharepoint-ui 0.4.1 → 0.4.3

package/dist/elements/search.js

@@ -150,10 +150,9 @@ export function defineSearchBox() {
                 if (value !== null)
                     input.setAttribute(name, value);
             }
-            const clear = document.createElement("span");
+            const clear = document.createElement("button");
+            clear.type = "button";
             clear.className = "dismiss";
-            clear.setAttribute("role", "button");
-            clear.tabIndex = -1;
             clear.part.add("clear-button");
             clear.setAttribute("aria-label", this.getAttribute("clear-label") || "Clear search");
             clear.hidden = !this.#value || input.disabled || input.readOnly;
@@ -172,12 +171,6 @@ export function defineSearchBox() {
                 this.dispatchEvent(new CustomEvent("spui-input", { bubbles: true, composed: true, detail: { value: "", reason: "clear", sourceEvent: event } }));
                 this.dispatchEvent(new CustomEvent("spui-clear", { bubbles: true, composed: true }));
             });
-            clear.addEventListener("keydown", event => {
-                if (event.key !== "Enter" && event.key !== " ")
-                    return;
-                event.preventDefault();
-                clear.click();
-            });
             input.addEventListener("input", event => {
                 this.setValue(input.value, true);
                 this.dispatchEvent(new CustomEvent("spui-input", { bubbles: true, composed: true, detail: { value: input.value, reason: "input", sourceEvent: event } }));
@@ -198,7 +191,7 @@ export function defineSearchBox() {
             after.append(afterSlot, clear);
             control.append(contentBefore, input, after);
             const style = document.createElement("style");
-            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px);min-width:0}label:empty{display:none}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.control{box-sizing:border-box;display:flex;align-items:center;gap:8px;min-width:0;min-height:var(--spui-control-height,36px);padding-inline:var(--spui-control-padding-inline,12px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit))}.control[data-size=small]{min-height:28px;font-size:13px}.control[data-size=large]{min-height:44px;font-size:16px}.control[data-appearance=underline]{border:0;border-bottom:1px solid var(--spui-control-border,var(--spui-ui-stroke,#8a8886));border-radius:0}.control[data-appearance=filled-darker],.control[data-appearance=filled-darker-shadow]{border-color:transparent;background:var(--spui-input-filled-darker,var(--spui-ui-surface-hover,var(--spui-semantic-input-background,#f3f2f1)))}.control[data-appearance=filled-lighter],.control[data-appearance=filled-lighter-shadow]{border-color:transparent;background:var(--spui-input-filled-lighter,var(--spui-base-surface,var(--spui-ui-canvas,#faf9f8)))}.control[data-appearance=filled-darker-shadow],.control[data-appearance=filled-lighter-shadow]{box-shadow:var(--spui-input-filled-shadow,var(--spui-control-shadow,var(--shadow2,0 1px 2px rgb(0 0 0 / 20%))))}.control:focus-within{border-color:var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)))}.control:focus-within[data-appearance=underline]{border-bottom-width:2px}slot[name=content-before],.content-after{display:inline-flex;align-items:center;flex:none;gap:4px}slot[name=content-after]{display:inline-flex;align-items:center;gap:4px}input{box-sizing:border-box;flex:1;min-width:0;width:100%;padding:0;border:0;outline:0;background:transparent;color:inherit;font:inherit}input::placeholder{color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));opacity:1}input::-webkit-search-cancel-.dismiss{display:none}svg[part=search-icon]{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dismiss{display:grid;place-items:center;flex:none;width:28px;height:28px;padding:5px;border:0;border-radius:var(--spui-control-radius,4px);background:transparent;color:inherit;cursor:pointer}.dismiss[hidden]{display:none}.dismiss:hover{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.dismiss:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}.dismiss svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}@media(forced-colors:active){.control{border-color:FieldText}.control:focus-within,.dismiss:focus-visible{outline-color:Highlight}}`;
+            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px);min-width:0}label:empty{display:none}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.control{box-sizing:border-box;display:flex;align-items:center;gap:8px;min-width:0;min-height:var(--spui-control-height,36px);padding-inline:var(--spui-control-padding-inline,12px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit))}.control[data-size=small]{min-height:28px;font-size:13px}.control[data-size=large]{min-height:44px;font-size:16px}.control[data-appearance=underline]{border:0;border-bottom:1px solid var(--spui-control-border,var(--spui-ui-stroke,#8a8886));border-radius:0}.control[data-appearance=filled-darker],.control[data-appearance=filled-darker-shadow]{border-color:transparent;background:var(--spui-input-filled-darker,var(--spui-ui-surface-hover,var(--spui-semantic-input-background,#f3f2f1)))}.control[data-appearance=filled-lighter],.control[data-appearance=filled-lighter-shadow]{border-color:transparent;background:var(--spui-input-filled-lighter,var(--spui-base-surface,var(--spui-ui-canvas,#faf9f8)))}.control[data-appearance=filled-darker-shadow],.control[data-appearance=filled-lighter-shadow]{box-shadow:var(--spui-input-filled-shadow,var(--spui-control-shadow,var(--shadow2,0 1px 2px rgb(0 0 0 / 20%))))}.control:focus-within{border-color:var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)))}.control:has(input[aria-invalid]:not([aria-invalid=false])){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))}.control:focus-within[data-appearance=underline]{border-bottom-width:2px}slot[name=content-before],.content-after{display:inline-flex;align-items:center;flex:none;gap:4px}slot[name=content-after]{display:inline-flex;align-items:center;gap:4px}input{box-sizing:border-box;flex:1;min-width:0;width:100%;padding:0;border:0;outline:0;background:transparent;color:inherit;font:inherit}input:focus-visible{outline:0}input::placeholder{color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));opacity:1}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}svg[part=search-icon]{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dismiss{appearance:none;display:grid;place-items:center;flex:none;width:28px;height:28px;padding:5px;border:0;border-radius:var(--spui-control-radius,4px);background:transparent;color:inherit;font:inherit;cursor:pointer}.dismiss[hidden]{display:none}.dismiss:hover{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.dismiss:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}.dismiss svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}@media(forced-colors:active){.control{border-color:FieldText}.control:focus-within{border-color:Highlight}.control:has(input[aria-invalid]:not([aria-invalid=false])){border-color:CanvasText}.control:has(input[aria-invalid]:not([aria-invalid=false])):focus-within{border-color:Highlight}.dismiss:focus-visible{outline-color:Highlight}}`;
             shadow.replaceChildren(style, label, control);
             this.syncFormValue();
         }

package/dist/elements/select.js

@@ -281,8 +281,8 @@ export function defineSelect() {
             icon.append(fallbackIcon);
             control.append(selectSlot, icon);
             const style = document.createElement("style");
-            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px)}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.control{position:relative;min-width:0}select{box-sizing:border-box;width:100%;min-height:var(--spui-control-height,36px);padding-inline:var(--spui-control-padding-inline,12px);padding-inline-end:36px;appearance:none;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit}:host([size=small]) select{min-height:24px;font-size:var(--spui-text-font-size-small,12px)}:host([size=large]) select{min-height:40px;font-size:var(--spui-text-font-size-large,18px)}:host([appearance=underline]) select{border-width:0 0 1px;border-radius:0}:host([appearance=filled-darker]) select{background:var(--colorNeutralBackground3,var(--spui-ui-surface-sunken,#f0f0f0));border-color:transparent}:host([appearance=filled-lighter]) select{background:var(--colorNeutralBackground2,var(--spui-ui-surface-hover,#f5f5f5));border-color:transparent}slot[name=icon]{position:absolute;inset-inline-end:8px;top:50%;display:grid;place-items:center;width:20px;height:20px;transform:translateY(-50%);color:var(--spui-ui-muted,var(--spui-ui-text,#424242));pointer-events:none}slot[name=icon]::slotted(*){width:20px;height:20px}select:focus-visible{outline:2px solid var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e));outline-offset:2px}select:disabled{opacity:.55}@media(forced-colors:active){select{border-color:FieldText}slot[name=icon]{color:ButtonText}select:focus-visible{outline-color:Highlight}}`;
-            style.textContent += `slot[name=select]{display:block}slot[name=select]::slotted(select){box-sizing:border-box;width:100%;min-height:var(--spui-control-height,36px);padding-inline:var(--spui-control-padding-inline,12px);padding-inline-end:36px;appearance:none;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--colorNeutralStroke1,#8a8886)));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,inherit);font:inherit}:host([size=small]) slot[name=select]::slotted(select){min-height:24px;font-size:var(--spui-text-font-size-small,12px)}:host([size=large]) slot[name=select]::slotted(select){min-height:40px;font-size:var(--spui-text-font-size-large,18px)}:host([appearance=underline]) slot[name=select]::slotted(select){border-width:0 0 1px;border-radius:0}:host([appearance=filled-darker]) slot[name=select]::slotted(select){background:var(--colorNeutralBackground3,var(--spui-ui-surface-sunken,#f0f0f0));border-color:transparent}:host([appearance=filled-lighter]) slot[name=select]::slotted(select){background:var(--colorNeutralBackground2,var(--spui-ui-surface-hover,#f5f5f5));border-color:transparent}slot[name=select]::slotted(select:focus-visible){outline:2px solid var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e));outline-offset:2px}slot[name=select]::slotted(select:disabled){opacity:.55}@media(forced-colors:active){slot[name=select]::slotted(select){border-color:FieldText}slot[name=select]::slotted(select:focus-visible){outline-color:Highlight}}`;
+            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px)}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.control{position:relative;min-width:0}select{box-sizing:border-box;width:100%;min-height:var(--spui-control-height,36px);padding-inline:var(--spui-control-padding-inline,12px);padding-inline-end:36px;appearance:none;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit}:host([size=small]) select{min-height:24px;font-size:var(--spui-text-font-size-small,12px)}:host([size=large]) select{min-height:40px;font-size:var(--spui-text-font-size-large,18px)}:host([appearance=underline]) select{border-width:0 0 1px;border-radius:0}:host([appearance=filled-darker]) select{background:var(--colorNeutralBackground3,var(--spui-ui-surface-sunken,#f0f0f0));border-color:transparent}:host([appearance=filled-lighter]) select{background:var(--colorNeutralBackground2,var(--spui-ui-surface-hover,#f5f5f5));border-color:transparent}slot[name=icon]{position:absolute;inset-inline-end:8px;top:50%;display:grid;place-items:center;width:20px;height:20px;transform:translateY(-50%);color:var(--spui-ui-muted,var(--spui-ui-text,#424242));pointer-events:none}slot[name=icon]::slotted(*){width:20px;height:20px}select:focus-visible{border-width:2px;border-color:var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e));outline:0}:host([appearance=underline]) select:focus-visible{border-width:0 0 2px}select[aria-invalid]:not([aria-invalid=false]){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))}select:disabled{opacity:.55}@media(forced-colors:active){select{border-color:FieldText}slot[name=icon]{color:ButtonText}select:focus-visible{border-color:Highlight;border-width:2px;outline:0}select[aria-invalid]:not([aria-invalid=false]){border-color:CanvasText}select[aria-invalid]:not([aria-invalid=false]):focus-visible{border-color:Highlight}:host([appearance=underline]) select:focus-visible{border-width:0 0 2px}}`;
+            style.textContent += `slot[name=select]{display:block}slot[name=select]::slotted(select){box-sizing:border-box;width:100%;min-height:var(--spui-control-height,36px);padding-inline:var(--spui-control-padding-inline,12px);padding-inline-end:36px;appearance:none;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--colorNeutralStroke1,#8a8886)));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,inherit);font:inherit}:host([size=small]) slot[name=select]::slotted(select){min-height:24px;font-size:var(--spui-text-font-size-small,12px)}:host([size=large]) slot[name=select]::slotted(select){min-height:40px;font-size:var(--spui-text-font-size-large,18px)}:host([appearance=underline]) slot[name=select]::slotted(select){border-width:0 0 1px;border-radius:0}:host([appearance=filled-darker]) slot[name=select]::slotted(select){background:var(--colorNeutralBackground3,var(--spui-ui-surface-sunken,#f0f0f0));border-color:transparent}:host([appearance=filled-lighter]) slot[name=select]::slotted(select){background:var(--colorNeutralBackground2,var(--spui-ui-surface-hover,#f5f5f5));border-color:transparent}slot[name=select]::slotted(select:focus-visible){border-width:2px!important;border-color:var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e))!important;outline:0!important;outline-offset:0;box-shadow:none!important}:host([appearance=underline]) slot[name=select]::slotted(select:focus-visible){border-width:0 0 2px!important}slot[name=select]::slotted(select[aria-invalid]:not([aria-invalid=false])){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))!important}slot[name=select]::slotted(select:disabled){opacity:.55}@media(forced-colors:active){slot[name=select]::slotted(select){border-color:FieldText}slot[name=select]::slotted(select:focus-visible){border-color:Highlight!important;border-width:2px!important;outline:0!important}slot[name=select]::slotted(select[aria-invalid]:not([aria-invalid=false])){border-color:CanvasText!important}slot[name=select]::slotted(select[aria-invalid]:not([aria-invalid=false]):focus-visible){border-color:Highlight!important}:host([appearance=underline]) slot[name=select]::slotted(select:focus-visible){border-width:0 0 2px!important}}`;
             shadow.replaceChildren(style, label, control);
             this.syncOptions();
         }

package/dist/elements/shared.d.ts

@@ -1,4 +1,7 @@
-export declare const base = ":host{font:inherit;font-family:var(--spui-font-family,inherit);color:var(--spui-ui-text,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#323130)));color-scheme:var(--spui-color-scheme,light dark)}button,input,textarea{font:inherit;font-family:var(--spui-font-family,inherit)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)));outline-offset:2px}";
+/** Resolve the normal text direction for a BCP 47 language tag; callers can still honor an explicit dir. */
+export declare function getDirectionFromLanguage(language?: string | null): "ltr" | "rtl" | undefined;
+export declare const directionByLanguage: string;
+export declare const base: string;
 export type NativeFormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 export type NativeFormControlDefaults = {
     control: NativeFormControl;

package/dist/elements/shared.js

@@ -1,4 +1,17 @@
-export const base = `:host{font:inherit;font-family:var(--spui-font-family,inherit);color:var(--spui-ui-text,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#323130)));color-scheme:var(--spui-color-scheme,light dark)}button,input,textarea{font:inherit;font-family:var(--spui-font-family,inherit)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)));outline-offset:2px}`;
+const rtlLanguages = new Set(["ar", "arc", "bal", "bcc", "bgn", "bqi", "ckb", "dv", "fa", "glk", "he", "khw", "ks", "lrc", "mzn", "nqo", "ps", "rhg", "sd", "ug", "ur", "yi"]);
+const rtlScripts = new Set(["arab", "armi", "avst", "hebr", "mand", "mani", "mend", "nkoo", "phli", "prti", "rohg", "samr", "syrc", "thaa"]);
+/** Resolve the normal text direction for a BCP 47 language tag; callers can still honor an explicit dir. */
+export function getDirectionFromLanguage(language) {
+    const tags = language?.trim().replaceAll("_", "-").split("-").filter(Boolean);
+    if (!tags?.length)
+        return undefined;
+    const script = tags.slice(1).find(tag => /^[a-z]{4}$/i.test(tag));
+    return script ? rtlScripts.has(script.toLowerCase()) ? "rtl" : "ltr" : rtlLanguages.has(tags[0].toLowerCase()) ? "rtl" : "ltr";
+}
+const rtlLanguageTags = ["ar", "arc", "bal", "bcc", "bgn", "bqi", "ckb", "dv", "fa", "glk", "he", "khw", "ks", "lrc", "mzn", "nqo", "ps", "rhg", "sd", "ug", "ur", "yi", "az-Arab", "ku-Arab", "ms-Arab", "pa-Arab", "uz-Arab", "kk-Arab", "ky-Arab", "tt-Arab"];
+const ltrScriptTags = ["ar-Latn", "fa-Latn", "he-Latn", "ks-Deva", "sd-Deva", "ur-Latn", "ug-Latn", "yi-Latn"];
+export const directionByLanguage = `${rtlLanguageTags.map(tag => `:host(:lang(${tag}):not([dir]))`).join(",")}{direction:rtl}${ltrScriptTags.map(tag => `:host(:lang(${tag}):not([dir]))`).join(",")}{direction:ltr}`;
+export const base = `:host{font:inherit;font-family:var(--spui-font-family,inherit);color:var(--spui-ui-text,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#323130)));color-scheme:var(--spui-color-scheme,light dark)}${directionByLanguage}button,input,textarea{font:inherit;font-family:var(--spui-font-family,inherit)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)));outline-offset:2px}`;
 const accessibleNameSyncStates = new WeakMap();
 function stopHostAccessibleNameObserver(host, control) {
     const hostStates = accessibleNameSyncStates.get(host);

package/dist/elements/sharepoint-field-basic-controls.d.ts

@@ -0,0 +1 @@
+export declare function defineSharePointFieldBasicControls(): void;

package/dist/elements/sharepoint-field-basic-controls.js

@@ -0,0 +1,14 @@
+import { defineButton } from "./button.js";
+import { defineInput } from "./input.js";
+import { defineTextArea } from "./textarea.js";
+import { defineSelect } from "./select.js";
+import { defineRadioGroup } from "./radio-group.js";
+import { defineCheckbox } from "./toggle.js";
+export function defineSharePointFieldBasicControls() {
+    defineButton();
+    defineInput();
+    defineTextArea();
+    defineSelect();
+    defineRadioGroup();
+    defineCheckbox();
+}

package/dist/elements/sharepoint-fields.d.ts

@@ -0,0 +1,29 @@
+import { type SharePointFieldMetadata, type SharePointFieldValue } from "../sharepoint-fields.js";
+export type SharePointFieldOption = {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+};
+export type SharePointFieldValueChangeDetail = {
+    field: SharePointFieldMetadata;
+    value: SharePointFieldValue;
+};
+export type SharePointFieldElement = HTMLElement & {
+    field: SharePointFieldMetadata | undefined;
+    value: SharePointFieldValue | undefined;
+    defaultValue: SharePointFieldValue | undefined;
+    options: readonly SharePointFieldOption[];
+    disabled: boolean;
+    onValueChange?: (value: SharePointFieldValue, field: SharePointFieldMetadata) => void;
+    renderUnsupported?: (field: SharePointFieldMetadata, reason: string) => Node | null;
+};
+declare global {
+    interface HTMLElementTagNameMap {
+        "spui-sharepoint-field": SharePointFieldElement;
+    }
+    interface HTMLElementEventMap {
+        "spui-field-value-change": CustomEvent<SharePointFieldValueChangeDetail>;
+    }
+}
+/** Render SharePoint field metadata as a framework-free, theme-aware form control. */
+export declare function defineSharePointField(): void;

package/dist/elements/sharepoint-fields.js

@@ -0,0 +1,460 @@
+import { getSharePointFieldAdapter, } from "../sharepoint-fields.js";
+import { createFormField } from "./field-composition.js";
+import { defineSharePointFieldBasicControls } from "./sharepoint-field-basic-controls.js";
+const textValue = (value) => {
+    if (value == null)
+        return "";
+    if (value instanceof Date) {
+        const pad = (part) => String(part).padStart(2, "0");
+        return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}${value.getHours() || value.getMinutes() ? `T${pad(value.getHours())}:${pad(value.getMinutes())}` : ""}`;
+    }
+    if (typeof value === "object" && "url" in value)
+        return value.url;
+    return String(value);
+};
+function makeOption(tag, option) {
+    const element = document.createElement(tag);
+    element.setAttribute("value", String(option.value));
+    element.setAttribute(tag === "option" ? "value" : "label", tag === "option" ? String(option.value) : option.label);
+    if (tag === "option")
+        element.textContent = option.label;
+    else
+        element.textContent = option.label;
+    if (option.disabled)
+        element.setAttribute("disabled", "");
+    return element;
+}
+async function loadFieldControl(adapter) {
+    switch (adapter.control) {
+        case "input":
+        case "read-only":
+        case "textarea":
+        case "radio-group":
+        case "checkbox":
+        case "multi-choice":
+        case "select":
+            if (adapter.control === "select" && adapter.allowFillIn && !customElements.get("spui-combobox")) {
+                await import(/* webpackChunkName: "spui-sharepoint-field-freeform-choice" */ "./combobox.js").then(module => module.defineCombobox());
+            }
+            return;
+        case "rich-text-editor":
+            if (!customElements.get("spui-rich-text-editor"))
+                (await import(/* webpackChunkName: "spui-sharepoint-field-rich-text" */ "./rich-text-editor.js")).defineRichTextEditor();
+            break;
+        case "date-picker":
+            if (!customElements.get("spui-date-picker"))
+                (await import(/* webpackChunkName: "spui-sharepoint-field-date" */ "./date-picker.js")).defineDatePicker();
+            break;
+        case "combobox":
+            if (!customElements.get("spui-combobox"))
+                (await import(/* webpackChunkName: "spui-sharepoint-field-lookup" */ "./combobox.js")).defineCombobox();
+            break;
+    }
+}
+/** Render SharePoint field metadata as a framework-free, theme-aware form control. */
+export function defineSharePointField() {
+    if (customElements.get("spui-sharepoint-field"))
+        return;
+    defineSharePointFieldBasicControls();
+    class SpuiSharePointField extends HTMLElement {
+        static observedAttributes = ["field", "value", "disabled", "hint", "validation-message", "empty-option-label", "add-choice-label"];
+        fieldValue;
+        currentValue;
+        initialValue;
+        currentOptions = [];
+        hasProvidedOptions = false;
+        controlled = false;
+        renderVersion = 0;
+        valueChangeCallback;
+        unsupportedRenderer;
+        get field() { return this.fieldValue; }
+        set field(value) { this.fieldValue = value; if (this.isConnected)
+            this.render(); }
+        get value() { return this.currentValue; }
+        set value(value) {
+            this.controlled = true;
+            this.currentValue = value;
+            this.syncControlValue();
+        }
+        get defaultValue() { return this.initialValue; }
+        set defaultValue(value) {
+            this.initialValue = value;
+            if (!this.controlled)
+                this.currentValue = value;
+            if (this.isConnected)
+                this.render();
+        }
+        get options() { return this.currentOptions; }
+        set options(value) { this.currentOptions = [...(value ?? [])]; this.hasProvidedOptions = true; if (this.isConnected)
+            this.render(); }
+        get disabled() { return this.hasAttribute("disabled"); }
+        set disabled(value) { this.toggleAttribute("disabled", Boolean(value)); }
+        get onValueChange() { return this.valueChangeCallback; }
+        set onValueChange(value) { this.valueChangeCallback = value; }
+        get renderUnsupported() { return this.unsupportedRenderer; }
+        set renderUnsupported(value) { this.unsupportedRenderer = value; }
+        attributeChangedCallback(name, _oldValue, value) {
+            if (!this.isConnected)
+                return;
+            if (name === "field") {
+                try {
+                    this.fieldValue = value ? JSON.parse(value) : undefined;
+                }
+                catch {
+                    this.fieldValue = undefined;
+                }
+                this.render();
+            }
+            else if (name === "value") {
+                if (!this.controlled) {
+                    this.currentValue = value;
+                    this.initialValue = value;
+                }
+                this.syncControlValue();
+            }
+            else
+                this.render();
+        }
+        connectedCallback() {
+            if (!this.fieldValue) {
+                const encoded = this.getAttribute("field");
+                if (encoded) {
+                    try {
+                        this.fieldValue = JSON.parse(encoded);
+                    }
+                    catch { /* Keep a useful fallback below. */ }
+                }
+            }
+            if (this.currentValue === undefined && this.hasAttribute("value"))
+                this.currentValue = this.getAttribute("value");
+            if (this.initialValue === undefined && this.hasAttribute("value"))
+                this.initialValue = this.getAttribute("value");
+            this.render();
+        }
+        async render() {
+            const renderVersion = ++this.renderVersion;
+            const field = this.fieldValue;
+            if (!field) {
+                this.hidden = false;
+                this.removeAttribute("aria-busy");
+                this.replaceChildren();
+                return;
+            }
+            const adapter = getSharePointFieldAdapter(field);
+            this.setAttribute("aria-busy", "true");
+            try {
+                await loadFieldControl(adapter);
+                if (!this.isConnected || renderVersion !== this.renderVersion)
+                    return;
+                this.removeAttribute("aria-busy");
+                const options = this.hasProvidedOptions ? this.currentOptions : (adapter.choices ?? []).map(value => ({ value, label: value }));
+                const label = adapter.label || adapter.name || adapter.fieldType;
+                const value = this.currentValue;
+                const valueText = textValue(value);
+                const defaultValueText = textValue(this.initialValue);
+                const name = adapter.name || undefined;
+                const disabled = this.hasAttribute("disabled");
+                const controlDisabled = disabled || (adapter.readOnly && !["input", "textarea", "rich-text-editor"].includes(adapter.control));
+                let control;
+                const setBasics = (element) => {
+                    if (name)
+                        element.setAttribute("name", name);
+                    if (adapter.required)
+                        element.setAttribute("required", "");
+                    if (controlDisabled)
+                        element.setAttribute("disabled", "");
+                    return element;
+                };
+                const selectOptions = (element, tag) => {
+                    if (tag === "option") {
+                        const empty = document.createElement("option");
+                        empty.value = "";
+                        empty.textContent = this.getAttribute("empty-option-label") ?? "Select an option";
+                        empty.disabled = adapter.required;
+                        element.append(empty, ...options.map(option => makeOption(tag, option)));
+                    }
+                    else
+                        element.append(...options.map(option => makeOption(tag, option)));
+                };
+                switch (adapter.control) {
+                    case "input": {
+                        const input = setBasics(document.createElement("spui-input"));
+                        input.setAttribute("type", adapter.inputType ?? "text");
+                        if (this.initialValue !== undefined)
+                            input.setAttribute("value", defaultValueText);
+                        if (adapter.min !== undefined)
+                            input.setAttribute("min", String(adapter.min));
+                        if (adapter.max !== undefined)
+                            input.setAttribute("max", String(adapter.max));
+                        if (adapter.step !== undefined)
+                            input.setAttribute("step", String(adapter.step));
+                        if (adapter.maxLength !== undefined)
+                            input.setAttribute("maxlength", String(adapter.maxLength));
+                        if (adapter.readOnly)
+                            input.setAttribute("read-only", "");
+                        input.value = valueText;
+                        control = input;
+                        break;
+                    }
+                    case "textarea": {
+                        const textarea = setBasics(document.createElement("spui-textarea"));
+                        if (this.initialValue !== undefined)
+                            textarea.setAttribute("value", defaultValueText);
+                        if (adapter.maxLength !== undefined)
+                            textarea.setAttribute("maxlength", String(adapter.maxLength));
+                        if (adapter.readOnly)
+                            textarea.setAttribute("read-only", "");
+                        textarea.value = valueText;
+                        control = textarea;
+                        break;
+                    }
+                    case "rich-text-editor": {
+                        const editor = setBasics(document.createElement("spui-rich-text-editor"));
+                        if (this.initialValue !== undefined)
+                            editor.setAttribute("value", defaultValueText);
+                        editor.setAttribute("content-mode", adapter.richText?.contentMode ?? "rich");
+                        if (adapter.richText?.allowHyperlink === false)
+                            editor.setAttribute("allow-hyperlink", "false");
+                        if (adapter.readOnly)
+                            editor.setAttribute("read-only", "");
+                        editor.value = valueText;
+                        control = editor;
+                        break;
+                    }
+                    case "select": {
+                        if (adapter.allowFillIn) {
+                            const combo = setBasics(document.createElement("spui-combobox"));
+                            combo.setAttribute("allow-freeform", "");
+                            combo.setAttribute("placeholder", this.getAttribute("empty-option-label") ?? "Select an option");
+                            selectOptions(combo, "spui-combobox-option");
+                            combo.value = valueText;
+                            control = combo;
+                        }
+                        else {
+                            const select = setBasics(document.createElement("spui-select"));
+                            selectOptions(select, "option");
+                            if (this.initialValue !== undefined)
+                                select.setAttribute("default-value", defaultValueText);
+                            select.value = valueText;
+                            control = select;
+                        }
+                        break;
+                    }
+                    case "radio-group": {
+                        const radio = setBasics(document.createElement("spui-radio-group"));
+                        selectOptions(radio, "spui-radio-option");
+                        if (this.initialValue !== undefined)
+                            radio.setAttribute("default-value", defaultValueText);
+                        radio.value = valueText;
+                        control = radio;
+                        break;
+                    }
+                    case "checkbox": {
+                        const checkbox = setBasics(document.createElement("spui-checkbox"));
+                        checkbox.setAttribute("label", label);
+                        if (this.initialValue !== undefined)
+                            checkbox.defaultChecked = this.initialValue === true || this.initialValue === "true";
+                        checkbox.checked = value === true || value === "true";
+                        control = checkbox;
+                        break;
+                    }
+                    case "multi-choice": {
+                        const group = document.createElement("fieldset");
+                        group.style.minWidth = "0";
+                        group.style.margin = "0";
+                        group.style.padding = "0";
+                        group.style.border = "0";
+                        group.style.display = "grid";
+                        group.style.gap = "var(--spui-control-gap,6px)";
+                        const legend = document.createElement("legend");
+                        legend.textContent = label;
+                        group.append(legend);
+                        const selected = Array.isArray(value) ? value.map(String) : [];
+                        const visibleOptions = [...options];
+                        const initialSelected = Array.isArray(this.initialValue) ? this.initialValue.map(String) : [];
+                        for (const selectedValue of [...selected, ...initialSelected])
+                            if (!visibleOptions.some(option => String(option.value) === selectedValue))
+                                visibleOptions.push({ value: selectedValue, label: selectedValue });
+                        for (const option of visibleOptions) {
+                            const checkbox = document.createElement("spui-checkbox");
+                            checkbox.setAttribute("label", option.label);
+                            checkbox.setAttribute("value", String(option.value));
+                            if (option.disabled || controlDisabled)
+                                checkbox.setAttribute("disabled", "");
+                            if (Array.isArray(this.initialValue) && this.initialValue.map(String).includes(String(option.value)))
+                                checkbox.setAttribute("default-checked", "");
+                            checkbox.checked = selected.includes(String(option.value));
+                            group.append(checkbox);
+                        }
+                        if (adapter.allowFillIn) {
+                            const fillIn = document.createElement("spui-input");
+                            fillIn.setAttribute("type", "text");
+                            fillIn.setAttribute("aria-label", this.getAttribute("add-choice-label") ?? "Add another choice");
+                            const add = document.createElement("spui-button");
+                            add.setAttribute("appearance", "secondary");
+                            add.textContent = this.getAttribute("add-choice-label") ?? "Add another choice";
+                            if (controlDisabled)
+                                add.setAttribute("disabled", "");
+                            const addFillIn = () => {
+                                const choice = fillIn.value?.trim() ?? "";
+                                if (!choice || selected.includes(choice))
+                                    return;
+                                this.acceptValue([...selected, choice]);
+                                fillIn.value = "";
+                            };
+                            fillIn.addEventListener("keydown", event => { if (event instanceof KeyboardEvent && event.key === "Enter") {
+                                event.preventDefault();
+                                addFillIn();
+                            } });
+                            add.addEventListener("click", addFillIn);
+                            const fillInRow = document.createElement("div");
+                            fillInRow.append(fillIn, add);
+                            group.append(fillInRow);
+                            fillInRow.style.display = "flex";
+                            fillInRow.style.alignItems = "end";
+                            fillInRow.style.gap = "var(--spui-control-gap,8px)";
+                        }
+                        control = group;
+                        break;
+                    }
+                    case "date-picker": {
+                        const datePicker = setBasics(document.createElement("spui-date-picker"));
+                        if (this.initialValue !== undefined)
+                            datePicker.setAttribute("value", textValue(this.initialValue));
+                        datePicker.value = valueText;
+                        control = datePicker;
+                        break;
+                    }
+                    case "combobox": {
+                        const combo = setBasics(document.createElement("spui-combobox"));
+                        if (adapter.multiple)
+                            combo.setAttribute("multiselect", "");
+                        combo.setAttribute("placeholder", this.getAttribute("empty-option-label") ?? "Select an option");
+                        selectOptions(combo, "spui-combobox-option");
+                        if (adapter.multiple) {
+                            if (Array.isArray(this.initialValue))
+                                combo.setAttribute("default-selected-options", JSON.stringify(this.initialValue.map(String)));
+                            combo.selectedOptions = Array.isArray(value) ? value.map(String) : [];
+                        }
+                        else {
+                            if (this.initialValue !== undefined) {
+                                combo.setAttribute("selected-value", defaultValueText);
+                                combo.setAttribute("value", options.find(option => String(option.value) === defaultValueText)?.label ?? defaultValueText);
+                            }
+                            combo.selectedValue = valueText;
+                            combo.value = options.find(option => String(option.value) === valueText)?.label ?? valueText;
+                        }
+                        control = combo;
+                        break;
+                    }
+                    case "read-only": {
+                        const readonly = setBasics(document.createElement("spui-input"));
+                        readonly.setAttribute("type", "text");
+                        readonly.setAttribute("read-only", "");
+                        readonly.value = valueText;
+                        control = readonly;
+                        break;
+                    }
+                    case "unsupported": {
+                        const custom = this.renderUnsupported?.(field, adapter.unsupportedReason ?? "No renderer is registered for this SharePoint field type.");
+                        const fallback = custom ?? Object.assign(document.createElement("div"), { textContent: `This SharePoint field type needs a custom renderer (${adapter.fieldType}).` });
+                        if (!custom && fallback instanceof HTMLElement)
+                            fallback.setAttribute("role", "note");
+                        control = fallback;
+                        break;
+                    }
+                }
+                const wrapper = createFormField(control, {
+                    id: this.id ? `${this.id}-field` : undefined,
+                    className: this.getAttribute("class") ?? undefined,
+                    label: adapter.control === "multi-choice" ? undefined : label,
+                    hint: this.getAttribute("hint") ?? adapter.description,
+                    validationMessage: this.getAttribute("validation-message") ?? undefined,
+                    required: adapter.required,
+                    disabled,
+                });
+                wrapper.dataset.sharePointField = adapter.name || adapter.fieldType;
+                this.hidden = adapter.hidden;
+                this.replaceChildren(wrapper);
+            }
+            catch {
+                if (!this.isConnected || renderVersion !== this.renderVersion)
+                    return;
+                this.removeAttribute("aria-busy");
+                const error = document.createElement("div");
+                error.setAttribute("role", "alert");
+                error.textContent = "The field control could not be loaded.";
+                this.replaceChildren(error);
+            }
+        }
+        syncControlValue() {
+            const wrapper = this.querySelector(".spui-form-field");
+            const first = wrapper?.firstElementChild;
+            const control = (first?.localName === "fieldset" ? first : first?.nextElementSibling);
+            if (!control)
+                return;
+            if (control.localName === "fieldset") {
+                const selected = new Set(Array.isArray(this.currentValue) ? this.currentValue.map(String) : []);
+                control.querySelectorAll("spui-checkbox").forEach(checkbox => { checkbox.checked = selected.has(checkbox.getAttribute("value") ?? ""); });
+            }
+            else if (control.localName === "spui-checkbox")
+                control.checked = this.currentValue === true || this.currentValue === "true";
+            else if (control.localName === "spui-combobox" && control.hasAttribute("multiselect"))
+                control.selectedOptions = Array.isArray(this.currentValue) ? this.currentValue.map(String) : [];
+            else if ("value" in control)
+                control.value = textValue(this.currentValue);
+        }
+        acceptValue(value) {
+            this.currentValue = value;
+            const field = this.fieldValue;
+            if (!field)
+                return;
+            this.onValueChange?.(value, field);
+            this.dispatchEvent(new CustomEvent("spui-field-value-change", { detail: { value, field }, bubbles: true, composed: true }));
+        }
+        constructor() {
+            super();
+            for (const key of ["field", "value", "defaultValue", "options", "disabled", "onValueChange", "renderUnsupported"]) {
+                if (!Object.prototype.hasOwnProperty.call(this, key))
+                    continue;
+                const pending = this[key];
+                delete this[key];
+                this[key] = pending;
+            }
+            this.addEventListener("spui-input", event => {
+                const target = event.target;
+                if ((target?.localName === "spui-combobox" && !target.hasAttribute("allow-freeform")) || (target?.localName === "spui-input" && target.closest("fieldset")))
+                    return;
+                const value = event.detail?.value;
+                if (value !== undefined)
+                    this.acceptValue(value);
+            });
+            this.addEventListener("spui-change", event => {
+                const detail = event.detail;
+                if (!detail)
+                    return;
+                if (detail.checked !== undefined) {
+                    if (this.fieldValue && getSharePointFieldAdapter(this.fieldValue).control === "multi-choice") {
+                        const checkbox = event.target;
+                        const choice = checkbox.getAttribute("value") ?? "";
+                        const selected = new Set(Array.isArray(this.currentValue) ? this.currentValue.map(String) : []);
+                        if (detail.checked === true)
+                            selected.add(choice);
+                        else
+                            selected.delete(choice);
+                        this.acceptValue([...selected]);
+                    }
+                    else
+                        this.acceptValue(detail.checked === true);
+                }
+                else if (detail.selectedOptions)
+                    this.acceptValue(detail.selectedOptions);
+                else if (detail.selectedValue !== undefined)
+                    this.acceptValue(detail.selectedValue || null);
+                else if (detail.value !== undefined)
+                    this.acceptValue(detail.value || null);
+            });
+        }
+    }
+    customElements.define("spui-sharepoint-field", SpuiSharePointField);
+}

package/dist/elements/spin-button.js

@@ -488,9 +488,9 @@ export function defineSpinButton() {
             buttons.append(incrementSlot, decrementSlot);
             control.append(inputSlot, buttons);
             const style = document.createElement("style");
-            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px);width:100%}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}[part~=control-group]{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:1fr 1fr;min-height:var(--spui-control-height,32px);column-gap:4px;position:relative;isolation:isolate;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit))}[part~=control-group]:focus-within{outline:2px solid var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e));outline-offset:2px}:host([size=small]) [part~=control-group]{min-height:24px}:host([appearance=underline]) [part~=control-group]{border-width:0 0 1px;border-radius:0}:host([appearance=filled-darker]) [part~=control-group]{background:var(--colorNeutralBackground3,var(--spui-ui-surface-sunken,#f0f0f0));border-color:transparent}:host([appearance=filled-lighter]) [part~=control-group]{background:var(--colorNeutralBackground2,var(--spui-ui-surface-hover,#f5f5f5));border-color:transparent}input{grid-column:1;grid-row:1/3;min-width:0;width:100%;padding-inline:var(--spui-control-padding-inline,10px);border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;outline:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}span[part=buttons]{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:1fr 1fr;min-height:0}button{display:grid;place-items:center;min-width:24px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}button:hover:not(:disabled){background:var(--spui-ui-surface-hover,#f5f5f5)}button:disabled{opacity:.42;cursor:not-allowed}button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}input:disabled{opacity:.55}input:read-only{cursor:default}@media(forced-colors:active){[part~=control-group]{border-color:FieldText}button:focus-visible,input:focus-visible{outline:1px solid Highlight}}`;
+            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px);width:100%}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}[part~=control-group]{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:1fr 1fr;min-height:var(--spui-control-height,32px);column-gap:4px;position:relative;isolation:isolate;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit))}[part~=control-group]:focus-within{border-width:2px;border-color:var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline:0;box-shadow:none}[part~=control-group]:has(input[aria-invalid]:not([aria-invalid=false])){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))}:host([size=small]) [part~=control-group]{min-height:24px}:host([appearance=underline]) [part~=control-group]{border-width:0 0 1px;border-radius:0}:host([appearance=underline]) [part~=control-group]:focus-within{border-width:0 0 2px}:host([appearance=filled-darker]) [part~=control-group]{background:var(--colorNeutralBackground3,var(--spui-ui-surface-sunken,#f0f0f0));border-color:transparent}:host([appearance=filled-lighter]) [part~=control-group]{background:var(--colorNeutralBackground2,var(--spui-ui-surface-hover,#f5f5f5));border-color:transparent}input{grid-column:1;grid-row:1/3;min-width:0;width:100%;padding-inline:var(--spui-control-padding-inline,10px);border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;outline:none}input:focus-visible{outline:0}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}span[part=buttons]{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:1fr 1fr;min-height:0}button{display:grid;place-items:center;min-width:24px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}button:hover:not(:disabled){background:var(--spui-ui-surface-hover,#f5f5f5)}button:disabled{opacity:.42;cursor:not-allowed}button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}input:disabled{opacity:.55}input:read-only{cursor:default}@media(forced-colors:active){[part~=control-group]{border-color:FieldText}[part~=control-group]:focus-within{border-width:2px;border-color:Highlight;outline:0;box-shadow:none}[part~=control-group]:has(input[aria-invalid]:not([aria-invalid=false])){border-color:CanvasText}[part~=control-group]:has(input[aria-invalid]:not([aria-invalid=false])):focus-within{border-color:Highlight}:host([appearance=underline]) [part~=control-group]:focus-within{border-width:0 0 2px}button:focus-visible{outline:1px solid Highlight}input:focus-visible{outline:0}}`;
             style.textContent += "[part~=control-group]{grid-template-rows:24px 24px;min-height:50px}:host([size=small]) [part~=control-group]{min-height:50px}span[part=buttons]{grid-template-rows:24px 24px;min-height:48px}button{min-height:24px}";
-            style.textContent += "slot[name=input]{display:contents}slot[name=input]::slotted(input){grid-column:1;grid-row:1/3;min-width:0;width:100%;padding-inline:var(--spui-control-padding-inline,10px);border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;outline:none}slot[name=incrementButton],slot[name=decrementButton]{display:contents}slot[name=incrementButton]::slotted(button),slot[name=decrementButton]::slotted(button){display:grid;place-items:center;min-width:24px;min-height:24px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}slot[name=incrementButton]::slotted(button:disabled),slot[name=decrementButton]::slotted(button:disabled){opacity:.42;cursor:not-allowed}";
+            style.textContent += "slot[name=input]{display:contents}slot[name=input]::slotted(input){grid-column:1;grid-row:1/3;min-width:0;width:100%;padding-inline:var(--spui-control-padding-inline,10px);border:0!important;border-radius:inherit;background:transparent;color:inherit;font:inherit;outline:0!important;box-shadow:none!important}slot[name=input]::slotted(input:focus-visible){border:0!important;outline:0!important;outline-offset:0;box-shadow:none!important}slot[name=incrementButton],slot[name=decrementButton]{display:contents}slot[name=incrementButton]::slotted(button),slot[name=decrementButton]::slotted(button){display:grid;place-items:center;min-width:24px;min-height:24px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}slot[name=incrementButton]::slotted(button:disabled),slot[name=decrementButton]::slotted(button:disabled){opacity:.42;cursor:not-allowed}";
             shadow.replaceChildren(style, label, control);
             this.syncSlots();
         }