@ni/nimble-components 19.5.0 → 19.6.1

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

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { focusVisible } from '../utilities/style/focus';
-import { fillSelectedColor } from '../theme-provider/design-tokens';
+import { borderHoverColor, borderWidth, fillSelectedColor, smallDelay } from '../theme-provider/design-tokens';
 import { styles as buttonStyles } from '../patterns/button/styles';
 export const styles = css `
     ${buttonStyles}
@@ -8,24 +8,78 @@ export const styles = css `
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
+        position: relative;
+        transition: box-shadow ${smallDelay} ease-in-out,
+            border-color ${smallDelay} ease-in-out,
+            background-size ${smallDelay} ease-in-out;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center;
     }
 
     .control[aria-pressed='true']:hover {
-        background-color: ${fillSelectedColor};
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 4px) calc(100% - 4px);
     }
 
     .control[aria-pressed='true']${focusVisible} {
-        background-color: ${fillSelectedColor};
+        background-color: transparent;
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 4px) calc(100% - 4px);
+    }
+
+    .control[aria-pressed='true']:active {
+        box-shadow: none;
+        background-image: linear-gradient(
+            ${fillSelectedColor},
+            ${fillSelectedColor}
+        );
+        background-size: calc(100% - 2px) calc(100% - 2px);
     }
 
     :host([disabled]) .control[aria-pressed='true'] {
-        background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
+        background-color: ${fillSelectedColor};
+        background-image: none;
     }
 
     :host([disabled]) .control[aria-pressed='true']:hover {
-        background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
+        background-color: ${fillSelectedColor};
+        box-shadow: none;
+    }
+
+    .control[aria-pressed='true']::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        box-sizing: border-box;
+        outline: 0px solid transparent;
+        outline: none;
+        background-clip: content-box;
+        transition: outline ${smallDelay} ease-in-out;
+    }
+
+    .control[aria-pressed='true']${focusVisible}::before {
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -3px;
+        color: transparent;
+    }
+
+    .control[aria-pressed='true']:active::before {
+        outline: none;
     }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toggle-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,YAAY;;;4BAGU,iBAAiB;wBACrB,iBAAiB;;;;4BAIb,iBAAiB;;;mCAGV,YAAY;4BACnB,iBAAiB;;;;4BAIjB,iBAAiB;wBACrB,iBAAiB;;;;4BAIb,iBAAiB;wBACrB,iBAAiB;;CAExC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toggle-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,YAAY;;;4BAGU,iBAAiB;wBACrB,iBAAiB;;iCAER,UAAU;2BAChB,UAAU;8BACP,UAAU;;;;;;;wBAOhB,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;cAEnD,iBAAiB;cACjB,iBAAiB;;;;;mCAKI,YAAY;;wBAEvB,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;cAEnD,iBAAiB;cACjB,iBAAiB;;;;;;;;cAQjB,iBAAiB;cACjB,iBAAiB;;;;;;wBAMP,iBAAiB;4BACb,iBAAiB;;;;;wBAKrB,iBAAiB;4BACb,iBAAiB;;;;;;;;;;;;;;8BAcf,UAAU;;;mCAGL,YAAY;mBAC5B,WAAW,UAAU,gBAAgB;;;;;;;;CAQvD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "19.5.0",
+  "version": "19.6.1",
   "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",
@@ -61,7 +61,7 @@
     "@microsoft/fast-element": "^1.10.1",
     "@microsoft/fast-foundation": "^2.47.1-0",
     "@microsoft/fast-web-utilities": "^6.0.0",
-    "@ni/nimble-tokens": "^6.1.0",
+    "@ni/nimble-tokens": "^6.2.1",
     "@tanstack/table-core": "^8.7.0",
     "@tanstack/virtual-core": "^3.0.0-beta.44",
     "@types/d3-array": "^3.0.4",