@fluentui/web-components 3.0.0-beta.39 → 3.0.0-beta.40

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

@@ -1,118 +1,125 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.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: ${spacingHorizontalXS};
-    align-items: center;
-    height: 32px;
-    cursor: pointer;
-    outline: none;
-    position: relative;
-    user-select: none;
-    color: blue;
-    color: var(--state-color, ${colorNeutralForeground3});
-    padding-inline-end: ${spacingHorizontalS};
-    --control-border-color: ${colorNeutralStrokeAccessible};
-    --checked-indicator-background-color: ${colorCompoundBrandForeground1};
-    --state-color: ${colorNeutralForeground3};
-  }
-  :host([disabled]) {
-    --control-border-color: ${colorNeutralForegroundDisabled};
-    --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
-    --state-color: ${colorNeutralForegroundDisabled};
-  }
-  .label {
-    cursor: pointer;
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
-  }
-  .label__hidden {
-    display: none;
-  }
-  .control {
-    box-sizing: border-box;
-    align-items: center;
-    border: 1px solid var(--control-border-color, ${colorNeutralStrokeAccessible});
+    --size: 16px;
+    aspect-ratio: 1;
+    background-color: ${colorNeutralBackground1};
+    border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
     border-radius: ${borderRadiusCircular};
-    display: flex;
-    height: 16px;
-    justify-content: center;
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
+    box-sizing: border-box;
     position: relative;
-    width: 16px;
-    justify-self: center;
+    width: var(--size);
+  }
+
+  :host([size='large']) {
+    --size: 20px;
   }
+
   .checked-indicator {
+    aspect-ratio: 1;
     border-radius: ${borderRadiusCircular};
-    height: 10px;
-    opacity: 0;
-    width: 10px;
+    color: ${colorNeutralForegroundInverted};
+    inset: 0;
+    margin: auto;
+    position: absolute;
+    width: calc(var(--size) * 0.625);
   }
-  :host([aria-checked='false']:hover) .control {
-    color: ${colorNeutralForeground2};
+
+  :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(:focus-visible) {
-    border-radius: ${borderRadiusSmall};
-    box-shadow: 0 0 0 3px ${colorStrokeFocus2};
-    outline: 1px solid ${colorStrokeFocus1};
+
+  :host(:not([slot='input']):focus-visible)::after {
+    border-color: ${colorStrokeFocus2};
   }
-  :host(:hover) .control {
+
+  :host(:hover) {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host(:active) .control {
-    border-color: ${colorNeutralStrokeAccessiblePressed};
-  }
-  :host([aria-checked='true']) .checked-indicator {
-    opacity: 1;
-  }
-  :host([aria-checked='true']) .control {
-    border-color: var(--control-border-color, ${colorNeutralStrokeAccessible});
-  }
-  :host([aria-checked='true']) .checked-indicator {
-    background-color: var(--checked-indicator-background-color, ${colorCompoundBrandForeground1});
+
+  :host(${checkedState}) {
+    border-color: ${colorCompoundBrandStroke};
   }
-  :host([aria-checked='true']:hover) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
+
+  :host(${checkedState}) .checked-indicator {
+    background-color: ${colorCompoundBrandBackground};
   }
-  :host([aria-checked='true']:hover) .checked-indicator {
-    background-color: ${colorCompoundBrandStrokeHover};
+
+  :host(${checkedState}:hover) .checked-indicator {
+    background-color: ${colorCompoundBrandBackgroundHover};
   }
-  :host([aria-checked='true']:active) .control {
-    border-color: ${colorCompoundBrandStrokePressed};
+
+  :host(:active) {
+    border-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host([aria-checked='true']:active) .checked-indicator {
-    background: ${colorCompoundBrandForeground1Pressed};
+
+  :host(${checkedState}:active) .checked-indicator {
+    background-color: ${colorCompoundBrandBackgroundPressed};
   }
-  :host([disabled]) {
-    color: ${colorNeutralForegroundDisabled};
-    pointer-events: none;
+
+  :host(:focus-visible) {
+    outline: none;
   }
-  :host([disabled]) .control {
-    pointer-events: none;
-    border-color: ${colorNeutralForegroundDisabled};
+
+  :host(${disabledState}) {
+    background-color: ${colorNeutralBackgroundDisabled};
+    border-color: ${colorNeutralStrokeDisabled};
   }
-  :host([disabled]) .checked-indicator {
-    background: ${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([aria-checked='true']) .checked-indicator,
-    :host([aria-checked='true']:active) .checked-indicator,
-    :host([aria-checked='true']:hover) .checked-indicator {
+
+    :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(${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,mBAAmB,CAAC;AAC5E,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;;;;;WAKf,mBAAmB;;;;;;;;gCAQE,uBAAuB;0BAC7B,kBAAkB;8BACd,4BAA4B;4CACd,6BAA6B;qBACpD,uBAAuB;;;8BAGd,8BAA8B;4CAChB,8BAA8B;qBACrD,8BAA8B;;;;mBAIhC,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;oDAQgB,4BAA4B;qBAC3D,oBAAoB;;;;cAI3B,gBAAgB,IAAI,kBAAkB;;;;;;qBAM/B,oBAAoB;;;;;;aAM5B,uBAAuB;;;qBAGf,iBAAiB;4BACV,iBAAiB;yBACpB,iBAAiB;;;oBAGtB,iCAAiC;;;oBAGjC,mCAAmC;;;;;;gDAMP,4BAA4B;;;kEAGV,6BAA6B;;;oBAG3E,6BAA6B;;;wBAGzB,6BAA6B;;;oBAGjC,+BAA+B;;;kBAGjC,oCAAoC;;;aAGzC,8BAA8B;;;;;oBAKvB,8BAA8B;;;kBAGhC,8BAA8B;;CAE/C,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,32 +1,29 @@
-import { html, slotted } from '@microsoft/fast-element';
-import { staticallyCompose, whitespaceFilter } from '../utils/index.js';
+import { html } from '@microsoft/fast-element';
+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
-      role="radio"
-      aria-checked="${x => x.checked}"
-      aria-required="${x => x.required}"
-      aria-disabled="${x => x.disabled}"
-      @keypress="${(x, c) => x.keypressHandler(c.event)}"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
+      @keyup="${(x, c) => x.keyupHandler(c.event)}"
     >
-      <div part="control" class="control">
-        <slot name="checked-indicator"> ${staticallyCompose(options.checkedIndicator)} </slot>
-      </div>
-      <label
-        part="label"
-        class="${x => { var _a; return ['label', !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length) && 'label__hidden'].filter(Boolean).join(' '); }}"
-      >
-        <slot
-          ${slotted({
-        property: 'defaultSlottedNodes',
-        filter: whitespaceFilter,
-    })}
-        ></slot>
-      </label>
+      <slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot>
     </template>
   `;
 }
-export const template = radioTemplate({
-    checkedIndicator: html `<div part="checked-indicator" class="checked-indicator"></div>`,
-});
+/**
+ * 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,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGxE,MAAM,UAAU,aAAa,CAAkB,UAAwB,EAAE;IACvE,OAAO,IAAI,CAAG;;;sBAGM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;uBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;;0CAG9B,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;;;;iBAIpE,CAAC,CAAC,EAAE,WAAC,OAAA,CAAC,OAAO,EAAE,CAAC,CAAA,MAAA,CAAC,CAAC,mBAAmB,0CAAE,MAAM,CAAA,IAAI,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,EAAA;;;YAGhG,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;GAIT,CAAC;AACJ,CAAC;AAED,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"}