@kubex/zinc 1.1.185 → 2.0.1

package/src/components/reveal/reveal.component.ts

@@ -1,5 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {ifDefined} from "lit/directives/if-defined.js";
 import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
@@ -88,6 +89,13 @@ export default class ZnReveal extends ZincElement {
     }
   }
 
+  protected handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.handleToggleReveal();
+    }
+  }
+
   protected handleMouseEnter() {
     // handle hover only while hovered
     this._clearHideTimer();
@@ -123,9 +131,15 @@ export default class ZnReveal extends ZincElement {
         'reveal--revealed': this._isRevealed,
         'reveal--toggled': this._isToggled,
       })}
+           role=${ifDefined(this.noToggle ? undefined : 'button')}
+           tabindex=${ifDefined(this.noToggle ? undefined : '0')}
+           aria-pressed=${ifDefined(this.noToggle ? undefined : String(this._isToggled))}
            @click="${this.handleToggleReveal}"
+           @keydown="${this.handleKeyDown}"
            @mouseenter="${this.handleMouseEnter}"
-           @mouseleave="${this.handleMouseLeave}">
+           @mouseleave="${this.handleMouseLeave}"
+           @focus="${this.handleMouseEnter}"
+           @blur="${this.handleMouseLeave}">
         <span class="reveal__text reveal__text--initial">${this.initial}</span>
         <span class="reveal__text reveal__text--revealed">${this.revealed}</span>
       </div>

package/src/components/reveal/reveal.scss

@@ -15,6 +15,11 @@
 // Only a click that toggles earns the pointer: a static or hover-only reveal does nothing on click.
 .reveal--clickable {
   cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    border-radius: var(--zn-border-radius-small);
+  }
 }
 
 // cursor inherits, so a static reveal has to opt out of a clickable container's pointer

package/src/components/schedule-builder/schedule-builder.component.ts

@@ -1158,7 +1158,21 @@ export default class ZnScheduleBuilder extends ZincElement implements ZincFormCo
 
     this._commitShownDays({...shown, [day]: ranges});
     // The new range may merge into a neighbour, so find where it actually landed.
-    this._editing = {day, index: Math.max(ranges.findIndex(item => item.start === range.start), 0)};
+    void this._openEditor(day, Math.max(ranges.findIndex(item => item.start === range.start), 0));
+  }
+
+  private async _openEditor(day: ScheduleDay, index: number) {
+    this._editing = {day, index};
+    await this.updateComplete;
+    this.shadowRoot?.querySelector<ZnInput>('.list__editor zn-input')?.focus();
+  }
+
+  /** Focuses a day's range chip, clamped to the chips there are; the day's "Add range" button when it has none. */
+  private async _focusRangeChip(day: ScheduleDay, index: number) {
+    await this.updateComplete;
+    const row = this.shadowRoot?.querySelector(`.list__row[data-day="${day}"]`);
+    const chips = row?.querySelectorAll<HTMLElement>('.list__chip') ?? [];
+    (chips[Math.min(index, chips.length - 1)] ?? row?.querySelector<HTMLElement>('.list__add'))?.focus();
   }
 
   private _handleRemoveRange(day: ScheduleDay, index: number) {
@@ -1167,6 +1181,7 @@ export default class ZnScheduleBuilder extends ZincElement implements ZincFormCo
     const shown = this._storedAsShown;
     this._editing = null;
     this._commitShownDays({...shown, [day]: shown[day].filter((_, position) => position !== index)});
+    void this._focusRangeChip(day, index);
   }
 
   private _handleRangeEdit(day: ScheduleDay, index: number, edge: 'start' | 'end', value: string) {
@@ -1186,10 +1201,12 @@ export default class ZnScheduleBuilder extends ZincElement implements ZincFormCo
   }
 
   private _handleEditorKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter' || event.key === 'Escape') {
+    if ((event.key === 'Enter' || event.key === 'Escape') && this._editing) {
       event.preventDefault();
       event.stopPropagation();
+      const {day, index} = this._editing;
       this._editing = null;
+      void this._focusRangeChip(day, index);
     }
   }
 
@@ -1340,9 +1357,7 @@ export default class ZnScheduleBuilder extends ZincElement implements ZincFormCo
             </div>
 
             <div class="schedule-builder__canvas calendar__canvas"
-                 role="grid"
-                 aria-label="Weekly opening hours"
-                 aria-readonly=${!this._isEditable}
+                 aria-hidden="true"
                  @pointerdown=${this._handleCanvasPointerDown}
                  @pointermove=${this._handleCanvasPointerMove}
                  @pointerup=${this._handleCanvasPointerUp}
@@ -1372,7 +1387,7 @@ export default class ZnScheduleBuilder extends ZincElement implements ZincFormCo
     }
 
     return html`
-      <div class="calendar__col" role="row" aria-label=${DAY_LABELS[day].long}>${slots}</div>`;
+      <div class="calendar__col">${slots}</div>`;
   }
 
   private _renderSummary(days: ScheduleDayMap) {
@@ -1411,7 +1426,7 @@ export default class ZnScheduleBuilder extends ZincElement implements ZincFormCo
     const note = this._dayNote(day);
 
     return html`
-      <div class=${classMap({list__row: true, 'list__row--editing': editing > -1})}>
+      <div class=${classMap({list__row: true, 'list__row--editing': editing > -1})} data-day=${day}>
         <div class=${classMap({list__day: true, 'list__day--closed': ranges.length === 0})}>
           ${DAY_LABELS[day].short}
         </div>
@@ -1443,7 +1458,7 @@ export default class ZnScheduleBuilder extends ZincElement implements ZincFormCo
               class=${classMap({list__chip: true, 'list__chip--reduced': reduced})}
               ?disabled=${!this._isEditable}
               @click=${() => {
-                if (this._isEditable) this._editing = {day, index};
+                if (this._isEditable) void this._openEditor(day, index);
               }}>
         ${this._formatRange(range)}
       </button>`;

package/src/components/scroll-container/scroll-container.component.ts

@@ -39,6 +39,7 @@ export default class ZnScrollContainer extends ZincElement {
 
   private _footerObserved: boolean = false;
   private _footerHeightFrame: number | null = null;
+  private _scrollEndTimer: number | null = null;
 
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
@@ -64,6 +65,23 @@ export default class ZnScrollContainer extends ZincElement {
       cancelAnimationFrame(this._footerHeightFrame);
       this._footerHeightFrame = null;
     }
+    this._cancelScrollEnd();
+  }
+
+  // Reading scrollHeight forces a layout, so a burst of mutations scrolls once, after it settles.
+  private _queueScrollEnd() {
+    this._cancelScrollEnd();
+    this._scrollEndTimer = window.setTimeout(() => {
+      this._scrollEndTimer = null;
+      this.scrollEnd();
+    }, 100);
+  }
+
+  private _cancelScrollEnd() {
+    if (this._scrollEndTimer !== null) {
+      clearTimeout(this._scrollEndTimer);
+      this._scrollEndTimer = null;
+    }
   }
 
   scrollEnd() {
@@ -92,7 +110,7 @@ export default class ZnScrollContainer extends ZincElement {
     target: null,
     config: {childList: true, subtree: true},
     callback: () => {
-      setTimeout(() => this.scrollEnd(), 100);
+      this._queueScrollEnd();
       if (this.footer) {
         this._syncFooterHeight();
         if (!this._footerObserved) {

package/src/components/scroll-container/scroll-container.scss

@@ -36,7 +36,12 @@
   overflow-y: auto;
   flex-grow: 1;
   margin: 0;
-  padding: 0 0 var(--zn-scroll-footer-height, 0px) 0;
+  padding: 0 0 calc(var(--zn-scroll-footer-height, 0px) + var(--zn-pane-end-inset, 0px)) 0;
+
+  // Only the outermost scroller leaves room for the pane's end
+  > * {
+    --zn-pane-end-inset: 0px;
+  }
 }
 
 .scroll-header {

package/src/components/select/select.component.ts

@@ -1,11 +1,10 @@
-import {animateTo, stopAnimations} from '../../internal/animate.js';
 import {classMap} from "lit/directives/class-map.js";
 import {ConditionalController} from "../../internal/conditional";
 import {FormControlController} from "../../internal/form";
-import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
 import {HasSlotController} from "../../internal/slot";
 import {html, nothing, unsafeCSS} from 'lit';
 import {LocalizeController} from "../../utilities/localize";
+import {modeSignal, themeSignal} from '../../internal/theme';
 import {property, query, state} from 'lit/decorators.js';
 import {scrollIntoView} from "../../internal/scroll";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
@@ -97,6 +96,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private readonly localize = new LocalizeController(this);
   private typeToSelectString = '';
+  private escapeSwallowed = false;
   private typeToSelectTimeout: number;
   private closeWatcher: CloseWatcher | null;
 
@@ -319,6 +319,9 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   /** The select's required attribute. */
   @property({type: Boolean, reflect: true}) required = false;
 
+  /** Short text shown next to the label, styled like the help text, e.g. `optional`. */
+  @property({attribute: 'label-note'}) labelNote = '';
+
   @property({attribute: 'cache-key'}) cacheKey: string = "";
 
   @property({type: Boolean, attribute: 'trigger-submit'}) triggerSubmit = false;
@@ -344,7 +347,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         ${option.getTextLabel()}
         ${(!this.nonRemovable) ? html`
           <zn-icon slot="action" src="close" size="16"
-                   @click=${(e: any) => this.handleTagRemove(e as ZnRemoveEvent, option)}></zn-icon>` : nothing}
+                   role="button"
+                   tabindex=${this.disabled ? '-1' : '0'}
+                   aria-label="Remove ${option.getTextLabel()}"
+                   @click=${(e: any) => this.handleTagRemove(e as ZnRemoveEvent, option)}
+                   @keydown=${(e: KeyboardEvent) => this.handleTagRemoveKeyDown(e, option)}></zn-icon>` : nothing}
       </zn-chip>
     `;
   };
@@ -515,13 +522,6 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.displayInput.focus({preventScroll: true});
     }
 
-    // Blur the display input when Escape is pressed and the dropdown is closed,
-    // so a second Escape press can bubble (e.g. close a containing dialog).
-    if (event.key === 'Escape' && !this.open) {
-      event.stopPropagation();
-      this.displayInput.blur();
-    }
-
     // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the
     // buffer we _don't_ close it. When search is enabled, space should type into the input, not toggle.
     if (event.key === 'Enter' || (event.key === ' ' && !this._isTypeable && this.typeToSelectString === '')) {
@@ -723,6 +723,14 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   }
 
   private handleComboboxKeyDown(event: KeyboardEvent) {
+    // The first Escape on a closed select stays here; a repeat bubbles so it can dismiss a containing popup
+    if (event.key === 'Escape' && !this.open) {
+      if (this.escapeSwallowed) return;
+      this.escapeSwallowed = true;
+    } else {
+      this.escapeSwallowed = false;
+    }
+
     if (event.key === 'Tab') {
       return;
     }
@@ -1151,7 +1159,17 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
   }
 
-  private handleTagRemove(event: ZnRemoveEvent, option: ZnOption) {
+  private handleTagRemoveKeyDown(event: KeyboardEvent, option: ZnOption) {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+
+    const removeButtons = () => [...this.shadowRoot!.querySelectorAll<HTMLElement>('.select__tags zn-icon[slot="action"]')];
+    const index = removeButtons().indexOf(event.currentTarget as HTMLElement);
+    this.handleTagRemove(event, option);
+    this.updateComplete.then(() => (removeButtons()[index] ?? this.displayInput).focus());
+  }
+
+  private handleTagRemove(event: Event, option: ZnOption) {
     event.stopPropagation();
     event.stopImmediatePropagation();
 
@@ -1676,7 +1694,6 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.emit('zn-show');
       this.addOpenListeners();
 
-      await stopAnimations(this);
       this.listbox.hidden = false;
       this.popup.active = true;
 
@@ -1692,8 +1709,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         });
       }
 
-      const {keyframes, options} = getAnimation(this, 'select.show', {dir: this.localize.dir()});
-      await animateTo(this.popup.popup, keyframes, options);
+      await this.popup.updateComplete;
 
       // Make sure the current option is scrolled into view (required for Safari)
       if (this.currentOption) {
@@ -1719,9 +1735,6 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         this.displayInput.value = this.multiple ? '' : this.displayLabel;
       }
 
-      await stopAnimations(this);
-      const {keyframes, options} = getAnimation(this, 'select.hide', {dir: this.localize.dir()});
-      await animateTo(this.popup.popup, keyframes, options);
       this.listbox.hidden = true;
       this.popup.active = false;
 
@@ -1843,6 +1856,25 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
   }
 
+  // A theme picks the chevron through --zn-select-expand-icon and its size through
+  // --zn-select-expand-icon-size, as zn-icon sizes itself from its size attribute.
+  // Read once per theme and mode: reading styles in render forces a style recalc each time.
+  private _expandIcon?: {key: string; src: string; size: string};
+
+  private expandIcon(): {src: string; size: string} {
+    const key = `${themeSignal.get()}|${modeSignal.get()}`;
+    if (this._expandIcon?.key !== key) {
+      const style = getComputedStyle(this);
+      const src = style.getPropertyValue('--zn-select-expand-icon').trim().replace(/^["']|["']$/g, '');
+      this._expandIcon = {
+        key,
+        src: src || 'keyboard_arrow_down',
+        size: String(parseInt(style.getPropertyValue('--zn-select-expand-icon-size')) || 24),
+      };
+    }
+    return this._expandIcon;
+  }
+
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');
@@ -1886,6 +1918,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
                 <zn-icon src="info"></zn-icon>
               </zn-tooltip>`
             : ''}
+          ${this.labelNote ? html`<span class="form-control__label-note">${this.labelNote}</span>` : ''}
         </label>
         ${hasContextNote
           ? html`
@@ -1979,8 +2012,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
                     type="button"
                     aria-label=${this.localize.term('clearEntry')}
                     @mousedown=${this.handleClearMouseDown}
-                    @click=${this.handleClearClick}
-                    tabindex="-1">
+                    @click=${this.handleClearClick}>
                     <slot name="clear-icon">
                       <zn-icon src="circle-x@lu" size="20"></zn-icon>
                     </slot>
@@ -1995,7 +2027,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
                     <zn-icon src="error" class="select__expand-icon select__fetch-error-icon"></zn-icon>`
                   : html`
                     <slot name="expand-icon" part="expand-icon" class="select__expand-icon">
-                      <zn-icon src="keyboard_arrow_down"></zn-icon>
+                      <zn-icon src="${this.expandIcon().src}" size="${this.expandIcon().size}"></zn-icon>
                     </slot>`
               }
             </div>
@@ -2079,19 +2111,3 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     `;
   }
 }
-
-setDefaultAnimation('select.show', {
-  keyframes: [
-    {opacity: 0, scale: 0.9},
-    {opacity: 1, scale: 1}
-  ],
-  options: {duration: 100, easing: 'ease'}
-});
-
-setDefaultAnimation('select.hide', {
-  keyframes: [
-    {opacity: 1, scale: 1},
-    {opacity: 0, scale: 0.9}
-  ],
-  options: {duration: 100, easing: 'ease'}
-});

package/src/components/select/select.scss

@@ -17,13 +17,7 @@
   z-index: var(--zn-z-index-dropdown);
 }
 
-.select[data-current-placement^='top']::part(popup) {
-  transform-origin: bottom;
-}
-
-.select[data-current-placement^='bottom']::part(popup) {
-  transform-origin: top;
-}
+@include wc.popover-motion('.select');
 
 /* Combobox */
 .select__combobox {
@@ -63,6 +57,8 @@
   color: var(--zn-input-color);
   cursor: inherit;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   padding: 0;
   margin: 0;
   -webkit-appearance: none;
@@ -123,17 +119,16 @@
 /* Ensure the combobox wraps so the input flows after tags (only when open to avoid affecting initial size) */
 .select--multiple.select--search.select--open .select__combobox {
   flex-wrap: wrap;
-  gap: var(--zn-spacing-2x-small);
+  // Row gap only: column spacing comes from the items' own margins, as when closed.
+  row-gap: var(--zn-spacing-2x-small);
   padding-inline-start: 0;
-  /* Allow the control to grow with the wrapped tag rows instead of clipping them, and pack the rows
-     from the top with a little vertical padding. align-self stops the popup from stretching the
-     combobox to a fixed height, so it sizes to its (wrapped) content. */
+  /* Grow with wrapped tag rows instead of clipping them. Rows stay centred and the size's closed
+     padding-block is kept, so a single row doesn't shift when the popup opens. */
   overflow: visible;
-  align-content: flex-start;
+  align-content: center;
   align-items: center;
   align-self: flex-start;
   height: auto;
-  padding-block: var(--zn-spacing-2x-small);
 }
 
 .select__value-input {
@@ -159,7 +154,14 @@
 /* The tags are rendered into the shadow (not slotted), so target them as descendants. Only the remove
    "X" is clickable (pointer); the chip body isn't, so give it a default cursor rather than letting it
    inherit the combobox's text cursor in search/free-text mode. */
+// Flex, so the inline chip isn't seated on the line box's baseline.
+.select__tags > div {
+  display: flex;
+}
+
 .select__tags zn-chip {
+  --zn-chip-border-radius: var(--zn-select-tag-border-radius);
+  --zn-chip-height: var(--zn-select-tag-height);
   cursor: default;
 }
 
@@ -167,6 +169,11 @@
   cursor: pointer;
 }
 
+.select__tags zn-icon[slot="action"]:focus-visible {
+  outline: var(--zn-focus-ring);
+  border-radius: var(--zn-border-radius-small);
+}
+
 .select--disabled .select__tags,
 .select--disabled .select__tags zn-chip,
 .select--disabled .select__tags zn-icon[slot="action"] {
@@ -177,6 +184,17 @@
 .select--standard .select__combobox {
   background-color: var(--zn-input-background-color);
   border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+  box-shadow: var(--zn-input-shadow, none);
+}
+
+/* Invalid, once the user has interacted */
+:host([data-user-invalid]) .select--standard:not(.select--disabled) .select__combobox {
+  border-color: var(--zn-input-border-color-invalid);
+}
+
+:host([data-user-invalid]) .select--standard:not(.select--disabled).select--focused .select__combobox,
+:host([data-user-invalid]) .select--standard:not(.select--disabled).select--open .select__combobox {
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color-invalid);
 }
 
 .select--standard.select--disabled .select__combobox {
@@ -206,7 +224,7 @@
   font-size: var(--zn-input-font-size-small);
   min-height: var(--zn-input-height-small);
   padding-block: 0;
-  padding-inline: var(--zn-spacing-small);
+  padding-inline: var(--zn-input-padding-inline, var(--zn-spacing-small));
 }
 
 .select--small .select__clear {
@@ -231,7 +249,7 @@
   font-size: var(--zn-input-font-size-medium);
   min-height: var(--zn-input-height-medium);
   padding-block: 0;
-  padding-inline: var(--zn-spacing-small);
+  padding-inline: var(--zn-input-padding-inline, var(--zn-spacing-small));
 }
 
 .select--has-input-prefix.select--medium .select__combobox {
@@ -260,7 +278,7 @@
   font-size: var(--zn-input-font-size-large);
   min-height: var(--zn-input-height-large);
   padding-block: 0;
-  padding-inline: var(--zn-spacing-small);
+  padding-inline: var(--zn-input-padding-inline, var(--zn-spacing-small));
 }
 
 .select--has-input-prefix.select--large .select__combobox {
@@ -355,6 +373,10 @@
   outline: none;
 }
 
+.select__clear:focus-visible {
+  outline: var(--zn-focus-ring);
+}
+
 /* Expand icon */
 .select__expand-icon {
   flex: 0 0 auto;
@@ -362,11 +384,11 @@
   align-items: center;
   transition: var(--zn-transition-medium) rotate ease;
   rotate: 0;
-  margin-inline-start: var(--zn-spacing-small);
+  margin-inline-start: var(--zn-select-expand-icon-spacing, var(--zn-spacing-small));
 
   zn-icon {
-    --icon-size: var(--zn-font-size-large);
-    --icon-color: var(--zn-input-icon-color);
+    --icon-size: var(--zn-select-expand-icon-size, var(--zn-font-size-large));
+    --icon-color: var(--zn-select-expand-icon-color, var(--zn-input-icon-color));
   }
 }
 
@@ -376,16 +398,11 @@
 
 /* Fetch loading spinner */
 .select__spinner {
-  animation: spin 1s linear infinite;
+  @include wc.spin;
   --icon-size: var(--zn-font-size-large);
   --icon-color: var(--zn-input-icon-color);
 }
 
-@keyframes spin {
-  from { rotate: 0deg; }
-  to { rotate: 360deg; }
-}
-
 /* Fetch error icon */
 .select__fetch-error-icon {
   --icon-size: var(--zn-font-size-large);

package/src/components/select/select.test.ts

@@ -233,7 +233,7 @@ describe('<zn-select>', () => {
   });
 
   describe('Escape key', () => {
-    it('blurs the display input when dropdown is closed and Escape is pressed', async () => {
+    it('keeps focus on the display input when the dropdown is closed and Escape is pressed', async () => {
       const el = await fixture<ZnSelect>(html`<zn-select></zn-select>`);
       await el.updateComplete;
 
@@ -251,7 +251,7 @@ describe('<zn-select>', () => {
       }));
       await el.updateComplete;
 
-      expect(el.shadowRoot!.activeElement, 'display input should be blurred').to.not.equal(displayInput);
+      expect(el.shadowRoot!.activeElement, 'display input should keep focus').to.equal(displayInput);
     });
 
   });
@@ -891,6 +891,18 @@ describe('<zn-select> disabled', () => {
     expect(el.open).to.be.false;
   });
 
+  it('should take its chevron from the theme', async () => {
+    const el: any = await fixture(html`
+      <zn-select style="--zn-select-expand-icon: 'expand_more'; --zn-select-expand-icon-size: 18">
+        <zn-option value="a">A</zn-option>
+      </zn-select>`);
+    await el.updateComplete;
+
+    const icon = el.shadowRoot.querySelector('.select__expand-icon zn-icon');
+    expect(icon.getAttribute('src')).to.equal('expand_more');
+    expect(icon.getAttribute('size')).to.equal('18');
+  });
+
   it('should open from the expand icon when enabled', async () => {
     const el: any = await fixture(html`
       <zn-select>

package/src/components/settings-container/settings-container.scss

@@ -71,13 +71,26 @@
 
 .setting-container__toggle-button::part(icon) {
   rotate: 0deg;
-  transition: rotate 0.9s ease-in-out, color 0.9s ease-in-out;
+  transition: rotate var(--zn-transition-medium) var(--zn-ease-out), color var(--zn-transition-fast) ease;
 }
 
-.setting-container__dropdown[open] .setting-container__toggle-button::part(icon), .setting-container__toggle-button:hover::part(icon) {
-  color: rgb(var(--zn-primary));
-  cursor: pointer;
-  rotate: 380deg;
+.setting-container__dropdown[open] .setting-container__toggle-button::part(icon) {
+  color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
+  rotate: 90deg;
+}
+
+@include wc.hover-fine {
+  .setting-container__toggle-button:hover::part(icon) {
+    color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
+    cursor: pointer;
+    rotate: 90deg;
+  }
+}
+
+@include wc.reduced-motion {
+  .setting-container__toggle-button::part(icon) {
+    transition: color var(--zn-transition-fast) ease;
+  }
 }
 
 zn-button {

package/src/components/sidebar/sidebar.component.ts

@@ -83,7 +83,14 @@ export default class ZnSidebar extends ZincElement {
   _expander() {
     const smpCap = this.caption ?? "Close";
     return html`
-      <div id="expander" @click="${(e: MouseEvent) => this.handleClick(e)}">
+      <div id="expander" role="button" tabindex="0" aria-expanded="${this.open}"
+           @click="${(e: MouseEvent) => this.handleClick(e)}"
+           @keydown="${(e: KeyboardEvent) => {
+             if (e.key === 'Enter' || e.key === ' ') {
+               e.preventDefault();
+               this.handleClick(e);
+             }
+           }}">
         <zn-icon src="arrow_downward" library="material"></zn-icon>
         <span class="close"> Close ${this.caption}</span>
         <span class="close-sm">${smpCap}</span>

package/src/components/sidebar/sidebar.scss

@@ -107,6 +107,11 @@
     }
 
     #expander {
+      &:focus-visible {
+        outline: var(--zn-focus-ring);
+        outline-offset: calc(-1 * var(--zn-focus-ring-width));
+      }
+
       cursor: pointer;
       display: flex;
       flex-direction: row-reverse;
@@ -162,7 +167,7 @@
         color: rgb(var(--zn-text));
         margin-left: var(--zn-spacing-medium);
         margin-right: var(--zn-spacing-medium);
-        transition: all 500ms ease-in-out;
+        transition: rotate var(--zn-transition-medium) var(--zn-ease-out);
         rotate: 0;
 
         @include wc.container-query(ph) {

package/src/components/skeleton/skeleton.component.ts

@@ -15,7 +15,7 @@ import styles from './skeleton.scss';
  * @property {string} speed - Animation speed for the shimmer effect. Default: "3s"
  * @property {string} width - Width of the skeleton element. Default: "100%"
  * @property {string} height - Height of the skeleton element. Default: "20px"
- * @property {string} radius - Border radius of the skeleton element. Default: "4px"
+ * @property {string} radius - Border radius of the skeleton element. Defaults to the theme's `--zn-skeleton-border-radius` (4px).
  */
 export default class ZnSkeleton extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -23,7 +23,7 @@ export default class ZnSkeleton extends ZincElement {
   @property({attribute: 'speed', type: String}) speed = '3s';
   @property({attribute: 'width', type: String}) width = '100%';
   @property({attribute: 'height', type: String}) height = '20px';
-  @property({attribute: 'radius', type: String}) radius = '4px';
+  @property({attribute: 'radius', type: String}) radius = '';
 
   protected render(): unknown {
     return html`
@@ -32,7 +32,7 @@ export default class ZnSkeleton extends ZincElement {
              '--skeleton-speed': `${this.speed}`,
              '--skeleton-width': `${this.width}`,
              '--skeleton-height': `${this.height}`,
-             '--skeleton-border-radius': `${this.radius}`,
+             ...(this.radius ? {'--skeleton-border-radius': this.radius} : {}),
            })}
       ></div>`;
   }