@vonage/vivid 5.8.0 → 5.10.0

package/rich-text-view/definition.cjs

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const slottableRequest = require('../unbundled/slottable-request.cjs');
+
+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) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class RichTextView extends vividElement.VividElement {
+  constructor() {
+    super(...arguments);
+    this._slotCounter = 0;
+    this._slottedChildren = /* @__PURE__ */ new Set();
+    this._slotRequests = /* @__PURE__ */ new Set();
+    /**
+     * @internal
+     */
+    this._contentElement = null;
+  }
+  /**
+   * @internal
+   */
+  viewChanged(oldView, newView) {
+    if (oldView) {
+      this._removeStyles();
+    }
+    if (newView) {
+      this._addStyles(newView);
+    }
+    this._updateView();
+  }
+  _addStyles(view) {
+    const config = view[slottableRequest.impl].config[slottableRequest.impl];
+    this._styles = new fastElement.ElementStyles(
+      slottableRequest.sortedContributions(config.features.flatMap((f) => f.getStyles()))
+    );
+    this._styles.addStylesTo(this.shadowRoot);
+  }
+  _removeStyles() {
+    if (this._styles) {
+      this._styles.removeStylesFrom(this.shadowRoot);
+      this._styles = void 0;
+    }
+  }
+  _cleanupLightDom() {
+    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() {
+    if (!this._contentElement) {
+      return;
+    }
+    this._contentElement.innerHTML = "";
+    this._cleanupLightDom();
+    if (this.view) {
+      this._contentElement.appendChild(this._renderView(this.view));
+    }
+  }
+  _renderView(rteView) {
+    const ctx = rteView[slottableRequest.impl];
+    if (rteView.type === "node" && rteView.node.type === "doc") {
+      rteView = rteView.children;
+    }
+    if (rteView.type === "fragment") {
+      const frag = document.createDocumentFragment();
+      for (const child of rteView.content) {
+        frag.appendChild(this._renderView(child));
+      }
+      return frag;
+    }
+    const customRenderedView = ctx.options.renderChildView?.(rteView) ?? false;
+    if (customRenderedView) {
+      return this._handleCustomRender(rteView, customRenderedView);
+    } else {
+      return this._renderDefault(rteView);
+    }
+  }
+  _handleCustomRender(rteView, customResult) {
+    const slotName = `child-view-${this._slotCounter++}`;
+    const slot = document.createElement("slot");
+    slot.setAttribute("name", slotName);
+    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[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" ? 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;
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateView();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._removeStyles();
+    this._cleanupLightDom();
+  }
+}
+__decorateClass([
+  fastElement.observable
+], RichTextView.prototype, "view");
+
+const RichTextViewTemplate = () => fastElement.html`<div class="content rich-text" ${fastElement.ref("_contentElement")}></div>`;
+
+const richTextViewDefinition = vividElement.defineVividComponent(
+  "rich-text-view",
+  RichTextView,
+  RichTextViewTemplate,
+  [],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerRichTextView = vividElement.createRegisterFunction(
+  richTextViewDefinition
+);
+
+exports.VwcRichTextViewElement = RichTextView;
+exports.registerRichTextView = registerRichTextView;
+exports.richTextViewDefinition = richTextViewDefinition;

package/rich-text-view/definition.js

@@ -0,0 +1,165 @@
+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, 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;overflow-wrap:break-word;white-space:break-spaces}";
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class RichTextView extends VividElement {
+  constructor() {
+    super(...arguments);
+    this._slotCounter = 0;
+    this._slottedChildren = /* @__PURE__ */ new Set();
+    this._slotRequests = /* @__PURE__ */ new Set();
+    /**
+     * @internal
+     */
+    this._contentElement = null;
+  }
+  /**
+   * @internal
+   */
+  viewChanged(oldView, newView) {
+    if (oldView) {
+      this._removeStyles();
+    }
+    if (newView) {
+      this._addStyles(newView);
+    }
+    this._updateView();
+  }
+  _addStyles(view) {
+    const config = view[impl].config[impl];
+    this._styles = new ElementStyles(
+      sortedContributions(config.features.flatMap((f) => f.getStyles()))
+    );
+    this._styles.addStylesTo(this.shadowRoot);
+  }
+  _removeStyles() {
+    if (this._styles) {
+      this._styles.removeStylesFrom(this.shadowRoot);
+      this._styles = void 0;
+    }
+  }
+  _cleanupLightDom() {
+    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() {
+    if (!this._contentElement) {
+      return;
+    }
+    this._contentElement.innerHTML = "";
+    this._cleanupLightDom();
+    if (this.view) {
+      this._contentElement.appendChild(this._renderView(this.view));
+    }
+  }
+  _renderView(rteView) {
+    const ctx = rteView[impl];
+    if (rteView.type === "node" && rteView.node.type === "doc") {
+      rteView = rteView.children;
+    }
+    if (rteView.type === "fragment") {
+      const frag = document.createDocumentFragment();
+      for (const child of rteView.content) {
+        frag.appendChild(this._renderView(child));
+      }
+      return frag;
+    }
+    const customRenderedView = ctx.options.renderChildView?.(rteView) ?? false;
+    if (customRenderedView) {
+      return this._handleCustomRender(rteView, customRenderedView);
+    } else {
+      return this._renderDefault(rteView);
+    }
+  }
+  _handleCustomRender(rteView, customResult) {
+    const slotName = `child-view-${this._slotCounter++}`;
+    const slot = document.createElement("slot");
+    slot.setAttribute("name", slotName);
+    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) {
+    const ctx = view[impl];
+    const config = ctx.config[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" ? Node.fromJSON(schema, item) : Mark.fromJSON(schema, item);
+    const spec = pmItem instanceof Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
+    const { dom, contentDOM = dom } = DOMSerializer.renderSpec(document, spec);
+    const childrenRendered = this._renderView(view.children);
+    contentDOM.appendChild(childrenRendered);
+    return dom;
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateView();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._removeStyles();
+    this._cleanupLightDom();
+  }
+}
+__decorateClass([
+  observable
+], RichTextView.prototype, "view");
+
+const RichTextViewTemplate = () => html`<div class="content rich-text" ${ref("_contentElement")}></div>`;
+
+const richTextViewDefinition = defineVividComponent(
+  "rich-text-view",
+  RichTextView,
+  RichTextViewTemplate,
+  [],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerRichTextView = createRegisterFunction(
+  richTextViewDefinition
+);
+
+export { RichTextView as VwcRichTextViewElement, registerRichTextView, richTextViewDefinition };

package/rich-text-view/index.cjs

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,103 @@
+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 m extends _ {
+  constructor() {
+    super(...arguments), this._slotCounter = 0, this._slottedChildren = /* @__PURE__ */ new Set(), this._slotRequests = /* @__PURE__ */ new Set(), this._contentElement = null;
+  }
+  /**
+   * @internal
+   */
+  viewChanged(e, s) {
+    e && this._removeStyles(), s && this._addStyles(s), this._updateView();
+  }
+  _addStyles(e) {
+    const s = e[r].config[r];
+    this._styles = new f(
+      S(s.features.flatMap((o) => o.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)
+      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 s = e[r];
+    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 o = s.options.renderChildView?.(e) ?? !1;
+    return o ? this._handleCustomRender(e, o) : this._renderDefault(e);
+  }
+  _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 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
+   */
+  connectedCallback() {
+    super.connectedCallback(), this._updateView();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._removeStyles(), this._cleanupLightDom();
+  }
+}
+k([
+  y
+], m.prototype, "view");
+const M = () => C`<div class="content rich-text" ${w("_contentElement")}></div>`, N = v(
+  "rich-text-view",
+  m,
+  M,
+  [],
+  {
+    styles: D,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), O = g(
+  N
+);
+O();
+export {
+  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}"