@unofficialbox/box-open-elements 0.23.0 → 0.25.0

package/dist/components/navigation/accordion.js

@@ -66,6 +66,10 @@ const accordionStyles = `
   [part="heading"] {
     font-weight: 600;
   }
+  [part="summary"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-weight: 400;
+  }
 
   [part="indicator"] {
     inline-size: 1.35rem;
@@ -103,7 +107,7 @@ const accordionStyles = `
 export class Accordion extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["items", "label", "value", "borderless"];
+        return ["items", "label", "value", "values", "multiple", "borderless"];
     }
     /** Flat variant with no outer card border/background. */
     get borderless() {
@@ -113,6 +117,12 @@ export class Accordion extends BaseElement {
         this.toggleAttribute("borderless", Boolean(value));
     }
     valueInternal = "";
+    valuesInternal = [];
+    get multiple() { return this.hasAttribute("multiple"); }
+    set multiple(value) { this.toggleAttribute("multiple", value); }
+    get values() { return [...this.valuesInternal]; }
+    set values(value) { this.setAttribute("values", JSON.stringify([...new Set(value)])); }
+    isOpen(value) { return this.multiple ? this.valuesInternal.includes(value) : value === this.valueInternal; }
     lastItemsJson = "";
     accordionEl;
     get label() {
@@ -151,12 +161,21 @@ export class Accordion extends BaseElement {
         if (name === "value") {
             this.valueInternal = this.getAttribute("value") ?? "";
         }
+        if (name === "values") {
+            try {
+                const values = JSON.parse(newValue ?? "[]");
+                this.valuesInternal = Array.isArray(values) ? [...new Set(values.filter((v) => typeof v === "string"))] : [];
+            }
+            catch {
+                this.valuesInternal = [];
+            }
+        }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
-    renderItemsMarkup(items, selectedValue) {
+    renderItemsMarkup(items) {
         return items
             .map(item => {
-            const isOpen = item.value === selectedValue;
+            const isOpen = this.isOpen(item.value);
             const panelId = `panel-${escapeHtml(item.value)}`;
             const triggerId = `trigger-${escapeHtml(item.value)}`;
             return `
@@ -170,7 +189,7 @@ export class Accordion extends BaseElement {
                 aria-expanded="${String(isOpen)}"
                 aria-controls="${panelId}"
               >
-                ${escapeHtml(item.label)}
+                <span part="label">${escapeHtml(item.label)}${item.summary ? ` <span part="summary">${escapeHtml(item.summary)}</span>` : ""}</span>
                 <span part="indicator" aria-hidden="true">${isOpen ? "−" : "+"}</span>
               </button>
             </h3>
@@ -206,6 +225,11 @@ export class Accordion extends BaseElement {
             if (!nextValue) {
                 return;
             }
+            if (this.multiple) {
+                this.values = this.isOpen(nextValue) ? this.valuesInternal.filter(value => value !== nextValue) : [...this.valuesInternal, nextValue];
+                this.dispatchEvent(new CustomEvent("values-changed", { detail: { values: this.values }, bubbles: true, composed: true }));
+                return;
+            }
             if (nextValue === this.valueInternal) {
                 this.valueInternal = "";
                 this.setAttribute("value", "");
@@ -233,22 +257,21 @@ export class Accordion extends BaseElement {
         }
         const items = this.items;
         const itemsJson = this.getAttribute("items") ?? "";
-        if (!this.hasAttribute("value") && items.length > 0 && this.valueInternal === "") {
+        if (!this.multiple && !this.hasAttribute("value") && items.length > 0 && this.valueInternal === "") {
             this.valueInternal = items[0].value;
             this.setAttribute("value", this.valueInternal);
         }
-        const selectedValue = this.valueInternal;
         this.accordionEl.setAttribute("role", "region");
         this.accordionEl.setAttribute("aria-label", this.label);
         if (itemsJson !== this.lastItemsJson) {
-            this.accordionEl.innerHTML = this.renderItemsMarkup(items, selectedValue);
+            this.accordionEl.innerHTML = this.renderItemsMarkup(items);
             this.lastItemsJson = itemsJson;
             return;
         }
         this.accordionEl.querySelectorAll('[part="item"]').forEach(node => {
             const section = node;
             const value = section.dataset.value ?? "";
-            const isOpen = value === selectedValue;
+            const isOpen = this.isOpen(value);
             section.dataset.open = String(isOpen);
             const trigger = section.querySelector('[part="trigger"]');
             const indicator = section.querySelector('[part="indicator"]');

package/dist/components/output/code-block.js

@@ -90,6 +90,7 @@ const codeStyles = `
   }
 
   ${boeFocusVisibleStyles('[part="copy"]')}
+  ${boeFocusVisibleStyles('[part="pre"]')}
 `;
 /**
  * A block of code, rendered as written.
@@ -192,7 +193,7 @@ export class CodeBlock extends BaseElement {
         this.shadowRoot.innerHTML = `
       <style>${codeStyles}</style>
       <div part="block">
-        <pre part="pre"><code part="code"><slot></slot></code></pre>
+        <pre part="pre" tabindex="0" role="region"><code part="code"><slot></slot></code></pre>
         <button type="button" part="copy" data-copied="false"></button>
       </div>
     `;
@@ -221,6 +222,7 @@ export class CodeBlock extends BaseElement {
             this.slotEl.textContent = "";
         }
         const language = this.language;
+        this.preEl.setAttribute("aria-label", language ? `${language} code` : "Source code");
         if (language) {
             this.codeEl.setAttribute("data-language", language);
             this.codeEl.setAttribute("class", `language-${language}`);

package/dist/components/overlays/drawer.js

@@ -381,7 +381,7 @@ export class Drawer extends BaseElement {
             this.hostEl.innerHTML = `
         <style>${drawerStyles}</style>
         <dialog part="backdrop" aria-labelledby="drawer-title">
-          <aside part="drawer">
+          <div part="drawer">
             <header part="header">
               <div part="meta">
                 <h2 id="drawer-title"></h2>
@@ -397,7 +397,7 @@ export class Drawer extends BaseElement {
             <footer part="footer" hidden>
               <slot name="footer"></slot>
             </footer>
-          </aside>
+          </div>
         </dialog>
       `;
             // The footer row only exists when the host slots one: an empty sticky

package/dist/core/form-associated.d.ts

@@ -30,6 +30,7 @@ export declare const boeFormFieldErrorStyles = "\n  :host([invalid]) [part=\"inp
 export declare const FORM_ERROR_MESSAGE_ID = "boe-field-error";
 export declare const formErrorMessageMarkup: () => string;
 export declare const FORM_DESCRIPTION_ID = "boe-field-description";
+export declare const FORM_LABEL_ID = "boe-field-label";
 /** Optional help text rendered under the label (shown only when `description` is set). */
 export declare const formDescriptionMarkup: () => string;
 /**

package/dist/core/form-associated.js

@@ -125,6 +125,7 @@ export const boeFormFieldErrorStyles = `
 export const FORM_ERROR_MESSAGE_ID = "boe-field-error";
 export const formErrorMessageMarkup = () => `<p part="error-message" id="${FORM_ERROR_MESSAGE_ID}" role="alert" hidden></p>`;
 export const FORM_DESCRIPTION_ID = "boe-field-description";
+export const FORM_LABEL_ID = "boe-field-label";
 /** Optional help text rendered under the label (shown only when `description` is set). */
 export const formDescriptionMarkup = () => `<p part="description" id="${FORM_DESCRIPTION_ID}" hidden></p>`;
 /**
@@ -302,6 +303,7 @@ export class FormAssociatedElement extends BaseElement {
         const required = this.required;
         const description = this.description;
         if (labelEl) {
+            labelEl.id = FORM_LABEL_ID;
             const existing = labelEl.querySelector(".boe-required-mark");
             if (required && !existing) {
                 const mark = document.createElement("span");
@@ -315,6 +317,7 @@ export class FormAssociatedElement extends BaseElement {
             }
         }
         if (control) {
+            control.setAttribute("aria-labelledby", FORM_LABEL_ID);
             control.toggleAttribute("required", required);
             control.setAttribute("aria-required", String(required));
             if (description) {

package/dist/entries/code-editor.d.ts

@@ -0,0 +1 @@
+export * from "../components/forms/code-editor.js";

package/dist/entries/code-editor.js

@@ -0,0 +1 @@
+export * from "../components/forms/code-editor.js";

package/dist/foundations/geometry/tokens.d.ts

@@ -109,8 +109,8 @@ export declare const boeControl: {
     readonly letterSpacing: "var(--boe-profile-control-letter-spacing, 0.035em)";
     /** BUE disabled control opacity */
     readonly disabledOpacity: "var(--boe-profile-disabled-opacity, 0.4)";
-    /** Input border — `$bdl-gray-20` / SurfaceSurfaceQuaternary */
-    readonly inputBorder: "var(--boe-token-surface-surface-quaternary, #d3d3d3)";
+    /** Accessible control edge, separate from low-contrast decorative dividers. */
+    readonly inputBorder: "var(--boe-control-edge, var(--boe-token-text-text-secondary, #6f6f6f))";
     /** Button secondary border — `$bdl-gray-30` / StrokeStrokeHover */
     readonly buttonBorder: "var(--boe-token-stroke-stroke-hover, #bcbcbc)";
     /** `@mixin box-inputs` inset shadow */

package/dist/foundations/geometry/tokens.js

@@ -109,8 +109,8 @@ export const boeControl = {
     letterSpacing: "var(--boe-profile-control-letter-spacing, 0.035em)",
     /** BUE disabled control opacity */
     disabledOpacity: "var(--boe-profile-disabled-opacity, 0.4)",
-    /** Input border — `$bdl-gray-20` / SurfaceSurfaceQuaternary */
-    inputBorder: "var(--boe-token-surface-surface-quaternary, #d3d3d3)",
+    /** Accessible control edge, separate from low-contrast decorative dividers. */
+    inputBorder: "var(--boe-control-edge, var(--boe-token-text-text-secondary, #6f6f6f))",
     /** Button secondary border — `$bdl-gray-30` / StrokeStrokeHover */
     buttonBorder: "var(--boe-token-stroke-stroke-hover, #bcbcbc)",
     /** `@mixin box-inputs` inset shadow */
@@ -138,7 +138,7 @@ export const boeInputControlStyles = (selector) => `
 
   ${selector}:hover:not(:disabled) {
     box-shadow: ${boeControl.inputInsetShadow};
-    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    border-color: ${boeControl.inputBorder};
   }
 
   ${selector}:focus-visible {

package/dist/foundations/icons/box-iconography.generated.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 /* auto-generated by tools/iconography/generate-box-iconography.ts */
+/* auto-generated by tools/iconography/generate-box-iconography.ts */
 export const icon2Chat = "<svg viewBox=\"0 0 150 150\" width=\"1em\" height=\"1em\" role=\"img\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M145.228 95.399C146.788 89.7541 147.07 83.8721 146.056 78.1217C145.041 72.3713 142.752 66.8766 139.333 61.9828C135.629 56.68 130.778 52.1441 125.085 48.6609C119.391 45.1777 112.979 42.823 106.253 41.7449C85.1544 38.1881 92.6553 61.4198 82.2312 79.8618C68.8609 95.399 50.0008 87.5133 50.6286 95.399C51.2563 103.285 50.755 103.597 55.8246 109.964C61.9829 117.828 70.6949 123.669 80.6924 126.637L115.311 137.947C115.828 138.114 116.37 138.201 116.917 138.205C117.604 138.207 118.282 138.063 118.899 137.784C119.516 137.504 120.055 137.098 120.475 136.596C121.071 135.923 121.396 135.082 121.396 134.213C121.396 133.344 121.071 132.502 120.475 131.83L117.812 128.664C117.533 128.339 117.338 127.959 117.24 127.554C117.143 127.149 117.146 126.728 117.25 126.324C117.354 125.92 117.555 125.544 117.839 125.222C118.123 124.9 118.481 124.642 118.889 124.467C123.955 122.259 128.584 119.281 132.582 115.655C136.81 111.835 140.216 107.31 142.622 102.317L145.228 95.399Z\" fill=\"currentColor\" fill-opacity=\"0.4\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.65536 53.0787C1.55573 59.468 1.86122 66.0035 3.55268 72.2757L6.37767 79.9625C8.98519 85.5097 12.6779 90.5383 17.2606 94.7825C21.5952 98.811 26.613 102.12 32.1046 104.573C32.5459 104.768 32.935 105.055 33.2426 105.412C33.5502 105.77 33.7684 106.188 33.8807 106.637C33.9931 107.086 33.9967 107.553 33.8913 108.003C33.7859 108.454 33.5742 108.875 33.2721 109.237L30.3846 112.754C29.7393 113.501 29.3867 114.437 29.3867 115.402C29.3867 116.368 29.7393 117.303 30.3846 118.05C30.84 118.608 31.4246 119.06 32.0933 119.37C32.7621 119.68 33.4971 119.84 34.2416 119.838C34.8345 119.833 35.4226 119.737 35.9824 119.551L73.5096 106.984C84.347 103.687 93.791 97.1971 100.467 88.4594C105.962 81.3843 109.239 72.9821 109.919 64.2202C110.6 55.4583 108.656 46.6922 104.313 38.9307C93.0133 18.4396 68.6728 8.70798 45.802 12.66C38.5105 13.8579 31.5598 16.4743 25.3881 20.3445C19.2164 24.2147 13.9574 29.2545 9.94274 35.1466C6.23599 40.5841 3.75498 46.6894 2.65536 53.0787ZM55.5024 66.8864C59.3966 66.8864 62.5534 63.7294 62.5534 59.835C62.5534 55.9405 59.3966 52.7835 55.5024 52.7835C51.6083 52.7835 48.4515 55.9405 48.4515 59.835C48.4515 63.7294 51.6083 66.8864 55.5024 66.8864ZM40.3523 59.835C40.3523 63.7294 37.1954 66.8864 33.3013 66.8864C29.4071 66.8864 26.2503 63.7294 26.2503 59.835C26.2503 55.9405 29.4071 52.7835 33.3013 52.7835C37.1954 52.7835 40.3523 55.9405 40.3523 59.835ZM77.7056 66.8864C81.5997 66.8864 84.7566 63.7294 84.7566 59.835C84.7566 55.9405 81.5997 52.7835 77.7056 52.7835C73.8114 52.7835 70.6546 55.9405 70.6546 59.835C70.6546 63.7294 73.8114 66.8864 77.7056 66.8864Z\" fill=\"currentColor\"/></svg>";
 export const icon2ChatQuestion = "<svg viewBox=\"0 0 150 150\" width=\"1em\" height=\"1em\" role=\"img\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M145.228 95.3987C146.788 89.7538 147.07 83.8718 146.056 78.1214C145.041 72.3711 142.752 66.8764 139.333 61.9826C135.629 56.6797 130.778 52.1438 125.085 48.6607C119.391 45.1775 112.979 42.8228 106.253 41.7446C85.1544 38.1878 92.6553 61.4196 82.2312 79.8616C68.8609 95.3987 50.0008 87.513 50.6286 95.3987C51.2563 103.284 50.755 103.597 55.8246 109.964C61.9829 117.828 70.6949 123.669 80.6924 126.637L115.311 137.947C115.828 138.114 116.37 138.201 116.917 138.205C117.604 138.207 118.282 138.062 118.899 137.783C119.516 137.504 120.055 137.098 120.475 136.595C121.071 135.923 121.396 135.081 121.396 134.213C121.396 133.344 121.071 132.502 120.475 131.829L117.812 128.664C117.533 128.338 117.338 127.959 117.24 127.554C117.143 127.148 117.146 126.728 117.25 126.324C117.354 125.92 117.555 125.543 117.839 125.222C118.123 124.9 118.481 124.642 118.889 124.467C123.955 122.259 128.584 119.281 132.582 115.655C136.81 111.835 140.216 107.309 142.622 102.317L145.228 95.3987Z\" fill=\"currentColor\" fill-opacity=\"0.4\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.65536 53.0782C1.55573 59.4675 1.86122 66.003 3.55268 72.2752L6.37767 79.9621C8.98519 85.5092 12.6779 90.5378 17.2606 94.782C21.5952 98.8105 26.613 102.12 32.1046 104.573C32.5459 104.767 32.935 105.054 33.2426 105.412C33.5502 105.769 33.7684 106.188 33.8807 106.637C33.9931 107.085 33.9967 107.553 33.8913 108.003C33.7859 108.453 33.5742 108.875 33.2721 109.236L30.3846 112.754C29.7393 113.501 29.3867 114.436 29.3867 115.402C29.3867 116.367 29.7393 117.302 30.3846 118.049C30.84 118.607 31.4246 119.059 32.0933 119.369C32.7621 119.679 33.4971 119.84 34.2416 119.838C34.8345 119.833 35.4226 119.736 35.9824 119.551L73.5096 106.984C84.347 103.687 93.791 97.1966 100.467 88.4589C105.962 81.3838 109.239 72.9816 109.919 64.2197C110.6 55.4578 108.656 46.6918 104.313 38.9302C93.0133 18.4391 68.6728 8.70749 45.802 12.6595C38.5105 13.8574 31.5598 16.4738 25.3881 20.344C19.2164 24.2142 13.9574 29.254 9.94274 35.1461C6.23599 40.5836 3.75498 46.6889 2.65536 53.0782ZM42.9435 38.3175C41.9569 38.9835 41.0442 39.6865 40.2055 40.4265L42.6105 44.2375C43.0052 44.9775 43.6465 45.3475 44.5345 45.3475C44.9045 45.3475 45.3239 45.1995 45.7925 44.9035C46.2612 44.5829 46.8285 44.2375 47.4945 43.8675C48.1852 43.4729 49.0115 43.1275 49.9735 42.8315C50.9602 42.5109 52.1565 42.3505 53.5625 42.3505C54.5245 42.3505 55.4125 42.4862 56.2265 42.7575C57.0652 43.0289 57.7805 43.4235 58.3725 43.9415C58.9645 44.4349 59.4209 45.0392 59.7415 45.7545C60.0869 46.4452 60.2595 47.2345 60.2595 48.1225C60.2595 49.4545 59.9882 50.6139 59.4455 51.6005C58.9029 52.5872 58.2245 53.4752 57.4105 54.2645C56.5965 55.0292 55.7209 55.7445 54.7835 56.4105C53.8462 57.0765 52.9705 57.7672 52.1565 58.4825C51.3425 59.1732 50.6642 59.9255 50.1215 60.7395C49.5789 61.5289 49.3075 62.4662 49.3075 63.5515V63.8845C49.3075 63.9585 49.3199 64.0572 49.3445 64.1805L49.9735 70.2115H56.2265L57.0775 64.8095C57.2009 64.0202 57.5709 63.3172 58.1875 62.7005C58.8289 62.0592 59.5812 61.4179 60.4445 60.7765C61.3079 60.1105 62.2205 59.4075 63.1825 58.6675C64.1445 57.9275 65.0325 57.0519 65.8465 56.0405C66.6852 55.0292 67.3759 53.8452 67.9185 52.4885C68.4612 51.1072 68.7325 49.4792 68.7325 47.6045C68.7325 45.6805 68.3872 43.9415 67.6965 42.3875C67.0059 40.8335 66.0315 39.5139 64.7735 38.4285C63.5155 37.3185 61.9985 36.4675 60.2225 35.8755C58.4712 35.2835 56.5225 34.9875 54.3765 34.9875C52.7979 34.9875 51.3302 35.1355 49.9735 35.4315C48.6169 35.7029 47.3589 36.0852 46.1995 36.5785C45.0402 37.0719 43.9549 37.6515 42.9435 38.3175ZM47.6055 81.8665C47.3342 82.5572 47.1985 83.2849 47.1985 84.0495C47.1985 84.8389 47.3342 85.5789 47.6055 86.2695C47.9015 86.9355 48.2962 87.5152 48.7895 88.0085C49.3075 88.5019 49.9119 88.8842 50.6025 89.1555C51.2932 89.4515 52.0332 89.5995 52.8225 89.5995C53.5872 89.5995 54.3149 89.4515 55.0055 89.1555C55.6962 88.8842 56.2882 88.5019 56.7815 88.0085C57.2749 87.5152 57.6695 86.9355 57.9655 86.2695C58.2615 85.5789 58.4095 84.8389 58.4095 84.0495C58.4095 83.2849 58.2615 82.5572 57.9655 81.8665C57.6695 81.1759 57.2749 80.5839 56.7815 80.0905C56.2882 79.5972 55.6962 79.2025 55.0055 78.9065C54.3149 78.6105 53.5872 78.4625 52.8225 78.4625C52.0332 78.4625 51.2932 78.6105 50.6025 78.9065C49.9119 79.2025 49.3075 79.5972 48.7895 80.0905C48.2962 80.5839 47.9015 81.1759 47.6055 81.8665Z\" fill=\"currentColor\"/></svg>";
 export const icon2OverlaySquares = "<svg viewBox=\"0 0 150 150\" width=\"1em\" height=\"1em\" role=\"img\" aria-hidden=\"true\" focusable=\"false\"><g clip-path=\"url(#2-overlay-squares__clip0_1218_620)\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M59.7298 11.4651C68.7457 5.71015 80.2819 5.71014 89.2979 11.4651L142.26 45.2715C148.525 49.2702 148.625 58.3842 142.449 62.5191L89.8012 97.7695C80.5506 103.963 68.477 103.963 59.2265 97.7695L6.57849 62.5191C0.402877 58.3842 0.502615 49.2702 6.76723 45.2715L59.7298 11.4651Z\" fill=\"currentColor\"/>\n<path opacity=\"0.4\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M59.7298 51.4883C68.7457 45.7333 80.2819 45.7333 89.2979 51.4883L142.26 85.2947C148.525 89.2934 148.625 98.4074 142.449 102.542L89.8012 137.793C80.5506 143.986 68.477 143.986 59.2265 137.793L6.57849 102.542C0.402878 98.4074 0.502616 89.2934 6.76723 85.2947L59.7298 51.4883Z\" fill=\"currentColor\"/>\n</g>\n<defs>\n<clipPath id=\"2-overlay-squares__clip0_1218_620\">\n<rect width=\"150\" height=\"150\" fill=\"currentColor\"/>\n</clipPath>\n</defs></svg>";