@ni/nimble-components 11.13.1 → 11.14.0

package/dist/esm/all-components.d.ts

@@ -18,6 +18,8 @@ import './menu';
 import './menu-button';
 import './menu-item';
 import './number-field';
+import './radio-button';
+import './radio-group';
 import './select';
 import './switch';
 import './tab';

package/dist/esm/all-components.js

@@ -18,6 +18,8 @@ import './menu';
 import './menu-button';
 import './menu-item';
 import './number-field';
+import './radio-button';
+import './radio-group';
 import './select';
 import './switch';
 import './tab';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/checkbox/styles.js

@@ -55,7 +55,7 @@ export const styles = css `
     :host(${focusVisible}) .control {
         border-color: ${borderHoverColor};
         outline: 2px solid ${borderHoverColor};
-        outline-offset: 2px;
+        outline-offset: 1px;
     }
 
     .label {

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

@@ -0,0 +1,11 @@
+import { Radio as FoundationRadio } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-radio-button': RadioButton;
+    }
+}
+/**
+ * A nimble-styled radio button
+ */
+export declare class RadioButton extends FoundationRadio {
+}

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

@@ -0,0 +1,17 @@
+import { Radio as FoundationRadio, radioTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
+import { circleFilled16X16 } from '@ni/nimble-tokens/dist/icons/js';
+import { styles } from './styles';
+/**
+ * A nimble-styled radio button
+ */
+export class RadioButton extends FoundationRadio {
+}
+const nimbleRadioButton = RadioButton.compose({
+    baseName: 'radio-button',
+    baseClass: FoundationRadio,
+    template,
+    styles,
+    checkedIndicator: circleFilled16X16.data
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioButton());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,IAAI,eAAe,EACxB,aAAa,IAAI,QAAQ,EACzB,YAAY,EAEf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,eAAe;CAAG;AAEnD,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAe;IACxD,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,eAAe;IAC1B,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,iBAAiB,CAAC,IAAI;CAC3C,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}

package/dist/esm/radio-button/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,95 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { bodyDisabledFontColor, bodyFontColor, borderColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonLabelFont, controlHeight, iconSize, smallDelay } from '../theme-provider/design-tokens';
+import { focusVisible } from '../utilities/style/focus';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        font: ${buttonLabelFont};
+        align-items: center;
+        outline: none;
+        width: fit-content;
+        cursor: pointer;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+    }
+
+    .control {
+        width: calc(${controlHeight} / 2);
+        height: calc(${controlHeight} / 2);
+        box-sizing: border-box;
+        flex-shrink: 0;
+        border: ${borderWidth} solid ${borderColor};
+        border-radius: 100%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: box-shadow ${smallDelay};
+        ${
+/*
+ * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).
+ * Set it to 0 to ensure the outline is just as high as the control.
+ */ ''}
+        line-height: 0;
+    }
+
+    :host([disabled]) .control {
+        background-color: rgba(${borderRgbPartialColor}, 0.1);
+        border-color: rgba(${borderRgbPartialColor}, 0.2);
+    }
+
+    :host(:not([disabled]):not(:active):hover) .control {
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+    }
+
+    :host(${focusVisible}) .control {
+        border-color: ${borderHoverColor};
+    }
+
+    :host(${focusVisible}) .control::after {
+        content: '';
+        position: absolute;
+        width: calc(2px + ${controlHeight} / 2);
+        height: calc(2px + ${controlHeight} / 2);
+        border: 2px solid ${borderHoverColor};
+        border-radius: 100%;
+    }
+
+    .label {
+        font: inherit;
+        color: ${bodyFontColor};
+        padding-left: 1ch;
+        cursor: inherit;
+    }
+
+    :host([disabled]) .label {
+        color: ${bodyDisabledFontColor};
+    }
+
+    slot[name='checked-indicator'] {
+        display: none;
+    }
+
+    slot[name='checked-indicator'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+        overflow: visible;
+    }
+
+    :host(.checked) slot[name='checked-indicator'] {
+        display: contents;
+    }
+
+    slot[name='checked-indicator'] circle {
+        fill: ${borderColor};
+    }
+
+    :host([disabled]) slot[name='checked-indicator'] circle {
+        fill: rgba(${borderRgbPartialColor}, 0.3);
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,aAAa,EACb,QAAQ,EACR,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,eAAe;;;;;;;;;;;;sBAYT,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;iCAKyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;;;YAG5B,YAAY;;;4BAGI,aAAa;6BACZ,aAAa;4BACd,gBAAgB;;;;;;iBAM3B,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;kBAQpB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;CAEzC,CAAC"}

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

@@ -0,0 +1,13 @@
+import { RadioGroup as FoundationRadioGroup } from '@microsoft/fast-foundation';
+import type { Orientation } from '@microsoft/fast-web-utilities';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-radio-group': RadioGroup;
+    }
+}
+export type { Orientation };
+/**
+ * A nimble-styled grouping element for radio buttons
+ */
+export declare class RadioGroup extends FoundationRadioGroup {
+}

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

@@ -0,0 +1,18 @@
+import { RadioGroup as FoundationRadioGroup, radioGroupTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled grouping element for radio buttons
+ */
+export class RadioGroup extends FoundationRadioGroup {
+}
+const nimbleRadioGroup = RadioGroup.compose({
+    baseName: 'radio-group',
+    baseClass: FoundationRadioGroup,
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,IAAI,oBAAoB,EAClC,kBAAkB,IAAI,QAAQ,EAC9B,YAAY,EACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB;CAAG;AAEvD,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"}

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

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,29 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, standardPadding } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('inline-block')}
+
+    .positioning-region {
+        display: flex;
+        gap: ${standardPadding};
+    }
+
+    :host([orientation='vertical']) .positioning-region {
+        flex-direction: column;
+    }
+
+    :host([orientation='horizontal']) .positioning-region {
+        flex-direction: row;
+    }
+
+    slot[name='label'] {
+        font: ${controlLabelFont};
+        color: ${controlLabelFontColor};
+    }
+
+    :host([disabled]) slot[name='label'] {
+        color: ${controlLabelDisabledFontColor};
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +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,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;eAId,eAAe;;;;;;;;;;;;gBAYd,gBAAgB;iBACf,qBAAqB;;;;iBAIrB,6BAA6B;;CAE7C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "11.13.1",
+  "version": "11.14.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -62,17 +62,17 @@
     "@ni/eslint-config-typescript": "^3.0.5",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "13.1.3",
-    "@storybook/addon-a11y": "^6.4.9",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-docs": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-interactions": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
-    "@storybook/addons": "^6.4.9",
-    "@storybook/builder-webpack5": "^6.4.9",
-    "@storybook/html": "^6.4.9",
-    "@storybook/manager-webpack5": "^6.4.9",
-    "@storybook/theming": "^6.4.9",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/html": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/theming": "^6.5.10",
     "@types/jasmine": "^3.6.0",
     "@types/webpack-env": "^1.15.2",
     "babel-loader": "^8.2.2",