@ni/nimble-components 32.9.2 → 32.10.0

package/dist/esm/patterns/required-visible/template.js

@@ -0,0 +1,20 @@
+import { html, when } from '@microsoft/fast-element';
+import { iconAsteriskTag } from '../../icons/asterisk';
+/**
+ * Given the template for a control label, creates a new template that includes
+ * an icon next to the label to indicate whether or not the control is required.
+ *
+ * This function is intended to be used with components leveraging `mixinRequiredVisiblePattern`.
+ */
+/* eslint-disable @typescript-eslint/indent */
+export function createRequiredVisibleLabelTemplate(labelTemplate) {
+    return html `
+        <div class="annotated-label">
+            ${labelTemplate}
+            ${when(x => x.requiredVisible, html `
+                <${iconAsteriskTag} class="required-icon" severity="error"></${iconAsteriskTag}>
+            `)}
+        </div>
+    `;
+}
+//# sourceMappingURL=template.js.map

package/dist/esm/patterns/required-visible/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/required-visible/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD;;;;;GAKG;AACH,8CAA8C;AAC9C,MAAM,UAAU,kCAAkC,CAC9C,aAAmD;IAEnD,OAAO,IAAI,CAAA;;cAED,aAAa;cACb,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EACtB,IAAI,CAAA;mBACD,eAAe,6CAA6C,eAAe;aACjF,CACA;;KAER,CAAC;AACN,CAAC","sourcesContent":["import { ViewTemplate, html, when } from '@microsoft/fast-element';\nimport { iconAsteriskTag } from '../../icons/asterisk';\nimport type { RequiredVisiblePattern } from './types';\n\n/**\n * Given the template for a control label, creates a new template that includes\n * an icon next to the label to indicate whether or not the control is required.\n *\n * This function is intended to be used with components leveraging `mixinRequiredVisiblePattern`.\n */\n/* eslint-disable @typescript-eslint/indent */\nexport function createRequiredVisibleLabelTemplate(\n    labelTemplate: ViewTemplate<RequiredVisiblePattern>\n): ViewTemplate<RequiredVisiblePattern> {\n    return html`\n        <div class=\"annotated-label\">\n            ${labelTemplate}\n            ${when(\n                x => x.requiredVisible,\n                html`\n                <${iconAsteriskTag} class=\"required-icon\" severity=\"error\"></${iconAsteriskTag}>\n            `\n            )}\n        </div>\n    `;\n}\n"]}

package/dist/esm/patterns/required-visible/testing/required-visible-pattern.pageobject.d.ts

@@ -0,0 +1,10 @@
+import type { FoundationElement } from '@microsoft/fast-foundation';
+/**
+ * A page object for the elements that use the required-visible mixin.
+ */
+export declare class RequiredVisiblePatternPageObject {
+    private readonly element;
+    constructor(element: FoundationElement);
+    isRequiredVisibleIconVisible(): boolean;
+    private getRequiredVisibleIcon;
+}

package/dist/esm/patterns/required-visible/testing/required-visible-pattern.pageobject.js

@@ -0,0 +1,19 @@
+/**
+ * A page object for the elements that use the required-visible mixin.
+ */
+export class RequiredVisiblePatternPageObject {
+    constructor(element) {
+        this.element = element;
+    }
+    isRequiredVisibleIconVisible() {
+        const icon = this.getRequiredVisibleIcon();
+        if (!icon) {
+            return false;
+        }
+        return getComputedStyle(icon).display !== 'none';
+    }
+    getRequiredVisibleIcon() {
+        return this.element.shadowRoot.querySelector('.required-icon');
+    }
+}
+//# sourceMappingURL=required-visible-pattern.pageobject.js.map

package/dist/esm/patterns/required-visible/testing/required-visible-pattern.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"required-visible-pattern.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/required-visible/testing/required-visible-pattern.pageobject.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAO,gCAAgC;IACzC,YAAoC,OAA0B;QAA1B,YAAO,GAAP,OAAO,CAAmB;IAAG,CAAC;IAE3D,4BAA4B;QAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC3C,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO,KAAK,CAAC;QACjB,CAAC;QACD,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC;IACrD,CAAC;IAEO,sBAAsB;QAC1B,OAAO,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;CACJ","sourcesContent":["import type { FoundationElement } from '@microsoft/fast-foundation';\n\n/**\n * A page object for the elements that use the required-visible mixin.\n */\nexport class RequiredVisiblePatternPageObject {\n    public constructor(private readonly element: FoundationElement) {}\n\n    public isRequiredVisibleIconVisible(): boolean {\n        const icon = this.getRequiredVisibleIcon();\n        if (!icon) {\n            return false;\n        }\n        return getComputedStyle(icon).display !== 'none';\n    }\n\n    private getRequiredVisibleIcon(): HTMLElement | null {\n        return this.element.shadowRoot!.querySelector('.required-icon');\n    }\n}\n"]}

package/dist/esm/patterns/required-visible/types.d.ts

@@ -0,0 +1,17 @@
+import { FASTElement } from '@microsoft/fast-element';
+export interface RequiredVisiblePattern {
+    /**
+     * Whether or not to show the required appearance of the control
+     */
+    requiredVisible: boolean;
+}
+type FASTElementConstructor = abstract new (...args: any[]) => FASTElement;
+export declare function mixinRequiredVisiblePattern<TBase extends FASTElementConstructor>(base: TBase): (abstract new (...args: any[]) => {
+    requiredVisible: boolean;
+    readonly $fastController: import("@microsoft/fast-element").Controller;
+    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}) & TBase;
+export {};

package/dist/esm/patterns/required-visible/types.js

@@ -0,0 +1,21 @@
+import { attr } from '@microsoft/fast-element';
+// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+export function mixinRequiredVisiblePattern(base) {
+    /**
+     * The Mixin that provides the requiredVisible property and required-visible attribute
+     * to a component.
+     */
+    class RequiredVisibleElement extends base {
+        constructor() {
+            super(...arguments);
+            /*
+             * Show the required appearance of the control
+             */
+            this.requiredVisible = false;
+        }
+    }
+    attr({ attribute: 'required-visible', mode: 'boolean' })(RequiredVisibleElement.prototype, 'requiredVisible');
+    return RequiredVisibleElement;
+}
+//# sourceMappingURL=types.js.map

package/dist/esm/patterns/required-visible/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/required-visible/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAe,MAAM,yBAAyB,CAAC;AAY5D,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,2BAA2B,CAEzC,IAAW;IACT;;;OAGG;IACH,MAAe,sBACX,SAAQ,IAAI;QADhB;;YAGI;;eAEG;YACI,oBAAe,GAAG,KAAK,CAAC;QACnC,CAAC;KAAA;IAED,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CACpD,sBAAsB,CAAC,SAAS,EAChC,iBAAiB,CACpB,CAAC;IACF,OAAO,sBAAsB,CAAC;AAClC,CAAC","sourcesContent":["import { attr, FASTElement } from '@microsoft/fast-element';\n\nexport interface RequiredVisiblePattern {\n    /**\n     * Whether or not to show the required appearance of the control\n     */\n    requiredVisible: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FASTElementConstructor = abstract new (...args: any[]) => FASTElement;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinRequiredVisiblePattern<\n    TBase extends FASTElementConstructor\n>(base: TBase) {\n    /**\n     * The Mixin that provides the requiredVisible property and required-visible attribute\n     * to a component.\n     */\n    abstract class RequiredVisibleElement\n        extends base\n        implements RequiredVisiblePattern {\n        /*\n         * Show the required appearance of the control\n         */\n        public requiredVisible = false;\n    }\n\n    attr({ attribute: 'required-visible', mode: 'boolean' })(\n        RequiredVisibleElement.prototype,\n        'requiredVisible'\n    );\n    return RequiredVisibleElement;\n}\n"]}

package/dist/esm/radio-group/index.d.ts

@@ -15,6 +15,13 @@ declare const RadioGroup_base: (abstract new (...args: any[]) => {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}) & (abstract new (...args: any[]) => {
+    requiredVisible: boolean;
+    readonly $fastController: import("@microsoft/fast-element").Controller;
+    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
 }) & typeof FoundationRadioGroup;
 /**
  * A nimble-styled grouping element for radio buttons

package/dist/esm/radio-group/index.js

@@ -3,11 +3,12 @@ import { Orientation } from '@microsoft/fast-web-utilities';
 import { styles } from './styles';
 import { template } from './template';
 import { mixinErrorPattern } from '../patterns/error/types';
+import { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';
 export { Orientation };
 /**
  * A nimble-styled grouping element for radio buttons
  */
-export class RadioGroup extends mixinErrorPattern(FoundationRadioGroup) {
+export class RadioGroup extends mixinErrorPattern(mixinRequiredVisiblePattern(FoundationRadioGroup)) {
 }
 const nimbleRadioGroup = RadioGroup.compose({
     baseName: 'radio-group',

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,IAAI,oBAAoB,EAClC,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQ5D,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,iBAAiB,CAAC,oBAAoB,CAAC;CAAG;AAE1E,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    RadioGroup as FoundationRadioGroup,\n    DesignSystem\n} from '@microsoft/fast-foundation';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { mixinErrorPattern } from '../patterns/error/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-radio-group': RadioGroup;\n    }\n}\n\nexport { Orientation };\n\n/**\n * A nimble-styled grouping element for radio buttons\n */\nexport class RadioGroup extends mixinErrorPattern(FoundationRadioGroup) {}\n\nconst nimbleRadioGroup = RadioGroup.compose({\n    baseName: 'radio-group',\n    baseClass: FoundationRadioGroup,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());\nexport const radioGroupTag = 'nimble-radio-group';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,IAAI,oBAAoB,EAClC,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,iBAAiB,CAC7C,2BAA2B,CAAC,oBAAoB,CAAC,CACpD;CAAG;AAEJ,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    RadioGroup as FoundationRadioGroup,\n    DesignSystem\n} from '@microsoft/fast-foundation';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-radio-group': RadioGroup;\n    }\n}\n\nexport { Orientation };\n\n/**\n * A nimble-styled grouping element for radio buttons\n */\nexport class RadioGroup extends mixinErrorPattern(\n    mixinRequiredVisiblePattern(FoundationRadioGroup)\n) {}\n\nconst nimbleRadioGroup = RadioGroup.compose({\n    baseName: 'radio-group',\n    baseClass: FoundationRadioGroup,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());\nexport const radioGroupTag = 'nimble-radio-group';\n"]}

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

@@ -2,9 +2,11 @@ import { css } from '@microsoft/fast-element';
 import { display } from '../utilities/style/display';
 import { controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, controlLabelFontLineHeight, smallPadding, standardPadding } from '../theme-provider/design-tokens';
 import { styles as errorStyles } from '../patterns/error/styles';
+import { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';
 export const styles = css `
     ${display('inline-block')}
     ${errorStyles}
+    ${requiredVisibleStyles}
 
     .positioning-region {
         display: flex;
@@ -22,7 +24,7 @@ export const styles = css `
 
     .label-container {
         display: flex;
-        height: ${controlLabelFontLineHeight};
+        min-height: ${controlLabelFontLineHeight};
         gap: ${smallPadding};
         margin-bottom: ${smallPadding};
     }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio-group/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,0BAA0B,EAC1B,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;;eAIF,eAAe;;;;;;;;;;;;;;kBAcZ,0BAA0B;eAC7B,YAAY;yBACF,YAAY;;;;gBAIrB,gBAAgB;iBACf,qBAAqB;;;;iBAIrB,6BAA6B;;;;;wBAKtB,YAAY;;CAEnC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    controlLabelFontLineHeight,\n    smallPadding,\n    standardPadding\n} from '../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../patterns/error/styles';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n\n    .positioning-region {\n        display: flex;\n        gap: ${standardPadding};\n        position: relative;\n    }\n\n    :host([orientation='vertical']) .positioning-region {\n        flex-direction: column;\n    }\n\n    :host([orientation='horizontal']) .positioning-region {\n        flex-direction: row;\n    }\n\n    .label-container {\n        display: flex;\n        height: ${controlLabelFontLineHeight};\n        gap: ${smallPadding};\n        margin-bottom: ${smallPadding};\n    }\n\n    slot[name='label'] {\n        font: ${controlLabelFont};\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) slot[name='label'] {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .error-icon {\n        margin-left: auto;\n        margin-right: ${smallPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio-group/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,0BAA0B,EAC1B,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAEtF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;;eAIZ,eAAe;;;;;;;;;;;;;;sBAcR,0BAA0B;eACjC,YAAY;yBACF,YAAY;;;;gBAIrB,gBAAgB;iBACf,qBAAqB;;;;iBAIrB,6BAA6B;;;;;wBAKtB,YAAY;;CAEnC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    controlLabelFontLineHeight,\n    smallPadding,\n    standardPadding\n} from '../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    .positioning-region {\n        display: flex;\n        gap: ${standardPadding};\n        position: relative;\n    }\n\n    :host([orientation='vertical']) .positioning-region {\n        flex-direction: column;\n    }\n\n    :host([orientation='horizontal']) .positioning-region {\n        flex-direction: row;\n    }\n\n    .label-container {\n        display: flex;\n        min-height: ${controlLabelFontLineHeight};\n        gap: ${smallPadding};\n        margin-bottom: ${smallPadding};\n    }\n\n    slot[name='label'] {\n        font: ${controlLabelFont};\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) slot[name='label'] {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .error-icon {\n        margin-left: auto;\n        margin-right: ${smallPadding};\n    }\n`;\n"]}

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

@@ -2,18 +2,21 @@ import { elements, html, slotted } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import { errorTextTemplate } from '../patterns/error/template';
 import { iconExclamationMarkTag } from '../icons/exclamation-mark';
+import { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';
+const labelTemplate = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
 /* eslint-disable @typescript-eslint/indent */
 export const template = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
         aria-readonly="${x => x.readOnly}"
+        aria-required="${x => x.requiredVisible}"
         @click="${(x, c) => x.clickHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         @focusout="${(x, c) => x.focusOutHandler(c.event)}"
     >
         <div class="label-container">
-            <slot name="label"></slot>            
+            ${labelTemplate}
             <${iconExclamationMarkTag}
                 severity="error"
                 class="error-icon"

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/radio-group/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,8CAA8C;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;;yBAGf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACtB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;qBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;eAIxD,sBAAsB;;;iBAGpB,sBAAsB;;;wCAGC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;;;;kBAIjG,OAAO,CAAC;IACN,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC;CACnC,CAAC;;cAEJ,iBAAiB;;;CAG9B,CAAC","sourcesContent":["import { elements, html, slotted } from '@microsoft/fast-element';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport type { RadioGroup } from '.';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\n\n/* eslint-disable @typescript-eslint/indent */\nexport const template = html<RadioGroup>`\n    <template\n        role=\"radiogroup\"\n        aria-disabled=\"${x => x.disabled}\"\n        aria-readonly=\"${x => x.readOnly}\"\n        @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n        @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n        @focusout=\"${(x, c) => x.focusOutHandler(c.event as FocusEvent)}\"\n    >\n        <div class=\"label-container\">\n            <slot name=\"label\"></slot>            \n            <${iconExclamationMarkTag}\n                severity=\"error\"\n                class=\"error-icon\"\n            ></${iconExclamationMarkTag}>\n        </div>\n        <div\n            class=\"positioning-region ${x => (x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical')}\"\n            part=\"positioning-region\"\n        >\n            <slot\n                ${slotted({\n                    property: 'slottedRadioButtons',\n                    filter: elements('[role=radio]')\n                })}\n            ></slot>\n            ${errorTextTemplate}\n        </div>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/radio-group/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,kCAAkC,EAAE,MAAM,uCAAuC,CAAC;AAE3F,MAAM,aAAa,GAAG,kCAAkC,CACpD,IAAI,CAAY,4BAA4B,CAC/C,CAAC;AAEF,8CAA8C;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;;yBAGf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;kBAC7B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;qBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;;cAGzD,aAAa;eACZ,sBAAsB;;;iBAGpB,sBAAsB;;;wCAGC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;;;;kBAIjG,OAAO,CAAC;IACN,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC;CACnC,CAAC;;cAEJ,iBAAiB;;;CAG9B,CAAC","sourcesContent":["import { elements, html, slotted } from '@microsoft/fast-element';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport type { RadioGroup } from '.';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';\n\nconst labelTemplate = createRequiredVisibleLabelTemplate(\n    html<RadioGroup>`<slot name=\"label\"></slot>`\n);\n\n/* eslint-disable @typescript-eslint/indent */\nexport const template = html<RadioGroup>`\n    <template\n        role=\"radiogroup\"\n        aria-disabled=\"${x => x.disabled}\"\n        aria-readonly=\"${x => x.readOnly}\"\n        aria-required=\"${x => x.requiredVisible}\"\n        @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n        @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n        @focusout=\"${(x, c) => x.focusOutHandler(c.event as FocusEvent)}\"\n    >\n        <div class=\"label-container\">\n            ${labelTemplate}\n            <${iconExclamationMarkTag}\n                severity=\"error\"\n                class=\"error-icon\"\n            ></${iconExclamationMarkTag}>\n        </div>\n        <div\n            class=\"positioning-region ${x => (x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical')}\"\n            part=\"positioning-region\"\n        >\n            <slot\n                ${slotted({\n                    property: 'slottedRadioButtons',\n                    filter: elements('[role=radio]')\n                })}\n            ></slot>\n            ${errorTextTemplate}\n        </div>\n    </template>\n`;\n"]}

package/dist/esm/select/index.d.ts

@@ -18,6 +18,13 @@ declare const Select_base: (abstract new (...args: any[]) => {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}) & (abstract new (...args: any[]) => {
+    requiredVisible: boolean;
+    readonly $fastController: import("@microsoft/fast-element").Controller;
+    $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
 }) & typeof FormAssociatedSelect;
 /**
  * A nimble-styled HTML select.

package/dist/esm/select/index.js

@@ -14,6 +14,7 @@ import { FilterMode } from './types';
 import { diacriticInsensitiveStringNormalizer } from '../utilities/models/string-normalizers';
 import { FormAssociatedSelect } from './models/select-form-associated';
 import { slotTextContent } from '../utilities/models/slot-text-content';
+import { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';
 const isOptionSelectable = (el) => {
     return !el.visuallyHidden && !el.disabled && !el.hidden;
 };
@@ -26,7 +27,7 @@ const isOptionOrGroupVisible = (el) => {
 /**
  * A nimble-styled HTML select.
  */
-export class Select extends mixinErrorPattern(FormAssociatedSelect) {
+export class Select extends mixinErrorPattern(mixinRequiredVisiblePattern(FormAssociatedSelect)) {
     constructor() {
         super(...arguments);
         this.appearance = DropdownAppearance.underline;