@vonage/vivid 5.9.0 → 5.11.0

package/rich-text-view/definition.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
-const feature = require('../unbundled/feature.cjs');
+const slottableRequest = require('../unbundled/slottable-request.cjs');
 
-const styles = ":host{display:contents}.content{display:contents}";
+const styles = ":host{display:contents}.content{display:contents;overflow-wrap:break-word;white-space:break-spaces}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,6 +22,7 @@ class RichTextView extends vividElement.VividElement {
     super(...arguments);
     this._slotCounter = 0;
     this._slottedChildren = /* @__PURE__ */ new Set();
+    this._slotRequests = /* @__PURE__ */ new Set();
     /**
      * @internal
      */
@@ -40,9 +41,9 @@ class RichTextView extends vividElement.VividElement {
     this._updateView();
   }
   _addStyles(view) {
-    const config = view[feature.impl].config[feature.impl];
+    const config = view[slottableRequest.impl].config[slottableRequest.impl];
     this._styles = new fastElement.ElementStyles(
-      feature.sortedContributions(config.features.flatMap((f) => f.getStyles()))
+      slottableRequest.sortedContributions(config.features.flatMap((f) => f.getStyles()))
     );
     this._styles.addStylesTo(this.shadowRoot);
   }
@@ -56,7 +57,11 @@ class RichTextView extends vividElement.VividElement {
     for (const el of this._slottedChildren) {
       this.removeChild(el);
     }
+    for (const slotName of this._slotRequests) {
+      slottableRequest.dispatchSlottableRequest(this, "child", slotName, slottableRequest.removeSymbol);
+    }
     this._slottedChildren.clear();
+    this._slotRequests.clear();
     this._slotCounter = 0;
   }
   _updateView() {
@@ -70,7 +75,7 @@ class RichTextView extends vividElement.VividElement {
     }
   }
   _renderView(rteView) {
-    const ctx = rteView[feature.impl];
+    const ctx = rteView[slottableRequest.impl];
     if (rteView.type === "node" && rteView.node.type === "doc") {
       rteView = rteView.children;
     }
@@ -89,29 +94,36 @@ class RichTextView extends vividElement.VividElement {
     }
   }
   _handleCustomRender(rteView, customResult) {
-    const { dom, contentDom = dom } = customResult;
-    const slotName = `view-${this._slotCounter++}`;
+    const slotName = `child-view-${this._slotCounter++}`;
     const slot = document.createElement("slot");
     slot.setAttribute("name", slotName);
-    const nestedView = document.createElement(this.tagName);
-    nestedView.view = rteView.children;
-    contentDom.appendChild(nestedView);
-    dom.setAttribute("slot", slotName);
-    this.appendChild(dom);
-    this._slottedChildren.add(dom);
+    if (customResult === true) {
+      this._slotRequests.add(slotName);
+      slottableRequest.dispatchSlottableRequest(this, "child", slotName, {
+        view: rteView
+      });
+    } else {
+      const { dom, contentDom = dom } = customResult;
+      const nestedView = document.createElement(this.tagName);
+      nestedView.view = rteView.children;
+      contentDom.appendChild(nestedView);
+      dom.setAttribute("slot", slotName);
+      this.appendChild(dom);
+      this._slottedChildren.add(dom);
+    }
     return slot;
   }
   _renderDefault(view) {
-    const ctx = view[feature.impl];
-    const config = ctx.config[feature.impl];
+    const ctx = view[slottableRequest.impl];
+    const config = ctx.config[slottableRequest.impl];
     const schema = config.schema;
     if (view.type === "node" && view.node.type === "text") {
       return document.createTextNode(view.node.text);
     }
     const item = view.type === "node" ? view.node : view.mark;
-    const pmItem = view.type === "node" ? feature.Node.fromJSON(schema, item) : feature.Mark.fromJSON(schema, item);
-    const spec = pmItem instanceof feature.Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
-    const { dom, contentDOM = dom } = feature.DOMSerializer.renderSpec(document, spec);
+    const pmItem = view.type === "node" ? slottableRequest.Node.fromJSON(schema, item) : slottableRequest.Mark.fromJSON(schema, item);
+    const spec = pmItem instanceof slottableRequest.Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
+    const { dom, contentDOM = dom } = slottableRequest.DOMSerializer.renderSpec(document, spec);
     const childrenRendered = this._renderView(view.children);
     contentDOM.appendChild(childrenRendered);
     return dom;

package/rich-text-view/definition.js

@@ -1,8 +1,8 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { ElementStyles, observable, ref, html } from '@microsoft/fast-element';
-import { i as impl, s as sortedContributions, N as Node, M as Mark, D as DOMSerializer } from '../unbundled/feature.js';
+import { i as impl, s as sortedContributions, d as dispatchSlottableRequest, N as Node, M as Mark, D as DOMSerializer, r as removeSymbol } from '../unbundled/slottable-request.js';
 
-const styles = ":host{display:contents}.content{display:contents}";
+const styles = ":host{display:contents}.content{display:contents;overflow-wrap:break-word;white-space:break-spaces}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,6 +18,7 @@ class RichTextView extends VividElement {
     super(...arguments);
     this._slotCounter = 0;
     this._slottedChildren = /* @__PURE__ */ new Set();
+    this._slotRequests = /* @__PURE__ */ new Set();
     /**
      * @internal
      */
@@ -52,7 +53,11 @@ class RichTextView extends VividElement {
     for (const el of this._slottedChildren) {
       this.removeChild(el);
     }
+    for (const slotName of this._slotRequests) {
+      dispatchSlottableRequest(this, "child", slotName, removeSymbol);
+    }
     this._slottedChildren.clear();
+    this._slotRequests.clear();
     this._slotCounter = 0;
   }
   _updateView() {
@@ -85,16 +90,23 @@ class RichTextView extends VividElement {
     }
   }
   _handleCustomRender(rteView, customResult) {
-    const { dom, contentDom = dom } = customResult;
-    const slotName = `view-${this._slotCounter++}`;
+    const slotName = `child-view-${this._slotCounter++}`;
     const slot = document.createElement("slot");
     slot.setAttribute("name", slotName);
-    const nestedView = document.createElement(this.tagName);
-    nestedView.view = rteView.children;
-    contentDom.appendChild(nestedView);
-    dom.setAttribute("slot", slotName);
-    this.appendChild(dom);
-    this._slottedChildren.add(dom);
+    if (customResult === true) {
+      this._slotRequests.add(slotName);
+      dispatchSlottableRequest(this, "child", slotName, {
+        view: rteView
+      });
+    } else {
+      const { dom, contentDom = dom } = customResult;
+      const nestedView = document.createElement(this.tagName);
+      nestedView.view = rteView.children;
+      contentDom.appendChild(nestedView);
+      dom.setAttribute("slot", slotName);
+      this.appendChild(dom);
+      this._slottedChildren.add(dom);
+    }
     return slot;
   }
   _renderDefault(view) {

package/rich-text-view/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../bundled/vivid-element.cjs"),r=require("../bundled/feature.cjs"),_=require("../bundled/ref.cjs"),f=":host{display:contents}.content{display:contents}";var y=Object.defineProperty,C=(l,e,n,s)=>{for(var t=void 0,o=l.length-1,i;o>=0;o--)(i=l[o])&&(t=i(e,n,t)||t);return t&&y(e,n,t),t};class h extends c.VividElement{constructor(){super(...arguments),this._slotCounter=0,this._slottedChildren=new Set,this._contentElement=null}viewChanged(e,n){e&&this._removeStyles(),n&&this._addStyles(n),this._updateView()}_addStyles(e){const n=e[r.impl].config[r.impl];this._styles=new c.ElementStyles(r.sortedContributions(n.features.flatMap(s=>s.getStyles()))),this._styles.addStylesTo(this.shadowRoot)}_removeStyles(){this._styles&&(this._styles.removeStylesFrom(this.shadowRoot),this._styles=void 0)}_cleanupLightDom(){for(const e of this._slottedChildren)this.removeChild(e);this._slottedChildren.clear(),this._slotCounter=0}_updateView(){this._contentElement&&(this._contentElement.innerHTML="",this._cleanupLightDom(),this.view&&this._contentElement.appendChild(this._renderView(this.view)))}_renderView(e){const n=e[r.impl];if(e.type==="node"&&e.node.type==="doc"&&(e=e.children),e.type==="fragment"){const t=document.createDocumentFragment();for(const o of e.content)t.appendChild(this._renderView(o));return t}const s=n.options.renderChildView?.(e)??!1;return s?this._handleCustomRender(e,s):this._renderDefault(e)}_handleCustomRender(e,n){const{dom:s,contentDom:t=s}=n,o=`view-${this._slotCounter++}`,i=document.createElement("slot");i.setAttribute("name",o);const d=document.createElement(this.tagName);return d.view=e.children,t.appendChild(d),s.setAttribute("slot",o),this.appendChild(s),this._slottedChildren.add(s),i}_renderDefault(e){const t=e[r.impl].config[r.impl].schema;if(e.type==="node"&&e.node.type==="text")return document.createTextNode(e.node.text);const o=e.type==="node"?e.node:e.mark,i=e.type==="node"?r.Node.fromJSON(t,o):r.Mark.fromJSON(t,o),d=i instanceof r.Node?i.type.spec.toDOM(i):i.type.spec.toDOM(i,!0),{dom:a,contentDOM:p=a}=r.DOMSerializer.renderSpec(document,d),u=this._renderView(e.children);return p.appendChild(u),a}connectedCallback(){super.connectedCallback(),this._updateView()}disconnectedCallback(){super.disconnectedCallback(),this._removeStyles(),this._cleanupLightDom()}}C([c.observable],h.prototype,"view");const g=()=>c.html`<div class="content rich-text" ${_.ref("_contentElement")}></div>`,v=c.defineVividComponent("rich-text-view",h,g,[],{styles:f,shadowOptions:{delegatesFocus:!0}}),m=c.createRegisterFunction(v);m();exports.RichTextView=h;exports.registerRichTextView=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../bundled/vivid-element.cjs"),o=require("../bundled/slottable-request.cjs"),_=require("../bundled/ref.cjs"),f=":host{display:contents}.content{display:contents;overflow-wrap:break-word;white-space:break-spaces}";var y=Object.defineProperty,C=(d,e,s,i)=>{for(var t=void 0,n=d.length-1,l;n>=0;n--)(l=d[n])&&(t=l(e,s,t)||t);return t&&y(e,s,t),t};class h extends c.VividElement{constructor(){super(...arguments),this._slotCounter=0,this._slottedChildren=new Set,this._slotRequests=new Set,this._contentElement=null}viewChanged(e,s){e&&this._removeStyles(),s&&this._addStyles(s),this._updateView()}_addStyles(e){const s=e[o.impl].config[o.impl];this._styles=new c.ElementStyles(o.sortedContributions(s.features.flatMap(i=>i.getStyles()))),this._styles.addStylesTo(this.shadowRoot)}_removeStyles(){this._styles&&(this._styles.removeStylesFrom(this.shadowRoot),this._styles=void 0)}_cleanupLightDom(){for(const e of this._slottedChildren)this.removeChild(e);for(const e of this._slotRequests)o.dispatchSlottableRequest(this,"child",e,o.removeSymbol);this._slottedChildren.clear(),this._slotRequests.clear(),this._slotCounter=0}_updateView(){this._contentElement&&(this._contentElement.innerHTML="",this._cleanupLightDom(),this.view&&this._contentElement.appendChild(this._renderView(this.view)))}_renderView(e){const s=e[o.impl];if(e.type==="node"&&e.node.type==="doc"&&(e=e.children),e.type==="fragment"){const t=document.createDocumentFragment();for(const n of e.content)t.appendChild(this._renderView(n));return t}const i=s.options.renderChildView?.(e)??!1;return i?this._handleCustomRender(e,i):this._renderDefault(e)}_handleCustomRender(e,s){const i=`child-view-${this._slotCounter++}`,t=document.createElement("slot");if(t.setAttribute("name",i),s===!0)this._slotRequests.add(i),o.dispatchSlottableRequest(this,"child",i,{view:e});else{const{dom:n,contentDom:l=n}=s,r=document.createElement(this.tagName);r.view=e.children,l.appendChild(r),n.setAttribute("slot",i),this.appendChild(n),this._slottedChildren.add(n)}return t}_renderDefault(e){const t=e[o.impl].config[o.impl].schema;if(e.type==="node"&&e.node.type==="text")return document.createTextNode(e.node.text);const n=e.type==="node"?e.node:e.mark,l=e.type==="node"?o.Node.fromJSON(t,n):o.Mark.fromJSON(t,n),r=l instanceof o.Node?l.type.spec.toDOM(l):l.type.spec.toDOM(l,!0),{dom:a,contentDOM:p=a}=o.DOMSerializer.renderSpec(document,r),u=this._renderView(e.children);return p.appendChild(u),a}connectedCallback(){super.connectedCallback(),this._updateView()}disconnectedCallback(){super.disconnectedCallback(),this._removeStyles(),this._cleanupLightDom()}}C([c.observable],h.prototype,"view");const g=()=>c.html`<div class="content rich-text" ${_.ref("_contentElement")}></div>`,v=c.defineVividComponent("rich-text-view",h,g,[],{styles:f,shadowOptions:{delegatesFocus:!0}}),m=c.createRegisterFunction(v);m();exports.RichTextView=h;exports.registerRichTextView=m;

package/rich-text-view/index.js

@@ -1,26 +1,26 @@
-import { V as u, w as _, o as f, h as y, c as C, d as g } from "../bundled/vivid-element.js";
-import { i as r, s as v, N as a, M as x, D as S } from "../bundled/feature.js";
-import { r as D } from "../bundled/ref.js";
-const b = ":host{display:contents}.content{display:contents}";
-var R = Object.defineProperty, E = (d, e, n, s) => {
-  for (var t = void 0, o = d.length - 1, i; o >= 0; o--)
-    (i = d[o]) && (t = i(e, n, t) || t);
-  return t && R(e, n, t), t;
+import { V as _, w as f, o as y, h as C, c as g, d as v } from "../bundled/vivid-element.js";
+import { i as r, s as S, h as a, N as h, M as b, D as x, r as R } from "../bundled/slottable-request.js";
+import { r as w } from "../bundled/ref.js";
+const D = ":host{display:contents}.content{display:contents;overflow-wrap:break-word;white-space:break-spaces}";
+var E = Object.defineProperty, k = (d, e, s, o) => {
+  for (var t = void 0, n = d.length - 1, i; n >= 0; n--)
+    (i = d[n]) && (t = i(e, s, t) || t);
+  return t && E(e, s, t), t;
 };
-class h extends u {
+class m extends _ {
   constructor() {
-    super(...arguments), this._slotCounter = 0, this._slottedChildren = /* @__PURE__ */ new Set(), this._contentElement = null;
+    super(...arguments), this._slotCounter = 0, this._slottedChildren = /* @__PURE__ */ new Set(), this._slotRequests = /* @__PURE__ */ new Set(), this._contentElement = null;
   }
   /**
    * @internal
    */
-  viewChanged(e, n) {
-    e && this._removeStyles(), n && this._addStyles(n), this._updateView();
+  viewChanged(e, s) {
+    e && this._removeStyles(), s && this._addStyles(s), this._updateView();
   }
   _addStyles(e) {
-    const n = e[r].config[r];
-    this._styles = new _(
-      v(n.features.flatMap((s) => s.getStyles()))
+    const s = e[r].config[r];
+    this._styles = new f(
+      S(s.features.flatMap((o) => o.getStyles()))
     ), this._styles.addStylesTo(this.shadowRoot);
   }
   _removeStyles() {
@@ -29,34 +29,42 @@ class h extends u {
   _cleanupLightDom() {
     for (const e of this._slottedChildren)
       this.removeChild(e);
-    this._slottedChildren.clear(), this._slotCounter = 0;
+    for (const e of this._slotRequests)
+      a(this, "child", e, R);
+    this._slottedChildren.clear(), this._slotRequests.clear(), this._slotCounter = 0;
   }
   _updateView() {
     this._contentElement && (this._contentElement.innerHTML = "", this._cleanupLightDom(), this.view && this._contentElement.appendChild(this._renderView(this.view)));
   }
   _renderView(e) {
-    const n = e[r];
+    const s = e[r];
     if (e.type === "node" && e.node.type === "doc" && (e = e.children), e.type === "fragment") {
       const t = document.createDocumentFragment();
-      for (const o of e.content)
-        t.appendChild(this._renderView(o));
+      for (const n of e.content)
+        t.appendChild(this._renderView(n));
       return t;
     }
-    const s = n.options.renderChildView?.(e) ?? !1;
-    return s ? this._handleCustomRender(e, s) : this._renderDefault(e);
+    const o = s.options.renderChildView?.(e) ?? !1;
+    return o ? this._handleCustomRender(e, o) : this._renderDefault(e);
   }
-  _handleCustomRender(e, n) {
-    const { dom: s, contentDom: t = s } = n, o = `view-${this._slotCounter++}`, i = document.createElement("slot");
-    i.setAttribute("name", o);
-    const c = document.createElement(this.tagName);
-    return c.view = e.children, t.appendChild(c), s.setAttribute("slot", o), this.appendChild(s), this._slottedChildren.add(s), i;
+  _handleCustomRender(e, s) {
+    const o = `child-view-${this._slotCounter++}`, t = document.createElement("slot");
+    if (t.setAttribute("name", o), s === !0)
+      this._slotRequests.add(o), a(this, "child", o, {
+        view: e
+      });
+    else {
+      const { dom: n, contentDom: i = n } = s, c = document.createElement(this.tagName);
+      c.view = e.children, i.appendChild(c), n.setAttribute("slot", o), this.appendChild(n), this._slottedChildren.add(n);
+    }
+    return t;
   }
   _renderDefault(e) {
     const t = e[r].config[r].schema;
     if (e.type === "node" && e.node.type === "text")
       return document.createTextNode(e.node.text);
-    const o = e.type === "node" ? e.node : e.mark, i = e.type === "node" ? a.fromJSON(t, o) : x.fromJSON(t, o), c = i instanceof a ? i.type.spec.toDOM(i) : i.type.spec.toDOM(i, !0), { dom: l, contentDOM: m = l } = S.renderSpec(document, c), p = this._renderView(e.children);
-    return m.appendChild(p), l;
+    const n = e.type === "node" ? e.node : e.mark, i = e.type === "node" ? h.fromJSON(t, n) : b.fromJSON(t, n), c = i instanceof h ? i.type.spec.toDOM(i) : i.type.spec.toDOM(i, !0), { dom: l, contentDOM: p = l } = x.renderSpec(document, c), u = this._renderView(e.children);
+    return p.appendChild(u), l;
   }
   /**
    * @internal
@@ -71,25 +79,25 @@ class h extends u {
     super.disconnectedCallback(), this._removeStyles(), this._cleanupLightDom();
   }
 }
-E([
-  f
-], h.prototype, "view");
-const w = () => y`<div class="content rich-text" ${D("_contentElement")}></div>`, M = g(
+k([
+  y
+], m.prototype, "view");
+const M = () => C`<div class="content rich-text" ${w("_contentElement")}></div>`, N = v(
   "rich-text-view",
-  h,
-  w,
+  m,
+  M,
   [],
   {
-    styles: b,
+    styles: D,
     shadowOptions: {
       delegatesFocus: !0
     }
   }
-), O = C(
-  M
+), O = g(
+  N
 );
 O();
 export {
-  h as RichTextView,
+  m as RichTextView,
   O as registerRichTextView
 };

package/selectable-box/definition.cjs

@@ -10,7 +10,7 @@ const delegatesAria = require('../unbundled/delegates-aria.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const enums = require('../unbundled/enums.cjs');
 
-const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
+const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -28,11 +28,13 @@ class SelectableBox extends delegatesAria.DelegatesAria(vividElement.VividElemen
     this.clickableBox = false;
     this.controlPlacement = "end-stacked";
     this.tight = false;
+    this.disabled = false;
   }
   /**
    * @internal
    */
   _handleCheckedChange() {
+    if (this.disabled) return;
     if (this.controlType === "radio" && this.checked) return;
     this.checked = !this.checked;
     if (this.clickableBox) this.$emit("change");
@@ -41,6 +43,7 @@ class SelectableBox extends delegatesAria.DelegatesAria(vividElement.VividElemen
    * @internal
    */
   _handleKeydown(event) {
+    if (this.disabled) return true;
     if ((event.code === "Space" || event.code === "Enter") && this.clickableBox)
       return this._handleCheckedChange();
     return true;
@@ -64,13 +67,17 @@ __decorateClass([
 __decorateClass([
   fastElement.attr({ mode: "boolean" })
 ], SelectableBox.prototype, "tight");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], SelectableBox.prototype, "disabled");
 
 const getClasses = ({
   connotation,
   tight,
   checked,
   clickableBox,
-  controlPlacement
+  controlPlacement,
+  disabled
 }) => fastWebUtilities.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
@@ -78,7 +85,8 @@ const getClasses = ({
   ["selected", checked],
   ["clickable", clickableBox],
   ["readonly", !clickableBox],
-  [`control-placement-${controlPlacement}`, Boolean(controlPlacement)]
+  [`control-placement-${controlPlacement}`, Boolean(controlPlacement)],
+  ["disabled", disabled]
 );
 function handleControlChange(x) {
   if (!x.clickableBox) x._handleCheckedChange();
@@ -99,6 +107,7 @@ function checkbox(context) {
 			class="control checkbox ${(x) => x.controlPlacement}"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
 			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
 			inert="${(x) => x.clickableBox ? true : null}"
 		></${checkboxTag}>`
   )} `;
@@ -119,6 +128,7 @@ function radio(context) {
 			class="control radio ${(x) => x.controlPlacement}"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
 			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
 			inert="${(x) => x.clickableBox ? true : null}"
 		></${radioTag}>`
   )} `;
@@ -127,11 +137,12 @@ const SelectableBoxTemplate = (context) => {
   return fastElement.html`<template>
 		<div
 			class="${getClasses}"
-			tabindex="${(x) => x.clickableBox ? "0" : null}"
+			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
 			${delegatesAria.delegateAria({
     role: (x) => x.clickableBox ? "button" : null,
     ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
-    ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null
+    ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null,
+    ariaDisabled: (x) => x.clickableBox && x.disabled ? "true" : null
   })}
 			@keydown="${(x, c) => x._handleKeydown(c.event)}"
 			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"

package/selectable-box/definition.js

@@ -6,7 +6,7 @@ import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-ar
 import { classNames } from '@microsoft/fast-web-utilities';
 import { C as Connotation } from '../unbundled/enums.js';
 
-const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
+const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -24,11 +24,13 @@ class SelectableBox extends DelegatesAria(VividElement) {
     this.clickableBox = false;
     this.controlPlacement = "end-stacked";
     this.tight = false;
+    this.disabled = false;
   }
   /**
    * @internal
    */
   _handleCheckedChange() {
+    if (this.disabled) return;
     if (this.controlType === "radio" && this.checked) return;
     this.checked = !this.checked;
     if (this.clickableBox) this.$emit("change");
@@ -37,6 +39,7 @@ class SelectableBox extends DelegatesAria(VividElement) {
    * @internal
    */
   _handleKeydown(event) {
+    if (this.disabled) return true;
     if ((event.code === "Space" || event.code === "Enter") && this.clickableBox)
       return this._handleCheckedChange();
     return true;
@@ -60,13 +63,17 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], SelectableBox.prototype, "tight");
+__decorateClass([
+  attr({ mode: "boolean" })
+], SelectableBox.prototype, "disabled");
 
 const getClasses = ({
   connotation,
   tight,
   checked,
   clickableBox,
-  controlPlacement
+  controlPlacement,
+  disabled
 }) => classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
@@ -74,7 +81,8 @@ const getClasses = ({
   ["selected", checked],
   ["clickable", clickableBox],
   ["readonly", !clickableBox],
-  [`control-placement-${controlPlacement}`, Boolean(controlPlacement)]
+  [`control-placement-${controlPlacement}`, Boolean(controlPlacement)],
+  ["disabled", disabled]
 );
 function handleControlChange(x) {
   if (!x.clickableBox) x._handleCheckedChange();
@@ -95,6 +103,7 @@ function checkbox(context) {
 			class="control checkbox ${(x) => x.controlPlacement}"
 			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
 			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
 			inert="${(x) => x.clickableBox ? true : null}"
 		></${checkboxTag}>`
   )} `;
@@ -115,6 +124,7 @@ function radio(context) {
 			class="control radio ${(x) => x.controlPlacement}"
 			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
 			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
 			inert="${(x) => x.clickableBox ? true : null}"
 		></${radioTag}>`
   )} `;
@@ -123,11 +133,12 @@ const SelectableBoxTemplate = (context) => {
   return html`<template>
 		<div
 			class="${getClasses}"
-			tabindex="${(x) => x.clickableBox ? "0" : null}"
+			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
 			${delegateAria({
     role: (x) => x.clickableBox ? "button" : null,
     ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
-    ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null
+    ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null,
+    ariaDisabled: (x) => x.clickableBox && x.disabled ? "true" : null
   })}
 			@keydown="${(x, c) => x._handleKeydown(c.event)}"
 			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"

package/selectable-box/index.cjs

@@ -1,28 +1,30 @@
-"use strict";const b=require("../bundled/definition8.cjs"),p=require("../bundled/definition18.cjs"),t=require("../bundled/vivid-element.cjs"),i=require("../bundled/delegates-aria.cjs"),r=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),x=":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";var _=Object.defineProperty,c=(a,o,e,s)=>{for(var l=void 0,d=a.length-1,v;d>=0;d--)(v=a[d])&&(l=v(o,e,l)||l);return l&&_(o,e,l),l};class n extends i.DelegatesAria(t.VividElement){constructor(){super(...arguments),this.checked=!1,this.clickableBox=!1,this.controlPlacement="end-stacked",this.tight=!1}_handleCheckedChange(){this.controlType==="radio"&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit("change"))}_handleKeydown(o){return(o.code==="Space"||o.code==="Enter")&&this.clickableBox?this._handleCheckedChange():!0}}c([t.attr({mode:"boolean"})],n.prototype,"checked");c([t.attr({attribute:"clickable-box",mode:"boolean"})],n.prototype,"clickableBox");c([t.attr],n.prototype,"connotation");c([t.attr({attribute:"control-type"})],n.prototype,"controlType");c([t.attr({attribute:"control-placement",mode:"fromView"})],n.prototype,"controlPlacement");c([t.attr({mode:"boolean"})],n.prototype,"tight");const k=({connotation:a,tight:o,checked:e,clickableBox:s,controlPlacement:l})=>u.classNames("base",[`connotation-${a}`,!!a],["tight",o],["selected",e],["clickable",s],["readonly",!s],[`control-placement-${l}`,!!l]);function h(a){a.clickableBox||a._handleCheckedChange()}function m(a){const o=a.tagFor(b.Checkbox);return t.html`${f.when(e=>e.controlType!=="radio",t.html`
+"use strict";const p=require("../bundled/definition8.cjs"),v=require("../bundled/definition18.cjs"),t=require("../bundled/vivid-element.cjs"),s=require("../bundled/delegates-aria.cjs"),i=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),_=":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";var x=Object.defineProperty,n=(a,o,e,d)=>{for(var l=void 0,c=a.length-1,b;c>=0;c--)(b=a[c])&&(l=b(o,e,l)||l);return l&&x(o,e,l),l};class r extends s.DelegatesAria(t.VividElement){constructor(){super(...arguments),this.checked=!1,this.clickableBox=!1,this.controlPlacement="end-stacked",this.tight=!1,this.disabled=!1}_handleCheckedChange(){this.disabled||this.controlType==="radio"&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit("change"))}_handleKeydown(o){return this.disabled?!0:(o.code==="Space"||o.code==="Enter")&&this.clickableBox?this._handleCheckedChange():!0}}n([t.attr({mode:"boolean"})],r.prototype,"checked");n([t.attr({attribute:"clickable-box",mode:"boolean"})],r.prototype,"clickableBox");n([t.attr],r.prototype,"connotation");n([t.attr({attribute:"control-type"})],r.prototype,"controlType");n([t.attr({attribute:"control-placement",mode:"fromView"})],r.prototype,"controlPlacement");n([t.attr({mode:"boolean"})],r.prototype,"tight");n([t.attr({mode:"boolean"})],r.prototype,"disabled");const k=({connotation:a,tight:o,checked:e,clickableBox:d,controlPlacement:l,disabled:c})=>u.classNames("base",[`connotation-${a}`,!!a],["tight",o],["selected",e],["clickable",d],["readonly",!d],[`control-placement-${l}`,!!l],["disabled",c]);function h(a){a.clickableBox||a._handleCheckedChange()}function m(a){const o=a.tagFor(p.Checkbox);return t.html`${f.when(e=>e.controlType!=="radio",t.html`
 		<${o}
-			${i.delegateAria({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
+			${s.delegateAria({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>h(e)}"
 			class="control checkbox ${e=>e.controlPlacement}"
-			connotation="${e=>e.connotation==="cta"?r.Connotation.CTA:r.Connotation.Accent}"
+			connotation="${e=>e.connotation==="cta"?i.Connotation.CTA:i.Connotation.Accent}"
 			:checked="${e=>e.checked}"
+			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${o}>`)} `}function g(a){const o=a.tagFor(p.Radio);return t.html`${f.when(e=>e.controlType==="radio",t.html`
+		></${o}>`)} `}function g(a){const o=a.tagFor(v.Radio);return t.html`${f.when(e=>e.controlType==="radio",t.html`
 		<${o}
-			${i.delegateAria({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
+			${s.delegateAria({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>h(e)}"
 			class="control radio ${e=>e.controlPlacement}"
-			connotation="${e=>e.connotation==="cta"?r.Connotation.CTA:r.Connotation.Accent}"
+			connotation="${e=>e.connotation==="cta"?i.Connotation.CTA:i.Connotation.Accent}"
 			:checked="${e=>e.checked}"
+			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
 		></${o}>`)} `}const $=a=>t.html`<template>
 		<div
 			class="${k}"
-			tabindex="${o=>o.clickableBox?"0":null}"
-			${i.delegateAria({role:o=>o.clickableBox?"button":null,ariaPressed:o=>o.clickableBox?o.checked?"true":"false":null,ariaLabel:o=>o.clickableBox?o.ariaLabel:null})}
+			tabindex="${o=>o.clickableBox&&!o.disabled?"0":null}"
+			${s.delegateAria({role:o=>o.clickableBox?"button":null,ariaPressed:o=>o.clickableBox?o.checked?"true":"false":null,ariaLabel:o=>o.clickableBox?o.ariaLabel:null,ariaDisabled:o=>o.clickableBox&&o.disabled?"true":null})}
 			@keydown="${(o,e)=>o._handleKeydown(e.event)}"
 			@click="${o=>o.clickableBox?o._handleCheckedChange():null}"
 		>
 			${m(a)} ${g(a)}
 			<slot></slot>
 		</div>
-	</template>`,y=t.defineVividComponent("selectable-box",n,$,[b.checkboxDefinition,p.radioDefinition],{styles:x,shadowOptions:{delegatesFocus:!0}}),C=t.createRegisterFunction(y);C();
+	</template>`,y=t.defineVividComponent("selectable-box",r,$,[p.checkboxDefinition,v.radioDefinition],{styles:_,shadowOptions:{delegatesFocus:!0}}),C=t.createRegisterFunction(y);C();