@unofficialbox/box-open-elements 0.23.0 → 0.25.0

package/README.md

@@ -12,7 +12,7 @@
 
 Browse the full catalog on the **[live docs site](https://unofficialbox.github.io/box-open-elements)** — live previews, an events/properties inspector, per-framework code snippets (React / Angular / Vue / Svelte / HTML), and the foundations pages.
 
-The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/taxonomy.md) for the canonical model):
+The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/taxonomy.md) for the canonical model):
 
 - **Foundations** — design decisions as data: tokens, color, typography, iconography, accessibility, theming
 - **Components** — accessible Web Components for single controls, organized by category
@@ -21,6 +21,8 @@ The library is organized around three layers (see [taxonomy](https://github.com/
 Core implementation principles:
 
 - plain TypeScript modules, no React requirement in the core package — zero runtime dependencies
+- Optional `code-editor` entrypoint uses CodeMirror 6; its dependencies are not
+  loaded by the root catalog or other component imports.
 - state and business logic separate from rendering: controllers and stores, not framework components
 - standard DOM events where a UI layer needs them
 - accessibility semantics and keyboard support as part of the component contract
@@ -75,7 +77,7 @@ selection.toggleSelection("1");
 - optimized component entrypoints: `@unofficialbox/box-open-elements/<name>`
 - patterns: `@unofficialbox/box-open-elements/patterns/<area>` and `@unofficialbox/box-open-elements/patterns/<area>/<module>`
 
-See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/api-guidelines.md).
+See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/api-guidelines.md).
 
 ## Developing
 
@@ -89,17 +91,17 @@ bun run docs     # build + serve the docs site at http://localhost:4600
 
 ## Documentation
 
-The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/README.md). The most important entries:
-
-- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/taxonomy.md)
-- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/architecture.md)
-- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/api-guidelines.md)
-- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/catalog.md)
-- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/integration/frameworks.md)
-- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/foundations/tokens.md)
-- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/content-explorer.md)
-- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/integration/box-server.md)
-- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/foundations/motion.md)
+The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/README.md). The most important entries:
+
+- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/taxonomy.md)
+- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/architecture.md)
+- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/api-guidelines.md)
+- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/catalog.md)
+- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/integration/frameworks.md)
+- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/foundations/tokens.md)
+- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/content-explorer.md)
+- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/integration/box-server.md)
+- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/foundations/motion.md)
 
 ## Contributing
 

package/dist/components/actions/button.d.ts

@@ -5,6 +5,7 @@ export declare class Button extends BaseElement {
     static formAssociated: boolean;
     static get observedAttributes(): string[];
     private buttonEl;
+    focus(options?: FocusOptions): void;
     private spinnerEl;
     private iconEl;
     private labelEl;

package/dist/components/actions/button.js

@@ -64,7 +64,7 @@ const buttonStyles = `
     outline: none;
     background: var(--boe-token-surface-surface-brand-hover, #006ae9);
     border-color: var(--boe-token-surface-surface-brand, #0061d5);
-    box-shadow: ${boeControl.primaryFocusShadow};
+    box-shadow: 0 0 0 2px var(--boe-token-surface-surface, #ffffff), 0 0 0 5px var(--boe-token-surface-surface-brand, #0061d5);
   }
 
   button[data-tone="neutral"] {
@@ -74,6 +74,17 @@ const buttonStyles = `
     box-shadow: none;
   }
 
+  button[data-tone="text"], button[data-tone="text"]:hover:not(:disabled),
+  button[data-tone="text"]:active:not(:disabled), button[data-tone="text"]:focus-visible {
+    background: transparent;
+    border-color: transparent;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    padding-inline: 0;
+    white-space: normal;
+    text-align: start;
+  }
+  button[data-tone="text"]:hover:not(:disabled) { text-decoration: underline; }
+
   button[data-tone="neutral"]:hover:not(:disabled) {
     background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 97%, black 3%);
     border-color: ${boeControl.buttonBorder};
@@ -86,7 +97,7 @@ const buttonStyles = `
 
   button[data-tone="neutral"]:focus-visible {
     border-color: var(--boe-token-text-text, #222222);
-    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 2px var(--boe-token-surface-surface, #ffffff), 0 0 0 5px var(--boe-token-surface-surface-brand, #0061d5);
   }
 
   button[data-tone="danger"] {
@@ -106,7 +117,7 @@ const buttonStyles = `
   }
 
   button[data-tone="danger"]:focus-visible {
-    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 80%), 0 1px 2px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 2px var(--boe-token-surface-surface, #ffffff), 0 0 0 5px var(--boe-token-surface-surface-brand, #0061d5);
   }
 
   button[data-size="small"] {
@@ -176,6 +187,8 @@ export class Button extends BaseElement {
         return ["disabled", "label", "size", "tone", "is-loading", "type"];
     }
     buttonEl;
+    focus(options) { if (!this.disabled)
+        this.buttonEl?.focus(options); }
     spinnerEl;
     iconEl;
     labelEl;

package/dist/components/actions/segmented-control.d.ts

@@ -9,6 +9,7 @@ export declare class SegmentedControl extends BaseElement {
     static get observedAttributes(): string[];
     private valueInternal;
     private controlEl;
+    private renderedOptions;
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;

package/dist/components/actions/segmented-control.js

@@ -84,6 +84,7 @@ export class SegmentedControl extends BaseElement {
     }
     valueInternal = "";
     controlEl;
+    renderedOptions = "";
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -121,17 +122,17 @@ export class SegmentedControl extends BaseElement {
         }
     }
     set options(value) {
-        this.setAttribute("options", JSON.stringify(value));
+        const serialized = JSON.stringify(value);
+        if (serialized !== this.getAttribute("options"))
+            this.setAttribute("options", serialized);
     }
     get value() {
         return this.valueInternal;
     }
     set value(nextValue) {
-        this.valueInternal = nextValue;
+        if (nextValue === this.valueInternal)
+            return;
         this.setAttribute("value", nextValue);
-        if (this.isRendered) {
-            this.update();
-        }
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === "value") {
@@ -198,7 +199,20 @@ export class SegmentedControl extends BaseElement {
         this.controlEl.dataset.layout = this.layout;
         this.controlEl.setAttribute("aria-label", this.label);
         this.controlEl.setAttribute("aria-disabled", String(this.disabled));
-        // Rebuild segments (count may change)
+        const serialized = JSON.stringify(options);
+        if (serialized === this.renderedOptions) {
+            this.controlEl.querySelectorAll('[part="segment"]').forEach((button, index) => {
+                const selected = options[index].value === selectedValue;
+                button.dataset.layout = this.layout;
+                button.dataset.selected = String(selected);
+                button.setAttribute("aria-checked", String(selected));
+                button.tabIndex = selected ? 0 : -1;
+                button.disabled = this.disabled || Boolean(options[index].disabled);
+            });
+            return;
+        }
+        this.renderedOptions = serialized;
+        // Rebuild only when the options themselves change.
         this.controlEl.innerHTML = options
             .map((option, index) => {
             const position = options.length === 1

package/dist/components/feedback/alert.js

@@ -131,7 +131,7 @@ const alertStyles = `
     border: 0;
     border-radius: ${boeRadius.med};
     background: transparent;
-    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    color: var(--boe-token-text-text, #222222);
     font: inherit;
     font-size: 13px;
     font-weight: 700;

package/dist/components/feedback/progress-bar.js

@@ -30,8 +30,8 @@ const progressBarStyles = `
   [part="label"] {
     font-size: 0.8rem;
     font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+    letter-spacing: normal;
+    text-transform: none;
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 

package/dist/components/forms/checkbox.d.ts

@@ -7,6 +7,7 @@ export declare class Checkbox extends FormAssociatedElement {
     private indeterminateInternal;
     private valueInternal;
     private inputEl;
+    focus(options?: FocusOptions): void;
     private labelEl;
     private descriptionEl;
     private fieldEl;

package/dist/components/forms/checkbox.js

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
@@ -86,12 +86,13 @@ const checkboxStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class Checkbox extends FormAssociatedElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "checked",
             "description",
             "disabled",
@@ -104,6 +105,8 @@ export class Checkbox extends FormAssociatedElement {
     indeterminateInternal = false;
     valueInternal = DEFAULT_VALUE;
     inputEl;
+    focus(options) { if (!this.disabled)
+        this.inputEl?.focus(options); }
     labelEl;
     descriptionEl;
     fieldEl;
@@ -288,6 +291,7 @@ export class Checkbox extends FormAssociatedElement {
         }
         this.inputEl.setAttribute("aria-label", this.label);
         this.labelEl.textContent = this.label;
+        this.applyFieldSupport(this.labelEl, this.inputEl, null);
         const description = this.description;
         if (description) {
             this.descriptionEl.hidden = false;

package/dist/components/forms/code-editor.d.ts

@@ -0,0 +1,86 @@
+import { BaseElement } from "../../core/index.js";
+import { type Completion, type CompletionSource } from "@codemirror/autocomplete";
+export interface CodeProblem {
+    /** One-based line and column positions. */
+    line?: number;
+    /** UTF-16 offsets; when supplied, these take precedence over line/column. */
+    from?: number;
+    to?: number;
+    col?: number;
+    endCol?: number;
+    message: string;
+    tone: "error" | "warning" | "info";
+}
+export type CodeCompletion = Completion;
+export type CodeCompletionSource = CompletionSource;
+export interface CodeHighlight {
+    from: number;
+    to: number;
+}
+export interface CodeSelection {
+    anchor: number;
+    head: number;
+}
+/** Optional CodeMirror entrypoint. Import `code-editor`, not the root catalog. */
+export declare class CodeEditor extends BaseElement {
+    static readonly tagName = "box-code-editor";
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private problemsInternal;
+    private completionsInternal;
+    private view?;
+    private languageConfig;
+    private readonlyConfig;
+    private completionsConfig;
+    private wrapConfig;
+    private highlightsConfig;
+    private highlightsInternal;
+    private source?;
+    private timer?;
+    private pending;
+    private syncing;
+    private problemIndex;
+    private savedSelection;
+    private escapeUntil;
+    get value(): string;
+    set value(value: string);
+    /** Host replacements are silent and excluded from the typing undo stack. */
+    setValue(value: string, options?: {
+        addToHistory?: boolean;
+    }): void;
+    get wrap(): boolean;
+    set wrap(value: boolean);
+    get completionSource(): CodeCompletionSource | undefined;
+    set completionSource(value: CodeCompletionSource | undefined);
+    get highlights(): readonly CodeHighlight[];
+    set highlights(value: readonly CodeHighlight[]);
+    private highlightExtension;
+    get language(): string;
+    set language(value: string);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get problems(): readonly CodeProblem[];
+    set problems(value: readonly CodeProblem[]);
+    get completions(): readonly CodeCompletion[];
+    set completions(value: readonly CodeCompletion[]);
+    get selection(): CodeSelection;
+    set selection(value: CodeSelection);
+    revealLine(line: number, options?: {
+        center?: boolean;
+    }): void;
+    focus(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private languageExtension;
+    private completionExtension;
+    protected update(): void;
+    private flushChange;
+    private diagnostics;
+    private syncProblems;
+    navigateProblem(direction: number): void;
+}