@kubex/zinc 1.1.185 → 2.0.1

package/src/components/skeleton/skeleton.scss

@@ -2,27 +2,27 @@
   --skeleton-speed: 3s;
   --skeleton-width: 100%;
   --skeleton-height: 20px;
-  --skeleton-border-radius: 4px;
+  --skeleton-border-radius: var(--zn-skeleton-border-radius, 4px);
 }
 
 .skeleton {
   height: var(--skeleton-height);
   width: var(--skeleton-width);
   border-radius: var(--skeleton-border-radius);
-  background-color: lightgrey;
+  background-color: var(--zn-skeleton-background, lightgrey);
 
   @media (prefers-reduced-motion: reduce) {
     background-repeat: no-repeat;
-    background-color: lightgrey;
+    background-color: var(--zn-skeleton-background, lightgrey);
   }
 
   @media (prefers-reduced-motion: no-preference) {
     background-repeat: no-repeat;
     background-image: linear-gradient(
         90deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0.8) 50%,
-        rgba(255, 255, 255, 0) 100%
+        transparent 0%,
+        var(--zn-skeleton-shimmer, rgba(255, 255, 255, 0.8)) 50%,
+        transparent 100%
     );
     background-size: 200% 100%;
     background-position: -150% 0;

package/src/components/skeleton/skeleton.test.ts

@@ -7,4 +7,13 @@ describe('<zn-skeleton>', () => {
 
     expect(el).to.exist;
   });
+
+  it('takes its radius from the theme token unless radius is set', async () => {
+    const themed = await fixture<HTMLElement>(html`<zn-skeleton style="--zn-skeleton-border-radius: 7px"></zn-skeleton>`);
+    const explicit = await fixture<HTMLElement>(html`<zn-skeleton radius="0" style="--zn-skeleton-border-radius: 7px"></zn-skeleton>`);
+    const radius = (el: HTMLElement) => getComputedStyle(el.shadowRoot!.querySelector('.skeleton')!).borderTopLeftRadius;
+
+    expect(radius(themed)).to.equal('7px');
+    expect(radius(explicit)).to.equal('0px');
+  });
 });

package/src/components/slash-menu/slash-menu.scss

@@ -125,7 +125,7 @@
   cursor: pointer;
 
   &:hover:not(&--disabled) {
-    background: var(--zn-input-background-color-hover);
+    background: rgba(var(--zn-color-primary), 0.04);
   }
 
   // The active item is where Enter lands, so it is tinted rather than merely shaded like a hover.

package/src/components/slideout/slideout.component.ts

@@ -119,6 +119,19 @@ export default class ZnSlideout extends ZincElement {
     this.hide();
   }
 
+  // Escape on a native modal dialog closes it directly, bypassing zn-request-close
+  private handleCancel = (event: Event) => {
+    event.preventDefault();
+    this.requestClose('keyboard');
+  };
+
+  // The browser can refuse to cancel a repeated Escape, closing the dialog anyway
+  private handleNativeClose = () => {
+    if (this.open) {
+      void this.hide();
+    }
+  };
+
   private addOpenListeners() {
     if ('CloseWatcher' in window) {
       this.closeWatcher?.destroy();
@@ -178,6 +191,8 @@ export default class ZnSlideout extends ZincElement {
     return html`
       <dialog
         part="base"
+        @cancel=${this.handleCancel}
+        @close=${this.handleNativeClose}
         role="alertdialog"
         aria-modal="true"
         aria-hidden=${this.open ? 'false' : 'true'}
@@ -198,10 +213,12 @@ export default class ZnSlideout extends ZincElement {
               part="close-button"
               exportparts="base:close-button__base"
               class="slideout__close"
-              icon="close"
-              icon-size="24"
+              icon="x@lu"
+              icon-size="16"
+              icon-button="small"
+              plain
               type="button"
-              color="transparent"
+              label="Close"
               @click="${() => this.requestClose('close-button')}"
             ></zn-button>
           </div>

package/src/components/slideout/slideout.scss

@@ -2,9 +2,9 @@
 
 :host {
   --width: min(100vw, 46rem);
-  --header-spacing: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-medium);
-  --body-spacing: var(--zn-spacing-medium) var(--zn-spacing-large);
-  --footer-spacing: var(--zn-spacing-large);
+  --header-spacing: var(--zn-slideout-header-spacing, var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-medium));
+  --body-spacing: var(--zn-slideout-body-spacing, var(--zn-spacing-medium) var(--zn-spacing-large));
+  --footer-spacing: var(--zn-slideout-footer-spacing, var(--zn-spacing-large));
   --icon-background-color: var(--zn-color-primary-200);
   --icon-color: var(--zn-color-primary-600);
   --caption-color: var(--zn-color-primary-600);
@@ -27,10 +27,11 @@
   padding: 0;
   width: 1100px;
   background: rgb(var(--zn-body));
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: var(--zn-slideout-shadow, 0 0 10px 0 rgba(0, 0, 0, 0.1));
 
   &::backdrop {
     background: var(--zn-overlay-background-color);
+    backdrop-filter: var(--zn-overlay-backdrop-filter, none);
   }
 
 
@@ -46,10 +47,11 @@
     flex: 1 1 auto;
     align-items: center;
     font: inherit;
+    font-family: var(--zn-text-h2-font-family, inherit);
     margin: 0;
     color: rgb(var(--zn-text-panel-title));
-    font-size: var(--zn-font-size-x-large);
-    font-weight: var(--zn-font-weight-semibold);
+    font-size: var(--zn-dialog-title-font-size, var(--zn-font-size-x-large));
+    font-weight: var(--zn-dialog-title-font-weight, var(--zn-font-weight-semibold));
     letter-spacing: var(--zn-letter-spacing-normal);
     line-height: var(--zn-font-size-x-large);
     padding: var(--header-spacing);
@@ -74,6 +76,11 @@
     }
   }
 
+  &__close {
+    --zn-button-height: var(--zn-page-closer-size);
+    --zn-button-icon-width: var(--zn-page-closer-size);
+  }
+
   &__body {
     flex: 1 1 auto;
     display: block;

package/src/components/slideout/slideout.test.ts

@@ -1,4 +1,5 @@
 import '../../../dist/zn.min.js';
+import { emulateMedia } from '@web/test-runner-commands';
 import { expect, fixture, html } from '@open-wc/testing';
 
 describe('<zn-slideout>', () => {
@@ -7,4 +8,22 @@ describe('<zn-slideout>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('reduced motion', () => {
+    before(() => emulateMedia({reducedMotion: 'reduce'}));
+    after(() => emulateMedia({reducedMotion: 'no-preference'}));
+
+    it('fades without sliding', async () => {
+      const el = await fixture<HTMLElement & { show: () => Promise<void> }>(html` <zn-slideout></zn-slideout> `);
+      const dialog = el.shadowRoot!.querySelector('.slideout')!;
+
+      void el.show();
+      const [animation] = dialog.getAnimations();
+      const keyframes = (animation.effect as KeyframeEffect).getKeyframes();
+
+      expect(keyframes.map(keyframe => keyframe.opacity)).to.deep.equal(['0', '1']);
+      expect(keyframes.some(keyframe => 'transform' in keyframe)).to.be.false;
+      expect(animation.effect!.getTiming().duration).to.equal(150);
+    });
+  });
 });

package/src/components/split-button/split-button.component.ts

@@ -105,7 +105,7 @@ export default class ZnSplitButton extends ZincElement implements ZincFormContro
                      @click=${this.handleTriggerClick}>
             ${this.caption}
           </zn-button>
-          <zn-button icon="keyboard_arrow_down"></zn-button>
+          <zn-button icon="keyboard_arrow_down" label="More options"></zn-button>
         </zn-button-group>
       </div>
     `;

package/src/components/split-pane/split-pane.component.ts

@@ -83,7 +83,10 @@ export default class ZnSplitPane extends ZincElement {
       this._setFocusPane(parseInt((e.selectedTarget as HTMLElement).getAttribute('split-pane-focus')!));
     });
     this.addEventListener('zn-split-pane-focus-change', this.focusChangeHandler);
-    this.resizeObserver = new ResizeObserver(() => this.refreshNarrowState());
+    this.resizeObserver = new ResizeObserver(() => {
+      this.refreshNarrowState();
+      this.keepSecondarySize();
+    });
     this.resizeObserver.observe(this);
   }
 
@@ -94,6 +97,18 @@ export default class ZnSplitPane extends ZincElement {
     super.disconnectedCallback();
   }
 
+  // The primary pane is sized in pixels, so a `secondary` pane would otherwise take up every change in the container
+  private keepSecondarySize() {
+    if (!this.preferSecondarySize || !this.calculatePixels || !this.currentContainerSize) return;
+
+    const containerSize = this.vertical ? this.getBoundingClientRect().height : this.getBoundingClientRect().width;
+    if (!containerSize || containerSize === this.currentContainerSize) return;
+
+    const secondarySize = this.currentContainerSize - this.currentPixelSize;
+    this.currentContainerSize = containerSize;
+    this.setSize(containerSize - secondarySize);
+  }
+
   private refreshNarrowState() {
     const nowNarrow = this.getBoundingClientRect().width < MERGED_NAVIGATION_BREAKPOINT_PX;
     if (nowNarrow !== this.parentIsNarrow) {
@@ -105,7 +120,6 @@ export default class ZnSplitPane extends ZincElement {
 
   firstUpdated(changedProperties: PropertyValues) {
     setTimeout(this.applyStoredSize.bind(this), 100);
-    this.refreshNarrowState();
     super.firstUpdated(changedProperties);
   }
 
@@ -154,7 +168,7 @@ export default class ZnSplitPane extends ZincElement {
     }.bind(this);
 
     this.mouseUpHandler = function () {
-      this._store.set(this.storeKey, Math.round(this.currentPixelSize) + "," + Math.round(this.currentPercentSize) + "," + this.currentContainerSize);
+      this.storeSize();
       this.classList.remove('resizing');
       window.removeEventListener('touchmove', this.mouseMoveHandler);
       window.removeEventListener('mousemove', this.mouseMoveHandler);
@@ -170,6 +184,41 @@ export default class ZnSplitPane extends ZincElement {
     window.addEventListener('mouseup', this.mouseUpHandler);
   }
 
+  private storeSize() {
+    this._store.set(this.storeKey, Math.round(this.currentPixelSize) + "," + Math.round(this.currentPercentSize) + "," + this.currentContainerSize);
+  }
+
+  private handleResizerKeyDown(e: KeyboardEvent) {
+    if (this.hide === 'primary' || this.hide === 'secondary') {
+      return;
+    }
+
+    this.currentContainerSize = this.vertical ? this.getBoundingClientRect().height : this.getBoundingClientRect().width;
+    const step = this.calculatePixels ? 10 : this.currentContainerSize / 100;
+    let size: number;
+    switch (e.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        size = this.currentPixelSize - step;
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        size = this.currentPixelSize + step;
+        break;
+      case 'Home':
+        size = 0;
+        break;
+      case 'End':
+        size = this.currentContainerSize;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    this.setSize(size);
+    this.storeSize();
+  }
+
   setSize(primaryPanelPixels: number) {
     const hasMinimumSecondaryPaneSize = Number.isFinite(this.minimumSecondaryPaneSize);
     const maximumPrimaryPanelPixels = hasMinimumSecondaryPaneSize
@@ -216,6 +265,7 @@ export default class ZnSplitPane extends ZincElement {
     this.currentPixelSize = pixelSize;
     this.currentPercentSize = percentSize;
     this.primaryFull = this.calculatePixels ? (this.currentPixelSize + 'px') : (this.currentPercentSize + '%');
+    this.requestUpdate();
   }
 
   _setFocusPane(idx: number) {
@@ -300,21 +350,34 @@ export default class ZnSplitPane extends ZincElement {
         --min-panel-size: ${this.minimumPaneSize}${this.calculatePixels ? 'px' : '%'};
         --min-secondary-panel-size: ${minimumSecondaryPaneSize};
         --max-panel-size: ${this.maximumPaneSize ? this.maximumPaneSize + (this.calculatePixels ? 'px' : '%') : 'none'};
-        --initial-size: ${this.primaryFull};
         --resize-size: ${resizeWidth};
         --resize-margin: ${resizeMargin};
       }</style>
-      <ul id="split-nav">
+      <ul id="split-nav" role="tablist">
         ${this.getNavigationItems().map(item => html`
-          <li class="${item.active ? 'active' : ''}" @click="${item.select}">
+          <li class="${item.active ? 'active' : ''}" role="tab" tabindex="0" aria-selected="${item.active}"
+              @click="${item.select}"
+              @keydown="${(e: KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  item.select();
+                }
+              }}">
             ${item.caption}
           </li>
         `)}
       </ul>
-      <div id="primary-pane">
+      <div id="primary-pane" style="--zn-split-pane-size: ${this.primaryFull}">
         <slot name="primary" @slotchange="${() => this.requestUpdate()}"></slot>
       </div>
-      <div @mousedown="${this.resize}" @touchstart="${this.resize}" id="resizer"></div>
+      <div @mousedown="${this.resize}" @touchstart="${this.resize}" @keydown="${this.handleResizerKeyDown}" id="resizer"
+           role="separator" tabindex="0"
+           aria-orientation="${this.vertical ? 'horizontal' : 'vertical'}"
+           aria-valuenow="${Math.round(this.calculatePixels ? this.currentPixelSize : this.currentPercentSize)}"
+           aria-valuemin="${this.minimumPaneSize}"
+           aria-valuemax="${this.maximumPaneSize || (this.calculatePixels ? Math.round(this.currentContainerSize) : 100)}">
+        <span id="grip"></span>
+      </div>
       <div id="secondary-pane">
         <slot name="secondary" @slotchange="${() => this.requestUpdate()}"></slot>
       </div>

package/src/components/split-pane/split-pane.scss

@@ -6,14 +6,15 @@
   gap: 0 calc(var(--zn-base-gap) / 2);
 }
 
-// Slotted panes are light DOM, which ::-webkit-scrollbar rules here cannot reach, so they take the standard properties.
+// Slotted panes are light DOM, out of reach of the ::-webkit-scrollbar rules here.
+// Flex-stretched, not `height: 100%`, which costs Safari ~30ms per DOM or hover change inside the panes.
 ::slotted(*) {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex: 1 1 0;
+  min-height: 0;
   overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: mixins.$scrollbar-thumb transparent;
+  @include mixins.scrollbars-standard;
 }
 
 :host {
@@ -28,11 +29,11 @@
   container-type: inline-size;
   position: relative;
 
-  // Panes are sized from --initial-size, never from their content. Without an
+  // Panes are sized from --zn-split-pane-size, never from their content. Without an
   // explicit flex-basis, a wide unbreakable child (long token in a <pre>, wide
   // table) becomes the flex base size and the resizer stops having any effect.
   #primary-pane {
-    flex: 0 1 var(--initial-size, 50%);
+    flex: 0 1 var(--zn-split-pane-size, 50%);
     min-width: 0;
     min-height: 0;
   }
@@ -44,12 +45,22 @@
     overflow: hidden;
   }
 
+  #primary-pane, #secondary-pane {
+    display: flex;
+    flex-direction: column;
+  }
+
   slot {
     overflow: auto;
   }
 
+  --resizer-line: transparent;
+  --resizer-active: var(--zn-split-pane-handle-hover, rgb(var(--zn-primary)));
+
   #resizer {
     position: relative;
+    outline: none;
+    cursor: col-resize;
 
     &:after {
       content: "";
@@ -62,15 +73,56 @@
       display: block;
       position: absolute;
       z-index: 1;
-      transition: background-color 200ms ease-in-out;
+      background-color: var(--resizer-line);
+      // Size changes aren't transitioned: fractional in-between widths leave stale strips of the line painted
+      transition: background-color var(--zn-transition-fast) var(--zn-ease-out);
     }
+  }
 
-    cursor: col-resize;
+  #grip {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    z-index: 2;
+    width: 4px;
+    height: 28px;
+    border-radius: 999px;
+    // Faded by mixing into the gutter, not opacity, so the divider line stays hidden behind the pill
+    background-color: color-mix(in srgb, color-mix(in srgb, rgb(var(--zn-border-color)), rgb(var(--zn-text)) 20%), var(--zn-split-pane-gutter, rgb(var(--zn-body))));
+    box-shadow: 0 0 0 2px var(--zn-split-pane-gutter, rgb(var(--zn-body)));
+    pointer-events: none;
+    transition: background-color var(--zn-transition-fast) var(--zn-ease-out),
+    scale var(--zn-transition-fast) var(--zn-ease-out);
+  }
+
+  @include wc.hover-fine {
+    // Delay the hover highlight so the cursor passing over the gutter doesn't flash it.
+    #resizer:hover {
+      &:before, #grip {
+        transition-delay: 150ms;
+        background-color: var(--resizer-active);
+      }
+    }
+  }
 
-    &:hover:before {
-      background-color: rgb(var(--zn-blue));
+  #resizer:focus-visible {
+    &:before, #grip {
+      background-color: var(--resizer-active);
     }
   }
+
+  #resizer:focus-visible #grip {
+    outline: var(--zn-focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+:host(.resizing) #resizer {
+  &:before, #grip {
+    background-color: var(--resizer-active);
+    transition-delay: 0ms;
+  }
 }
 
 :host(:not([vertical])), zn-split-pane:not([vertical]) {
@@ -105,23 +157,24 @@
 
         &::before {
           content: '';
-          left: 50%;
-          right: 50%;
+          left: 0;
+          right: 0;
           bottom: -1px;
           position: absolute;
           background-color: rgb(var(--zn-accent));
-          transition: all 300ms ease-in-out;
+          scale: 0 1;
+          transition: scale var(--zn-transition-medium) var(--zn-ease-out);
           height: var(--zn-spacing-2x-small);
         }
 
-        &:hover:before {
-          left: 20%;
-          right: 20%;
+        @include wc.hover-fine {
+          &:hover::before {
+            scale: .6 1;
+          }
         }
 
         &.active::before {
-          left: 0;
-          right: 0;
+          scale: 1 1;
         }
       }
     }
@@ -149,6 +202,8 @@
   #primary-pane {
     max-width: var(--max-panel-size, none);
     overflow: hidden;
+    // Keeps a scrollbar along the pane's edge clear of the divider and its grip
+    padding-inline-end: 4px;
   }
 
   #resizer {
@@ -162,16 +217,38 @@
     }
 
 
+    // Edges kept on whole pixels; half-pixel offsets leave parts of the line repainted at a different width
     &:before {
       height: 100%;
-      width: 1px;
+      width: var(--resizer-width, 1px);
       top: 0;
-      left: 50%;
-      transform: translateX(-50%);
+      left: calc(1px - var(--resizer-width, 1px));
+    }
+
+    &:focus-visible {
+      --resizer-width: 2px;
+    }
+  }
+
+  @include wc.hover-fine {
+    #resizer:hover {
+      --resizer-width: 2px;
+
+      #grip {
+        scale: 1 1.3;
+      }
     }
   }
 }
 
+:host(.resizing:not([vertical])) #resizer {
+  --resizer-width: 2px;
+
+  #grip {
+    scale: 1 1.3;
+  }
+}
+
 :host([merged-navigation]:not([vertical])) {
   @include wc.container-query(zero, md) {
     padding-top: 0;
@@ -244,13 +321,13 @@
 
 :host([focus-pane="0"]) {
   #primary-pane {
-    display: block;
+    display: flex;
   }
 }
 
 :host([focus-pane="1"]) {
   #secondary-pane {
-    display: block;
+    display: flex;
   }
 }
 
@@ -290,10 +367,40 @@
 
     &:before {
       width: 100%;
-      height: 1px;
+      height: var(--resizer-width, 1px);
       left: 0;
-      top: 50%;
-      transform: translateY(-50%);
+      top: calc(1px - var(--resizer-width, 1px));
+    }
+
+    &:focus-visible {
+      --resizer-width: 2px;
+    }
+  }
+
+  #grip {
+    width: 28px;
+    height: 4px;
+  }
+
+  @include wc.hover-fine {
+    #resizer:hover {
+      --resizer-width: 2px;
+
+      #grip {
+        scale: 1.3 1;
+      }
+    }
+  }
+}
+
+:host(.resizing[vertical]) {
+  cursor: row-resize;
+
+  #resizer {
+    --resizer-width: 2px;
+
+    #grip {
+      scale: 1.3 1;
     }
   }
 }
@@ -350,7 +457,7 @@ $padding: 8px;
     #secondary-pane {
       overflow: hidden;
       border-radius: 10px 0 0 0;
-      background-color: #fbfbfb;
+      background-color: var(--zn-split-pane-secondary-background, #fbfbfb);
       border: 1px solid rgb(var(--zn-border-color)) !important;
       border-bottom-width: 0 !important;
     }
@@ -366,24 +473,21 @@ $padding: 8px;
         border-bottom-width: 0 !important;
       }
     }
-
-    #resizer::before {
-      background-color: transparent !important;
-    }
   }
 }
 
-:host([padded]:not(.resizing)),
-:host([padded-right]:not(.resizing)) {
-  #resizer::before {
-    background-color: transparent;
-  }
+:host([bordered]:not([padded]):not([padded-right])) {
+  --resizer-line: rgb(var(--zn-border-color));
+}
 
-  #resizer:hover::before {
-    background-color: rgb(var(--zn-blue)) !important;
-  }
+#split-nav li:focus-visible {
+  outline: var(--zn-focus-ring);
+  outline-offset: calc(-1 * var(--zn-focus-ring-width));
 }
 
-:host([bordered]) #resizer:before {
-  background-color: rgb(var(--zn-border-color));
+@include wc.reduced-motion {
+  #grip {
+    scale: none !important;
+    transition-property: background-color;
+  }
 }