@fluentui/web-components 3.0.0-beta.1 → 3.0.0-beta.100

package/dist/esm/message-bar/message-bar.styles.js

@@ -0,0 +1,107 @@
+import { css } from '@microsoft/fast-element';
+import { borderRadiusMedium, colorNeutralBackground3, colorNeutralForeground3, colorNeutralStroke1, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBorder1, colorPaletteGreenBackground1, colorPaletteGreenBorder1, colorPaletteRedBackground1, colorPaletteRedBorder1, fontFamilyBase, fontSizeBase200, lineHeightBase200, spacingHorizontalM, spacingHorizontalS, spacingVerticalMNudge, spacingVerticalS, } from '../theme/design-tokens.js';
+/**
+ * Styles for the MessageBar component.
+ *
+ * @public
+ */
+export const styles = css `
+  :host {
+    display: grid;
+    box-sizing: border-box;
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    width: 100%;
+    background: ${colorNeutralBackground3};
+    border: 1px solid ${colorNeutralStroke1};
+    padding-inline: ${spacingHorizontalM};
+    border-radius: ${borderRadiusMedium};
+    min-height: 36px;
+    align-items: center;
+    grid-template: 'icon body actions dismiss' / auto 1fr auto auto;
+    contain: layout style paint;
+  }
+
+  :host([shape='square']) {
+    border-radius: 0;
+  }
+
+  :host([intent='success']) {
+    background-color: ${colorPaletteGreenBackground1};
+    border-color: ${colorPaletteGreenBorder1};
+  }
+
+  :host([intent='warning']) {
+    background-color: ${colorPaletteDarkOrangeBackground1};
+    border-color: ${colorPaletteDarkOrangeBorder1};
+  }
+
+  :host([intent='error']) {
+    background-color: ${colorPaletteRedBackground1};
+    border-color: ${colorPaletteRedBorder1};
+  }
+
+  :host([layout='multiline']) {
+    grid-template-areas:
+      'icon body dismiss'
+      'actions actions actions';
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr;
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: ${spacingHorizontalM};
+  }
+
+  .content {
+    grid-area: body;
+    max-width: 520px;
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: 0;
+  }
+
+  :host([layout='multiline']) .content {
+    padding: 0;
+  }
+
+  ::slotted([slot='icon']) {
+    display: flex;
+    grid-area: icon;
+    flex-direction: column;
+    align-items: center;
+    color: ${colorNeutralForeground3};
+    margin-inline-end: ${spacingHorizontalS};
+  }
+
+  :host([layout='multiline']) ::slotted([slot='icon']) {
+    align-items: start;
+    height: 100%;
+  }
+
+  ::slotted([slot='dismiss']) {
+    grid-area: dismiss;
+  }
+
+  .actions {
+    grid-area: actions;
+    display: flex;
+    justify-self: end;
+    margin-inline-end: ${spacingHorizontalS};
+    gap: ${spacingHorizontalS};
+  }
+
+  :host([layout='multiline']) .actions {
+    margin-block-start: ${spacingVerticalMNudge};
+    margin-inline-end: 0;
+  }
+
+  :host([layout='multiline']) ::slotted([slot='dismiss']) {
+    align-items: start;
+    height: 100%;
+    padding-block-start: ${spacingVerticalS};
+  }
+
+  ::slotted(*) {
+    font-size: inherit;
+  }
+`;
+//# sourceMappingURL=message-bar.styles.js.map

package/dist/esm/message-bar/message-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.styles.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;mBAIrB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;kBAElB,uBAAuB;wBACjB,mBAAmB;sBACrB,kBAAkB;qBACnB,kBAAkB;;;;;;;;;;;;wBAYf,4BAA4B;oBAChC,wBAAwB;;;;wBAIpB,iCAAiC;oBACrC,6BAA6B;;;;wBAIzB,0BAA0B;oBAC9B,sBAAsB;;;;;;;;;qBASrB,qBAAqB;sBACpB,kBAAkB;;;;;;qBAMnB,qBAAqB;;;;;;;;;;;;;aAa7B,uBAAuB;yBACX,kBAAkB;;;;;;;;;;;;;;;;yBAgBlB,kBAAkB;WAChC,kBAAkB;;;;0BAIH,qBAAqB;;;;;;;2BAOpB,gBAAgB;;;;;;CAM1C,CAAC"}

package/dist/esm/message-bar/message-bar.template.js

@@ -0,0 +1,25 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Generates a template for the MessageBar component.
+ * @public
+ * @param {MessageBar} T - The type of the MessageBar.
+ * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ */
+export function messageBarTemplate() {
+    return html `
+    <slot name="icon"></slot>
+    <div class="content">
+      <slot></slot>
+    </div>
+    <div class="actions">
+      <slot name="actions"></slot>
+    </div>
+    <slot name="dismiss"></slot>
+  `;
+}
+/**
+ * The template for the MessageBar component.
+ * @type {ElementViewTemplate<MessageBar>}
+ */
+export const template = messageBarTemplate();
+//# sourceMappingURL=message-bar.template.js.map

package/dist/esm/message-bar/message-bar.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.template.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;;;;;;;;GASb,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/dist/esm/option/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './option.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/dist/esm/option/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/option/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/option/index.js

@@ -0,0 +1,6 @@
+export { definition as DropdownOptionDefinition } from './option.definition.js';
+export { DropdownOption } from './option.js';
+export { isDropdownOption } from './option.options.js';
+export { styles as DropdownOptionStyles } from './option.styles.js';
+export { template as DropdownOptionTemplate } from './option.template.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/option/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/option/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAA8B,MAAM,qBAAqB,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/option/option.definition.js

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { DropdownOption } from './option.js';
+import { styles } from './option.styles.js';
+import { template } from './option.template.js';
+/**
+ * The Fluent Option Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-option>`
+ */
+export const definition = DropdownOption.compose({
+    name: `${FluentDesignSystem.prefix}-option`,
+    template,
+    styles,
+});
+//# sourceMappingURL=option.definition.js.map

package/dist/esm/option/option.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.definition.js","sourceRoot":"","sources":["../../../src/option/option.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC/C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/option/option.js

@@ -0,0 +1,298 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
+import { uniqueId } from '../utils/unique-id.js';
+/**
+ * A DropdownOption Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#option | ARIA option } role.
+ *
+ * @tag fluent-dropdown-option
+ *
+ * @slot - The default slot for the option's content.
+ * @slot checked-indicator - The checked indicator.
+ * @slot description - Optional description content.
+ *
+ * @remarks
+ * To support single and multiple selection modes with the {@link (BaseDropdown:class)} element, the Option element
+ * itself handles form association and value submission, rather than its parent Dropdown element. In this way, the
+ * Option element is a variation of the Checkbox element that is specifically designed for use in the Dropdown element.
+ *
+ * This class is named `DropdownOption` to avoid conflicts with the native `Option` global. Related constructs are also
+ * titled with `DropdownOption` to maintain consistency.
+ *
+ * @public
+ */
+export class DropdownOption extends FASTElement {
+    /**
+     * Changes the active state of the option when the active property changes.
+     *
+     * @param prev - the previous active state
+     * @param next - the current active state
+     * @internal
+     */
+    activeChanged(prev, next) {
+        toggleState(this.elementInternals, 'active', next);
+    }
+    /**
+     * Sets the selected property to match the currentSelected state.
+     *
+     * @param prev - the previous selected state
+     * @param next - the current selected state
+     * @internal
+     */
+    currentSelectedChanged(prev, next) {
+        this.selected = !!next;
+    }
+    /**
+     * Updates the selected state when the `selected` attribute is changed, unless the selected state has been changed by the user.
+     *
+     * @param prev - The previous initial selected state
+     * @param next - The current initial selected state
+     * @internal
+     */
+    defaultSelectedChanged(prev, next) {
+        this.selected = !!next;
+    }
+    /**
+     * Changes the description state of the option when the description slot changes.
+     *
+     * @param prev - the previous collection of description elements
+     * @param next - the current collection of description elements
+     * @internal
+     */
+    descriptionSlotChanged(prev, next) {
+        toggleState(this.elementInternals, 'description', !!next?.length);
+    }
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @internal
+     */
+    disabledChanged(prev, next) {
+        this.elementInternals.ariaDisabled = this.disabled ? 'true' : 'false';
+        toggleState(this.elementInternals, 'disabled', this.disabled);
+    }
+    /**
+     * Sets the disabled state when the `disabled` attribute changes.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     * @internal
+     */
+    disabledAttributeChanged(prev, next) {
+        this.disabled = !!next;
+    }
+    /**
+     * Sets the value of the option when the `value` attribute changes.
+     *
+     * @param prev - The previous initial value
+     * @param next - The current initial value
+     * @internal
+     */
+    initialValueChanged(prev, next) {
+        this._value = next;
+    }
+    /**
+     * Updates the multiple state of the option when the multiple property changes.
+     *
+     * @param prev - the previous multiple state
+     * @param next - the current multiple state
+     */
+    multipleChanged(prev, next) {
+        toggleState(this.elementInternals, 'multiple', next);
+        this.selected = false;
+    }
+    /**
+     * The associated `<form>` element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     */
+    get form() {
+        return this.elementInternals.form;
+    }
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static { this.formAssociated = true; }
+    /**
+     * A reference to all associated `<label>` elements.
+     *
+     * @public
+     */
+    get labels() {
+        return Object.freeze(Array.from(this.elementInternals.labels));
+    }
+    /**
+     * The option's current selected state.
+     *
+     * @public
+     */
+    get selected() {
+        Observable.track(this, 'selected');
+        return !!this.currentSelected;
+    }
+    set selected(next) {
+        this.currentSelected = next;
+        Updates.enqueue(() => {
+            if (this.$fastController.isConnected) {
+                this.setFormValue(next ? this.value : null);
+                this.elementInternals.ariaSelected = next ? 'true' : 'false';
+                toggleState(this.elementInternals, 'selected', next);
+            }
+        });
+        Observable.notify(this, 'selected');
+    }
+    /**
+     * The display text of the option.
+     *
+     * @public
+     * @remarks
+     * When the option is freeform, the text is the value of the option.
+     */
+    get text() {
+        if (this.freeform) {
+            return this.value.replace(/\s+/g, ' ').trim();
+        }
+        return (this.textAttribute ?? this.textContent)?.replace(/\s+/g, ' ').trim() ?? '';
+    }
+    /**
+     * The current value of the option.
+     *
+     * @public
+     */
+    get value() {
+        Observable.track(this, 'value');
+        return this._value ?? this.text;
+    }
+    set value(value) {
+        this._value = value;
+        if (this.$fastController.isConnected) {
+            this.setFormValue(this.selected ? value : null);
+            this.freeformOutputs?.forEach(output => {
+                output.value = value;
+            });
+            Observable.notify(this, 'value');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.freeform) {
+            this.value = '';
+            this.hidden = true;
+            this.selected = false;
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * Indicates that the option is active.
+         *
+         * @public
+         */
+        this.active = false;
+        /**
+         * The id of the option. If not provided, a unique id will be assigned.
+         *
+         * @override
+         * @public
+         * @remarks
+         * HTML Attribute: `id`
+         */
+        this.id = uniqueId('option-');
+        /**
+         * The initial value of the option.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `value`
+         */
+        this.initialValue = '';
+        /**
+         * Indicates that the option is in a multiple selection mode context.
+         * @public
+         */
+        this.multiple = false;
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        /**
+         * The internal value of the option.
+         *
+         * @internal
+         */
+        this._value = this.initialValue;
+        this.elementInternals.role = 'option';
+    }
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value, state) {
+        if (this.disabled) {
+            this.elementInternals.setFormValue(null);
+            return;
+        }
+        this.elementInternals.setFormValue(value, value ?? state);
+    }
+    /**
+     * Toggles the selected state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     */
+    toggleSelected(force = !this.selected) {
+        this.selected = force;
+    }
+}
+__decorate([
+    observable
+], DropdownOption.prototype, "active", void 0);
+__decorate([
+    attr({ attribute: 'current-selected', mode: 'boolean' })
+], DropdownOption.prototype, "currentSelected", void 0);
+__decorate([
+    attr({ attribute: 'selected', mode: 'boolean' })
+], DropdownOption.prototype, "defaultSelected", void 0);
+__decorate([
+    observable
+], DropdownOption.prototype, "descriptionSlot", void 0);
+__decorate([
+    observable
+], DropdownOption.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'disabled', mode: 'boolean' })
+], DropdownOption.prototype, "disabledAttribute", void 0);
+__decorate([
+    attr({ attribute: 'form' })
+], DropdownOption.prototype, "formAttribute", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], DropdownOption.prototype, "freeform", void 0);
+__decorate([
+    attr({ attribute: 'id' })
+], DropdownOption.prototype, "id", void 0);
+__decorate([
+    attr({ attribute: 'value', mode: 'fromView' })
+], DropdownOption.prototype, "initialValue", void 0);
+__decorate([
+    observable
+], DropdownOption.prototype, "multiple", void 0);
+__decorate([
+    attr
+], DropdownOption.prototype, "name", void 0);
+__decorate([
+    observable
+], DropdownOption.prototype, "start", void 0);
+__decorate([
+    attr({ attribute: 'text', mode: 'fromView' })
+], DropdownOption.prototype, "textAttribute", void 0);
+//# sourceMappingURL=option.js.map

package/dist/esm/option/option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../src/option/option.ts"],"names":[],"mappings":"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"}

package/dist/esm/option/option.options.js

@@ -0,0 +1,15 @@
+/**
+ * Predicate function that determines if the element should be considered an option.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is an option.
+ * @public
+ */
+export function isDropdownOption(value, tagName = '-option') {
+    if (value?.nodeType !== Node.ELEMENT_NODE) {
+        return false;
+    }
+    return value.tagName.toLowerCase().endsWith(tagName);
+}
+//# sourceMappingURL=option.options.js.map

package/dist/esm/option/option.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.options.js","sourceRoot":"","sources":["../../../src/option/option.options.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAkB,EAAE,UAAkB,SAAS;IAC9E,IAAI,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC1C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,KAAiB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACpE,CAAC"}

package/dist/esm/option/option.styles.js

@@ -0,0 +1,127 @@
+import { css } from '@microsoft/fast-element';
+import { typographyBody1Styles, typographyCaption1Styles } from '../styles/partials/typography.partials.js';
+import { activeState, descriptionState, multipleState, selectedState } from '../styles/states/index.js';
+import { borderRadiusMedium, borderRadiusSmall, colorCompoundBrandBackground, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeDisabled, colorStrokeFocus2, colorTransparentStroke, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
+import { display } from '../utils/display.js';
+/**
+ * Styles for the {@link (DropdownOption:class)} component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${display('inline-grid')}
+
+  :host {
+    -webkit-tap-highlight-color: transparent;
+    ${typographyBody1Styles}
+    align-items: center;
+    background-color: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusMedium};
+    border: ${strokeWidthThick} solid ${colorTransparentStroke};
+    box-sizing: border-box;
+    color: ${colorNeutralForeground2};
+    column-gap: ${spacingHorizontalXS};
+    cursor: pointer;
+    grid-template-areas: 'indicator start content';
+    grid-template-columns: auto auto 1fr;
+    min-height: 32px;
+    padding: ${spacingHorizontalSNudge};
+  }
+
+  .content {
+    grid-area: content;
+    line-height: 1;
+  }
+
+  ::slotted([slot='start']) {
+    grid-area: start;
+  }
+
+  :host(:hover) {
+    background-color: ${colorNeutralBackground1Hover};
+    color: ${colorNeutralForeground2Hover};
+  }
+
+  :host(:active) {
+    background-color: ${colorNeutralBackground1Pressed};
+    color: ${colorNeutralForeground2Pressed};
+  }
+
+  :host(:disabled) {
+    background-color: ${colorNeutralBackground1};
+    color: ${colorNeutralForegroundDisabled};
+    cursor: default;
+  }
+
+  .checkmark-16-filled {
+    fill: currentColor;
+    width: 16px;
+  }
+
+  slot[name='checked-indicator'] > *,
+  ::slotted([slot='checked-indicator']) {
+    aspect-ratio: 1;
+    flex: 0 0 auto;
+    grid-area: indicator;
+    visibility: hidden;
+  }
+
+  :host(${selectedState}) :is(slot[name='checked-indicator'] > *, ::slotted([slot='checked-indicator'])) {
+    visibility: visible;
+  }
+
+  :host(${multipleState}) .checkmark-16-filled,
+  :host(:not(${multipleState})) .checkmark-12-regular {
+    display: none;
+  }
+
+  :host(${multipleState}) .checkmark-12-regular {
+    background-color: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusSmall};
+    border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
+    box-sizing: border-box;
+    cursor: pointer;
+    fill: transparent;
+    position: relative;
+    visibility: visible;
+    width: 16px;
+  }
+
+  :host(${multipleState}${selectedState}) .checkmark-12-regular {
+    background-color: ${colorCompoundBrandBackground};
+    border-color: ${colorCompoundBrandStroke};
+    fill: ${colorNeutralForegroundInverted};
+  }
+
+  :host(:disabled${multipleState}) .checkmark-12-regular {
+    border-color: ${colorNeutralStrokeDisabled};
+  }
+
+  :host(:disabled${multipleState}${selectedState}) .checkmark-12-regular {
+    background-color: ${colorNeutralBackgroundDisabled};
+  }
+
+  :host(${activeState}) {
+    border: ${strokeWidthThick} solid ${colorStrokeFocus2};
+  }
+
+  @supports (selector(:host(:has(*)))) {
+    :host(:has([slot='start']:not([size='16']))) {
+      column-gap: ${spacingHorizontalSNudge};
+    }
+  }
+
+  :host(${descriptionState}) {
+    column-gap: ${spacingHorizontalSNudge};
+    grid-template-areas:
+      'indicator start content'
+      'indicator start description';
+  }
+
+  ::slotted([slot='description']) {
+    color: ${colorNeutralForeground3};
+    grid-area: description;
+    ${typographyCaption1Styles}
+  }
+`;
+//# sourceMappingURL=option.styles.js.map

package/dist/esm/option/option.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.styles.js","sourceRoot":"","sources":["../../../src/option/option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AAC5G,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxG,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,wBAAwB,EACxB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,0BAA0B,EAC1B,iBAAiB,EACjB,sBAAsB,EACtB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;MAIpB,qBAAqB;;wBAEH,uBAAuB;qBAC1B,kBAAkB;cACzB,gBAAgB,UAAU,sBAAsB;;aAEjD,uBAAuB;kBAClB,mBAAmB;;;;;eAKtB,uBAAuB;;;;;;;;;;;;;wBAad,4BAA4B;aACvC,4BAA4B;;;;wBAIjB,8BAA8B;aACzC,8BAA8B;;;;wBAInB,uBAAuB;aAClC,8BAA8B;;;;;;;;;;;;;;;;;UAiBjC,aAAa;;;;UAIb,aAAa;eACR,aAAa;;;;UAIlB,aAAa;wBACC,uBAAuB;qBAC1B,iBAAiB;cACxB,eAAe,UAAU,4BAA4B;;;;;;;;;UASzD,aAAa,GAAG,aAAa;wBACf,4BAA4B;oBAChC,wBAAwB;YAChC,8BAA8B;;;mBAGvB,aAAa;oBACZ,0BAA0B;;;mBAG3B,aAAa,GAAG,aAAa;wBACxB,8BAA8B;;;UAG5C,WAAW;cACP,gBAAgB,UAAU,iBAAiB;;;;;oBAKrC,uBAAuB;;;;UAIjC,gBAAgB;kBACR,uBAAuB;;;;;;;aAO5B,uBAAuB;;MAE9B,wBAAwB;;CAE7B,CAAC"}