@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.71

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

@@ -1,172 +1,94 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
-import { borderRadiusMedium, colorBrandBackground2, colorCompoundBrandBackground, colorNeutralBackground6, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteRedBackground2, colorPaletteRedBackground3, } from '../theme/design-tokens.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { borderRadiusMedium, borderRadiusNone, colorCompoundBrandBackground, colorNeutralBackground6, colorPaletteDarkOrangeBackground3, colorPaletteGreenBackground3, colorPaletteRedBackground3, colorTransparentBackground, } from '../theme/design-tokens.js';
+import { errorState, largeState, squareState, successState, warningState } from '../styles/states/index.js';
 /** ProgressBar styles
  * @public
  */
 export const styles = css `
-  ${display('flex')}
+  ${display('block')}
 
   :host {
-    align-items: center;
+    width: 100%;
     height: 2px;
     overflow-x: hidden;
-    border-radius: var(${borderRadiusMedium});
+    background-color: ${colorNeutralBackground6};
+    border-radius: ${borderRadiusMedium};
     contain: content;
   }
 
-  :host([thickness='large']),
-  :host([thickness='large']) .progress,
-  :host([thickness='large']) .determinate {
+  :host(${largeState}) {
     height: 4px;
   }
 
-  :host([shape='square']),
-  :host([shape='square']) .progress,
-  :host([shape='square']) .determinate {
-    border-radius: 0;
-  }
-
-  :host([validation-state='error']) .determinate {
-    background-color: var(${colorPaletteRedBackground3});
+  :host(${squareState}) {
+    border-radius: ${borderRadiusNone};
   }
 
-  :host([validation-state='error']) .indeterminate-indicator-1,
-  :host([validation-state='error']) .indeterminate-indicator-2 {
-    background: linear-gradient(
-      to right,
-      var(${colorPaletteRedBackground2}) 0%,
-      var(${colorPaletteRedBackground3}) 50%,
-      var(${colorPaletteRedBackground2})
-    );
+  .indicator {
+    background-color: ${colorCompoundBrandBackground};
+    border-radius: inherit;
+    height: 100%;
   }
 
-  :host([validation-state='warning']) .determinate {
-    background-color: var(${colorPaletteDarkOrangeBackground3});
+  :host([value]) .indicator {
+    transition: all 0.2s ease-in-out;
   }
 
-  :host([validation-state='warning']) .indeterminate-indicator-1,
-  :host([validation-state='warning']) .indeterminate-indicator-2 {
-    background: linear-gradient(
+  :host(:not([value])) .indicator {
+    position: relative;
+    width: 33%;
+    background-image: linear-gradient(
       to right,
-      var(${colorPaletteDarkOrangeBackground2}) 0%,
-      var(${colorPaletteDarkOrangeBackground3}) 50%,
-      var(${colorPaletteDarkOrangeBackground2})
+      ${colorNeutralBackground6} 0%,
+      ${colorTransparentBackground} 50%,
+      ${colorNeutralBackground6} 100%
     );
+    animation-name: indeterminate;
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
   }
 
-  :host([validation-state='success']) .determinate {
-    background-color: var(${colorPaletteGreenBackground3});
-  }
-
-  :host([validation-state='success']) .indeterminate-indicator-1,
-  :host([validation-state='success']) .indeterminate-indicator-2 {
-    background: linear-gradient(
-      to right,
-      var(${colorPaletteGreenBackground2}) 0%,
-      var(${colorPaletteGreenBackground3}) 50%,
-      var(${colorPaletteGreenBackground2})
-    );
+  :host(${errorState}) .indicator {
+    background-color: ${colorPaletteRedBackground3};
   }
 
-  .progress {
-    background-color: var(${colorNeutralBackground6});
-    border-radius: var(${borderRadiusMedium});
-    width: 100%;
-    height: 2px;
-    display: flex;
-    align-items: center;
-    position: relative;
+  :host(${warningState}) .indicator {
+    background-color: ${colorPaletteDarkOrangeBackground3};
   }
 
-  .determinate {
-    background-color: var(${colorCompoundBrandBackground});
-    border-radius: var(${borderRadiusMedium});
-    height: 2px;
-    transition: all 0.2s ease-in-out;
-    display: flex;
+  :host(${successState}) .indicator {
+    background-color: ${colorPaletteGreenBackground3};
   }
 
-  .indeterminate-indicator-1 {
-    position: absolute;
-    opacity: 0;
-    height: 100%;
-    background: linear-gradient(
-      to right,
-      var(${colorBrandBackground2}) 0%,
-      var(${colorCompoundBrandBackground}) 50%,
-      var(${colorBrandBackground2})
-    );
-    border-radius: var(${borderRadiusMedium});
-    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-    width: 40%;
-    animation: indeterminate-1 3s infinite;
-  }
-
-  .indeterminate-indicator-2 {
-    position: absolute;
-    opacity: 0;
-    height: 100%;
-    background: linear-gradient(
-      to right,
-      var(${colorBrandBackground2}) 0%,
-      var(${colorCompoundBrandBackground}) 50%,
-      var(${colorBrandBackground2})
-    );
-    border-radius: var(${borderRadiusMedium});
-    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-    width: 60%;
-    animation: indeterminate-2 3s infinite;
-  }
-
-  @keyframes indeterminate-1 {
-    0% {
-      opacity: 1;
-      transform: translateX(-100%);
-    }
-    70% {
-      opacity: 1;
-      transform: translateX(300%);
-    }
-    70.01% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 0;
-      transform: translateX(300%);
+  @layer animations {
+    /* Disable animations for reduced motion */
+    @media (prefers-reduced-motion: no-preference) {
+      :host([value]) {
+        transition: none;
+      }
+      :host(:not([value])) .indicator {
+        animation-duration: 0.01ms;
+        animation-iteration-count: 1;
+      }
     }
   }
-  @keyframes indeterminate-2 {
+
+  @keyframes indeterminate {
     0% {
-      opacity: 0;
-      transform: translateX(-150%);
-    }
-    29.99% {
-      opacity: 0;
-    }
-    30% {
-      opacity: 1;
-      transform: translateX(-150%);
+      inset-inline-start: -33%;
     }
     100% {
-      transform: translateX(166.66%);
-      opacity: 1;
+      inset-inline-start: 100%;
     }
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    .progress {
-      background-color: HighlightText;
+    :host {
+      background-color: CanvasText;
     }
-    .determinate,
-    :host([validation-state='success']) .determinate,
-    :host([validation-state='warning']) .determinate,
-    :host([validation-state='error']) .determinate,
-    :host([validation-state='success']) ..indeterminate-indicator-1,
-    :host([validation-state='success']) ..indeterminate-indicator-2,
-    :host([validation-state='warning']) .indeterminate-indicator-1,
-    :host([validation-state='warning']) .indeterminate-indicator-2,
-    :host([validation-state='error']) .indeterminate-indicator-1,
-    :host([validation-state='error']) .indeterminate-indicator-2 {
+    .indicator,
+    :host(:is(${successState}, ${warningState}, ${errorState})) .indicator {
       background-color: Highlight;
     }
   `));

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

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;yBAMM,kBAAkB;;;;;;;;;;;;;;;;;4BAiBf,0BAA0B;;;;;;;YAO1C,0BAA0B;YAC1B,0BAA0B;YAC1B,0BAA0B;;;;;4BAKV,iCAAiC;;;;;;;YAOjD,iCAAiC;YACjC,iCAAiC;YACjC,iCAAiC;;;;;4BAKjB,4BAA4B;;;;;;;YAO5C,4BAA4B;YAC5B,4BAA4B;YAC5B,4BAA4B;;;;;4BAKZ,uBAAuB;yBAC1B,kBAAkB;;;;;;;;;4BASf,4BAA4B;yBAC/B,kBAAkB;;;;;;;;;;;;YAY/B,qBAAqB;YACrB,4BAA4B;YAC5B,qBAAqB;;yBAER,kBAAkB;;;;;;;;;;;;YAY/B,qBAAqB;YACrB,4BAA4B;YAC5B,qBAAqB;;yBAER,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC1C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE5G;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;wBAMI,uBAAuB;qBAC1B,kBAAkB;;;;UAI7B,UAAU;;;;UAIV,WAAW;qBACA,gBAAgB;;;;wBAIb,4BAA4B;;;;;;;;;;;;;;QAc5C,uBAAuB;QACvB,0BAA0B;QAC1B,uBAAuB;;;;;;;;UAQrB,UAAU;wBACI,0BAA0B;;;UAGxC,YAAY;wBACE,iCAAiC;;;UAG/C,YAAY;wBACE,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;CAwBnD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;gBAKpB,YAAY,KAAK,YAAY,KAAK,UAAU;;;GAGzD,CAAC,CACH,CAAC"}

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

@@ -1,6 +1,12 @@
-import { progressTemplate } from '@microsoft/fast-foundation/progress.js';
-export const template = progressTemplate({
-    indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
-    indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`,
-});
+import { html } from '@microsoft/fast-element';
+export function progressTemplate() {
+    return html `
+    <div
+      class="indicator"
+      part="indicator"
+      style="${x => (typeof x.value === 'number' ? `width: ${x.percentComplete}%` : void 0)}"
+    ></div>
+  `;
+}
+export const template = progressTemplate();
 //# sourceMappingURL=progress-bar.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.template.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAG1E,MAAM,CAAC,MAAM,QAAQ,GAAqC,gBAAgB,CAAC;IACzE,uBAAuB,EAAE,iFAAiF;IAC1G,uBAAuB,EAAE,kFAAkF;CAC5G,CAAC,CAAC"}
+{"version":3,"file":"progress-bar.template.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAA;;;;eAIE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;;GAExF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAqC,gBAAgB,EAAE,CAAC"}

package/dist/esm/radio/index.js

@@ -1,5 +1,5 @@
-export * from './radio.js';
 export { definition as RadioDefinition } from './radio.definition.js';
+export { Radio } from './radio.js';
 export { styles as RadioStyles } from './radio.styles.js';
 export { template as RadioTemplate } from './radio.template.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/radio/radio.bench.js

@@ -0,0 +1,11 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './radio.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const radio = document.createElement('fluent-radio');
+    radio.appendChild(document.createTextNode('Radio'));
+    return radio;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=radio.bench.js.map

package/dist/esm/radio/radio.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.bench.js","sourceRoot":"","sources":["../../../src/radio/radio.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/radio/radio.js

@@ -1,8 +1,83 @@
-import { FASTRadio } from '@microsoft/fast-foundation/radio.js';
+import { BaseCheckbox } from '../checkbox/checkbox.js';
 /**
- * The base class used for constructing a fluent-radio custom element
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
+ *
+ * @slot checked-indicator - The checked indicator slot
+ * @fires change - Emits a custom change event when the checked state changes
+ * @fires input - Emits a custom input event when the checked state changes
+ *
  * @public
  */
-export class Radio extends FASTRadio {
+export class Radio extends BaseCheckbox {
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIndex = this.disabled ? -1 : 0;
+    }
+    constructor() {
+        super();
+        this.elementInternals.role = 'radio';
+    }
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @param prev - the previous value of the `disabled` property
+     * @param next - the current value of the `disabled` property
+     * @internal
+     * @override
+     */
+    disabledChanged(prev, next) {
+        super.disabledChanged(prev, next);
+        if (next) {
+            this.checked = false;
+            this.tabIndex = -1;
+        }
+        this.$emit('disabled', next, { bubbles: true });
+    }
+    /**
+     * This method is a no-op for the radio component.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * To make a group of radio controls required, see {@link RadioGroup.required}.
+     */
+    requiredChanged() {
+        return;
+    }
+    /**
+     * This method is a no-op for the radio component.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * The radio form value is controlled by the `RadioGroup` component.
+     */
+    setFormValue() {
+        return;
+    }
+    /**
+     * Sets the validity of the control.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
+     */
+    setValidity() {
+        this.elementInternals.setValidity({});
+    }
+    /**
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     * @override
+     * @remarks
+     * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
+     */
+    toggleChecked(force = true) {
+        super.toggleChecked(force);
+    }
 }
 //# sourceMappingURL=radio.js.map

package/dist/esm/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAEhE;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,SAAS;CAAG"}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD;;;;;;;;;GASG;AACH,MAAM,OAAO,KAAM,SAAQ,YAAY;IACrC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,OAAO,CAAC;IACvC,CAAC;IAED;;;;;;;OAOG;IACO,eAAe,CAAC,IAAyB,EAAE,IAAyB;QAC5E,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAClC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SACpB;QAED,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAED;;;;;;;OAOG;IACO,eAAe;QACvB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,YAAY;QACjB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,WAAW;QAChB,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC;IAED;;;;;;;;OAQG;IACI,aAAa,CAAC,QAAiB,IAAI;QACxC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;CACF"}

package/dist/esm/radio/radio.options.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radio.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.options.js","sourceRoot":"","sources":["../../../src/radio/radio.options.ts"],"names":[],"mappings":""}

package/dist/esm/radio/radio.styles.js

@@ -1,118 +1,125 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
-import { borderRadiusCircular, borderRadiusSmall, colorCompoundBrandForeground1, colorCompoundBrandForeground1Pressed, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralForeground2, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorStrokeFocus1, colorStrokeFocus2, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingVerticalS, } from '../theme/design-tokens.js';
-/** Radio styles
+import { checkedState, disabledState } from '../styles/states/index.js';
+import { borderRadiusCircular, borderRadiusMedium, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackgroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorTransparentStroke, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
+import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
+import { display } from '../utils/display.js';
+/**
+ * Styles for the Radio component
+ *
  * @public
  */
 export const styles = css `
-  ${display('inline-grid')}
+  ${display('inline-flex')}
 
   :host {
-    grid-auto-flow: column;
-    grid-template-columns: max-content;
-    gap: var(${spacingHorizontalXS});
-    align-items: center;
-    height: 32px;
-    cursor: pointer;
-    outline: none;
-    position: relative;
-    user-select: none;
-    color: blue;
-    color: var(--state-color, var(${colorNeutralForeground3}));
-    padding-inline-end: var(${spacingHorizontalS});
-    --control-border-color: var(${colorNeutralStrokeAccessible});
-    --checked-indicator-background-color: var(${colorCompoundBrandForeground1});
-    --state-color: var(${colorNeutralForeground3});
-  }
-  :host([disabled]) {
-    --control-border-color: var(${colorNeutralForegroundDisabled});
-    --checked-indicator-background-color: var(${colorNeutralForegroundDisabled});
-    --state-color: var(${colorNeutralForegroundDisabled});
-  }
-  .label {
-    cursor: pointer;
-    font-family: var(${fontFamilyBase});
-    font-size: var(${fontSizeBase300});
-    font-weight: var(${fontWeightRegular});
-    line-height: var(${lineHeightBase300});
-  }
-  .label__hidden {
-    display: none;
-  }
-  .control {
+    --size: 16px;
+    aspect-ratio: 1;
+    background-color: ${colorNeutralBackground1};
+    border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
+    border-radius: ${borderRadiusCircular};
     box-sizing: border-box;
-    align-items: center;
-    border: 1px solid var(--control-border-color, var(${colorNeutralStrokeAccessible}));
-    border-radius: var(${borderRadiusCircular});
-    display: flex;
-    height: 16px;
-    justify-content: center;
-    margin: var(${spacingVerticalS}) var(${spacingHorizontalS});
     position: relative;
-    width: 16px;
-    justify-self: center;
+    width: var(--size);
   }
-  .checked-indicator {
-    border-radius: var(${borderRadiusCircular});
-    height: 10px;
-    opacity: 0;
-    width: 10px;
-  }
-  :host([aria-checked='false']:hover) .control {
-    color: var(${colorNeutralForeground2});
-  }
-  :host(:focus-visible) {
-    border-radius: var(${borderRadiusSmall});
-    box-shadow: 0 0 0 3px var(${colorStrokeFocus2});
-    outline: 1px solid var(${colorStrokeFocus1});
+
+  :host([size='large']) {
+    --size: 20px;
   }
-  :host(:hover) .control {
-    border-color: var(${colorNeutralStrokeAccessibleHover});
+
+  .checked-indicator {
+    aspect-ratio: 1;
+    border-radius: ${borderRadiusCircular};
+    color: ${colorNeutralForegroundInverted};
+    inset: 0;
+    margin: auto;
+    position: absolute;
+    width: calc(var(--size) * 0.625);
   }
-  :host(:active) .control {
-    border-color: var(${colorNeutralStrokeAccessiblePressed});
+
+  :host(:not([slot='input']))::after {
+    content: '' / '';
+    position: absolute;
+    display: block;
+    inset: -8px;
+    box-sizing: border-box;
+    outline: none;
+    border: ${strokeWidthThick} solid ${colorTransparentStroke};
+    border-radius: ${borderRadiusMedium};
   }
-  :host([aria-checked='true']) .checked-indicator {
-    opacity: 1;
+
+  :host(:not([slot='input']):focus-visible)::after {
+    border-color: ${colorStrokeFocus2};
   }
-  :host([aria-checked='true']) .control {
-    border-color: var(--control-border-color, var(${colorNeutralStrokeAccessible}));
+
+  :host(:hover) {
+    border-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host([aria-checked='true']) .checked-indicator {
-    background-color: var(--checked-indicator-background-color, var(${colorCompoundBrandForeground1}));
+
+  :host(${checkedState}) {
+    border-color: ${colorCompoundBrandStroke};
   }
-  :host([aria-checked='true']:hover) .control {
-    border-color: var(${colorCompoundBrandStrokeHover});
+
+  :host(${checkedState}) .checked-indicator {
+    background-color: ${colorCompoundBrandBackground};
   }
-  :host([aria-checked='true']:hover) .checked-indicator {
-    background-color: var(${colorCompoundBrandStrokeHover});
+
+  :host(${checkedState}:hover) .checked-indicator {
+    background-color: ${colorCompoundBrandBackgroundHover};
   }
-  :host([aria-checked='true']:active) .control {
-    border-color: var(${colorCompoundBrandStrokePressed});
+
+  :host(:active) {
+    border-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host([aria-checked='true']:active) .checked-indicator {
-    background: var(${colorCompoundBrandForeground1Pressed});
+
+  :host(${checkedState}:active) .checked-indicator {
+    background-color: ${colorCompoundBrandBackgroundPressed};
   }
-  :host([disabled]) {
-    color: var(${colorNeutralForegroundDisabled});
-    pointer-events: none;
+
+  :host(:focus-visible) {
+    outline: none;
   }
-  :host([disabled]) .control {
-    pointer-events: none;
-    border-color: var(${colorNeutralForegroundDisabled});
+
+  :host(${disabledState}) {
+    background-color: ${colorNeutralBackgroundDisabled};
+    border-color: ${colorNeutralStrokeDisabled};
   }
-  :host([disabled]) .checked-indicator {
-    background: var(${colorNeutralForegroundDisabled});
+
+  :host(${checkedState}${disabledState}) .checked-indicator {
+    background-color: ${colorNeutralStrokeDisabled};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host .control {
-      border-color: InactiveBorder;
+    :host {
+      border-color: FieldText;
+    }
+
+    :host(:not([slot='input']:focus-visible))::after {
+      border-color: Canvas;
+    }
+
+    :host(:not(${disabledState}):hover),
+    :host(:not([slot='input']):focus-visible)::after {
+      border-color: Highlight;
+    }
+
+    .checked-indicator {
+      color: HighlightText;
+    }
+
+    :host(${checkedState}) .checked-indicator {
+      background-color: FieldText;
     }
-    :host([aria-checked='true']) .checked-indicator,
-    :host([aria-checked='true']:active) .checked-indicator,
-    :host([aria-checked='true']:hover) .checked-indicator {
+
+    :host(${checkedState}:not(${disabledState}):hover) .checked-indicator {
       background-color: Highlight;
-      border-color: ActiveBorder;
+    }
+
+    :host(${disabledState}) {
+      border-color: GrayText;
+      color: GrayText;
+    }
+
+    :host(${disabledState}${checkedState}) .checked-indicator {
+      background-color: GrayText;
     }
   `));
 //# sourceMappingURL=radio.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,6BAA6B,EAC7B,oCAAoC,EACpC,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;eAKX,mBAAmB;;;;;;;;oCAQE,uBAAuB;8BAC7B,kBAAkB;kCACd,4BAA4B;gDACd,6BAA6B;yBACpD,uBAAuB;;;kCAGd,8BAA8B;gDAChB,8BAA8B;yBACrD,8BAA8B;;;;uBAIhC,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;;;;;wDAQgB,4BAA4B;yBAC3D,oBAAoB;;;;kBAI3B,gBAAgB,SAAS,kBAAkB;;;;;;yBAMpC,oBAAoB;;;;;;iBAM5B,uBAAuB;;;yBAGf,iBAAiB;gCACV,iBAAiB;6BACpB,iBAAiB;;;wBAGtB,iCAAiC;;;wBAGjC,mCAAmC;;;;;;oDAMP,4BAA4B;;;sEAGV,6BAA6B;;;wBAG3E,6BAA6B;;;4BAGzB,6BAA6B;;;wBAGjC,+BAA+B;;;sBAGjC,oCAAoC;;;iBAGzC,8BAA8B;;;;;wBAKvB,8BAA8B;;;sBAGhC,8BAA8B;;CAEnD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;wBAKF,uBAAuB;cACjC,eAAe,UAAU,4BAA4B;qBAC9C,oBAAoB;;;;;;;;;;;;qBAYpB,oBAAoB;aAC5B,8BAA8B;;;;;;;;;;;;;;cAc7B,gBAAgB,UAAU,sBAAsB;qBACzC,kBAAkB;;;;oBAInB,iBAAiB;;;;oBAIjB,iCAAiC;;;UAG3C,YAAY;oBACF,wBAAwB;;;UAGlC,YAAY;wBACE,4BAA4B;;;UAG1C,YAAY;wBACE,iCAAiC;;;;oBAIrC,mCAAmC;;;UAG7C,YAAY;wBACE,mCAAmC;;;;;;;UAOjD,aAAa;wBACC,8BAA8B;oBAClC,0BAA0B;;;UAGpC,YAAY,GAAG,aAAa;wBACd,0BAA0B;;CAEjD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;iBASnB,aAAa;;;;;;;;;YASlB,YAAY;;;;YAIZ,YAAY,QAAQ,aAAa;;;;YAIjC,aAAa;;;;;YAKb,aAAa,GAAG,YAAY;;;GAGrC,CAAC,CACH,CAAC"}

package/dist/esm/radio/radio.template.js

@@ -1,6 +1,29 @@
 import { html } from '@microsoft/fast-element';
-import { radioTemplate } from '@microsoft/fast-foundation/radio.js';
-export const template = radioTemplate({
-    checkedIndicator: html `<div part="checked-indicator" class="checked-indicator"></div>`,
-});
+import { staticallyCompose } from '../utils/index.js';
+const checkedIndicator = html.partial(/* html */ `
+    <span part="checked-indicator" class="checked-indicator" role="presentation"></span>
+`);
+/**
+ * Generates a template for the {@link (Radio:class)} component.
+ *
+ * @param options - Radio configuration options
+ * @public
+ */
+export function radioTemplate(options = {}) {
+    return html `
+    <template
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
+      @keyup="${(x, c) => x.keyupHandler(c.event)}"
+    >
+      <slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot>
+    </template>
+  `;
+}
+/**
+ * Template for the Radio component
+ *
+ * @public
+ */
+export const template = radioTemplate({ checkedIndicator });
 //# sourceMappingURL=radio.template.js.map

package/dist/esm/radio/radio.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.template.js","sourceRoot":"","sources":["../../../src/radio/radio.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAGpE,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,CAAC;IAChE,gBAAgB,EAAE,IAAI,CAAA,gEAAgE;CACvF,CAAC,CAAC"}
+{"version":3,"file":"radio.template.js","sourceRoot":"","sources":["../../../src/radio/radio.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;;CAEhD,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAkB,UAAwB,EAAE;IACvE,OAAO,IAAI,CAAG;;gBAEA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;gBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAsB,CAAC;;uCAE3B,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;;GAE/E,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC"}