@ni/ok-components 0.3.6 → 0.3.7

package/dist/all-components-bundle.js

@@ -17712,13 +17712,14 @@
             background-color: transparent;
             cursor: pointer;
             outline: none;
-            --ni-private-step-icon-background-full-size: 100% 100%;
-            ${'' /* 6px = (2px icon border + 1px inset) * 2 sides */}
-            --ni-private-step-icon-background-inset-size: calc(100% - 6px) calc(100% - 6px);
-            --ni-private-step-icon-background-none-size: 0% 0%;
+            --ni-private-step-icon-background-full-size: scale(1,1);
+            ${'' /* (32px - 2 * (2px focus border + 1px inset gap)) / 32px = .8125 */}
+            --ni-private-step-icon-background-inset-size: scale(0.8125, 0.8125);
+            --ni-private-step-icon-background-none-size: scale(0,0);
 
             --ni-private-step-icon-color: ${buttonLabelFontColor};
             --ni-private-step-icon-border-color: transparent;
+            --ni-private-step-icon-border-width: 1px;
             --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-icon-outline-inset-color: transparent;
@@ -17821,6 +17822,20 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
+        .icon-background {
+            grid-area: icon;
+            display: inline-block;
+            height: ${controlHeight};
+            width: ${controlHeight};
+            ${userSelectNone$1};
+            background-color:  var(--ni-private-step-icon-background-color);
+            transform: var(--ni-private-step-icon-background-size);
+            border: none;
+            border-radius: 100%;
+            transition:
+                transform ${smallDelay} ease-in-out;
+        }
+
         .icon {
             grid-area: icon;
             display: inline-flex;
@@ -17833,31 +17848,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             font: ${buttonLabelFont};
             color: var(--ni-private-step-icon-color);
             ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);
-            border-style: solid;
+            border: none;
             border-radius: 100%;
-            border-color: var(--ni-private-step-icon-border-color);
-            border-width: 1px;
-            background-image: radial-gradient(
-                closest-side,
-                ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:
-        https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges
-    */}
-                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-pixel-ratio, 1)),
-                transparent 100%
-            );
-            background-origin: border-box;
-            background-size: var(--ni-private-step-icon-background-size);
-            background-repeat: no-repeat;
-            background-position: center center;
+            box-shadow: inset 0px 0px 0px var(--ni-private-step-icon-border-width) var(--ni-private-step-icon-border-color);
             position: relative;
             transition:
-                border-color ${smallDelay} ease-in-out,
-                border-width ${smallDelay} ease-in-out,
-                background-size ${smallDelay} ease-out;
+                box-shadow ${smallDelay} ease-in-out;
         }
 
         :host([selected]) .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .icon::before {
@@ -17870,10 +17870,9 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             outline-style: solid;
             outline-width: 0px;
             outline-offset: 0px;
-            border: 1px solid transparent;
+            border: none;
             border-radius: 100%;
             color: transparent;
-            background-clip: border-box;
             transition:
                 outline-color ${smallDelay} ease-in-out,
                 outline-width ${smallDelay} ease-in-out,
@@ -18025,7 +18024,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control:hover .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control:hover .line {
@@ -18076,12 +18075,13 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control${focusVisible} .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control${focusVisible} .icon::before {
             outline-width: ${borderWidth};
-            outline-offset: -2px;
+            ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
+            outline-offset: -4px;
         }
 
         .control${focusVisible} .line {
@@ -18128,7 +18128,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control:active .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control:active .icon::before {
@@ -19462,6 +19462,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
+                <div class="icon-background"></div>
                 <div class="icon">
                     <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
                     <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></slot></div>
@@ -66453,6 +66454,7 @@ ${nextLine.slice(indentLevel + 2)}`;
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
+                <div class="icon-background"></div>
                 <div class="icon">
                     <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
                     <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></slot></div>
@@ -66551,28 +66553,7 @@ ${nextLine.slice(indentLevel + 2)}`;
     }
 `;
 
-  /**
-   * Observable class to subscribe to changes in the page's device pixel ratio
-   * Based on: https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/#the-less-code-and-more-flexible-js-solution
-   */
-  class DevicePixelRatio {
-      constructor() {
-          const update = () => {
-              this.current = window.devicePixelRatio;
-              window
-                  .matchMedia(`(resolution: ${this.current}x)`)
-                  .addEventListener('change', update, { once: true });
-          };
-          update();
-      }
-  }
-  __decorate([
-      observable
-  ], DevicePixelRatio.prototype, "current", void 0);
-  const devicePixelRatio = new DevicePixelRatio();
-
   const template$w = html `<ol><slot
-        style="--ni-private-device-pixel-ratio: ${() => devicePixelRatio.current};"
         name="step"
         ${slotted('steps')}
     ></slot></ol>`;