@ds-mo/ui 1.5.0 → 1.6.0

package/dist/components/p-uMN1Ppw2.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toggleButtonCss","ICON_SIZE","md","sm","xs","ICON_PX","TEXT_CLASS","ToggleButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","size","rounded","pressed","inactive","handleClick","dsChange","emit","render","iconSize","iconPx","textClass","hasIcon","icon","hasLabel","label","isIconOnly","isLabelOnly","isIconAndLabel","bg","background","elevKey","charAt","toUpperCase","slice","cls","sizeSM","sizeXS","iconOnly","labelOnly","iconAndLabel","onMedium","onBold","onStrong","onAlwaysDark","h","Host","key","type","class","disabled","ariaLabel","onClick","style","fontSize","name"],"sources":["src/wc/components/ToggleButton/ToggleButton.css?tag=ds-toggle-button&encapsulation=scoped","src/wc/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["/* ==========================================================================\n   ToggleButton — hover/pressed via direct background-color + color-mix().\n   Elevation controls the chrome level:\n     elevated — bg-primary + shadow  (default)\n     flat     — border only\n     none     — ghost (transparent, no border, no shadow)\n     floating — bg-primary + FAB-strength shadow\n   ========================================================================== */\n\n.toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--dimension-radius-050);\n  cursor: pointer;\n  position: relative;\n  transition: transform var(--effect-motion-short-2);\n  height: var(--dimension-size-400);\n  font-family: inherit;\n  background: transparent;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n\n  /* Interaction — ghost defaults */\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_border: var(--color-border-tertiary);\n}\n\n.toggle-btn:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.toggle-btn:hover:not(.inactive) {\n  background-color: var(--_hover-bg);\n}\n\n.toggle-btn:active:not(.inactive) {\n  background-color: var(--_pressed-bg);\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n/* ==========================================================================\n   Background context — parent surface awareness\n   ========================================================================== */\n\n.onMedium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_border: var(--color-border-on-medium-background-tertiary);\n}\n\n.onBold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_border: var(--color-border-on-bold-background-tertiary);\n}\n\n.onStrong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_border: var(--color-border-on-strong-background-tertiary);\n}\n\n.onAlwaysDark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_border: var(--color-always-dark-border-tertiary);\n}\n\n/* ==========================================================================\n   Elevation levels\n   ========================================================================== */\n\n/* ── Elevated (default): bg-primary + shadow ───────────────────────────── */\n\n.elevationElevated {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  color: var(--color-foreground-secondary);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n/* ── Flat: border only, transparent bg ─────────────────────────────────── */\n\n.elevationFlat {\n  box-shadow: inset 0 0 0 1px var(--_border);\n  color: var(--color-foreground-secondary);\n}\n\n/* ── None: ghost — transparent, no border, no shadow ───────────────────── */\n\n.elevationNone {\n  color: var(--color-foreground-secondary);\n}\n\n/* ── Floating: bg-primary + FAB-strength shadow ─────────────────────────── */\n\n.elevationFloating {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  color: var(--color-foreground-secondary);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n/* ── Fg on bold / strong surface ────────────────────────────────────────── */\n\n.onBold.elevationNone, .onBold.elevationFlat,\n.onStrong.elevationNone, .onStrong.elevationFlat {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n/* ── Fg on always-dark surface ─────────────────────────────────────────── */\n\n.onAlwaysDark.elevationNone, .onAlwaysDark.elevationFlat {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/* ==========================================================================\n   Pressed state — shared across all elevation levels\n   ========================================================================== */\n\n.pressed {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n/* ==========================================================================\n   Layout\n   ========================================================================== */\n\n.iconOnly    { padding: 0; width: var(--dimension-size-400); min-width: var(--dimension-size-400); }\n.labelOnly   { padding: 0 var(--dimension-space-100); }\n.iconAndLabel { padding: 0 var(--dimension-space-100) 0 var(--dimension-space-075); gap: var(--dimension-space-025); }\n\n/* ==========================================================================\n   Sizes\n   ========================================================================== */\n\n.sizeSM { height: var(--dimension-size-300); }\n.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }\n.sizeSM.labelOnly   { padding: 0 var(--dimension-space-075); }\n.sizeSM.iconAndLabel { padding: 0 var(--dimension-space-075) 0 var(--dimension-space-050); gap: 0; }\n\n.sizeXS { height: var(--dimension-size-200); }\n.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }\n.sizeXS.labelOnly, .sizeXS.iconAndLabel { padding: 0 var(--dimension-space-025); gap: 0; }\n\n/* ==========================================================================\n   Rounded (pill shape)\n   ========================================================================== */\n\n.rounded { border-radius: var(--dimension-radius-half); }\n.rounded.labelOnly   { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.iconAndLabel { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.sizeSM.labelOnly   { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeSM.iconAndLabel { padding-left: calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.iconOnly { width: var(--dimension-size-400); min-width: var(--dimension-size-400); padding: 0; }\n.rounded.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }\n.rounded.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }\n\n/* ==========================================================================\n   Disabled\n   ========================================================================== */\n\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ==========================================================================\n   Inner slots\n   ========================================================================== */\n\n.toggle-btn__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n.toggle-btn__label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { IconSize } from '../Icon/Icon';\n\nexport type ToggleButtonElevation  = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ToggleButtonSize       = 'md' | 'sm' | 'xs';\nexport type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nconst ICON_SIZE: Record<ToggleButtonSize, IconSize> = { md: 'md', sm: 'sm', xs: 'xs' };\n\n// Pixel size reference for internal layout (icon span font-size)\nconst ICON_PX: Record<ToggleButtonSize, number> = { md: 20, sm: 16, xs: 12 };\n\nconst TEXT_CLASS: Record<ToggleButtonSize, string> = {\n  md: 'text-body-medium-emphasis',\n  sm: 'text-body-small-emphasis',\n  xs: 'text-caption-emphasis',\n};\n\n@Component({\n  tag: 'ds-toggle-button',\n  styleUrl: 'ToggleButton.css',\n  scoped: true,\n})\nexport class ToggleButton {\n  /**\n   * Chrome level.\n   *   none     — ghost (transparent, no border, no shadow)\n   *   flat     — border only, transparent bg\n   *   elevated — bg-primary + shadow  [default]\n   *   floating — bg-primary + FAB-strength shadow\n   */\n  @Prop() elevation: ToggleButtonElevation = 'elevated';\n\n  /** Label text. */\n  @Prop() label: string | undefined;\n\n  /**\n   * Icon name for <ds-icon>. Set via JS property.\n   * @example el.icon = 'GridView';\n   */\n  @Prop() icon: string | undefined;\n\n  /** Size: md (32px), sm (24px), xs (16px). */\n  @Prop() size: ToggleButtonSize = 'md';\n\n  /** Pill shape. */\n  @Prop() rounded: boolean = false;\n\n  /** Parent surface context — adjusts hover tokens for colored backgrounds. */\n  @Prop() background: ToggleButtonBackground | undefined;\n\n  /** Controlled pressed state. */\n  @Prop({ mutable: true }) pressed: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n  /** Emits the new pressed value (!pressed) on click. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (this.inactive) return;\n    this.dsChange.emit(!this.pressed);\n  };\n\n  render() {\n    const size = this.size;\n    const iconSize = ICON_SIZE[size];\n    const iconPx = ICON_PX[size];\n    const textClass = TEXT_CLASS[size];\n    const hasIcon = !!this.icon;\n    const hasLabel = !!this.label;\n    const isIconOnly = hasIcon && !hasLabel;\n    const isLabelOnly = hasLabel && !hasIcon;\n    const isIconAndLabel = hasIcon && hasLabel;\n    const bg = this.background;\n    const elevKey = this.elevation.charAt(0).toUpperCase() + this.elevation.slice(1);\n\n    const cls: Record<string, boolean> = {\n      'toggle-btn': true,\n      [`elevation${elevKey}`]: true,\n      sizeSM: size === 'sm',\n      sizeXS: size === 'xs',\n      rounded: this.rounded,\n      inactive: this.inactive,\n      pressed: this.pressed,\n      iconOnly: isIconOnly,\n      labelOnly: isLabelOnly,\n      iconAndLabel: isIconAndLabel,\n      onMedium: bg === 'medium',\n      onBold: bg === 'bold',\n      onStrong: bg === 'strong',\n      onAlwaysDark: bg === 'always-dark',\n    };\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={cls}\n          disabled={this.inactive}\n          aria-label={this.ariaLabel ?? this.label ?? 'toggle'}\n          aria-pressed={this.pressed}\n          onClick={this.handleClick}\n        >\n          {hasIcon && (\n            <span class=\"toggle-btn__icon\" style={{ fontSize: `${iconPx}px` }}>\n              <ds-icon name={this.icon} size={iconSize} />\n            </span>\n          )}\n          {hasLabel && (\n            <span class={`toggle-btn__label ${textClass}`}>{this.label}</span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAkB,IAAM,8hLCO9B,MAAMC,EAAgD,CAAEC,GAAI,KAAMC,GAAI,KAAMC,GAAI,MAGhF,MAAMC,EAA4C,CAAEH,GAAI,GAAIC,GAAI,GAAIC,GAAI,IAExE,MAAME,EAA+C,CACnDJ,GAAI,4BACJC,GAAI,2BACJC,GAAI,yB,MAQOG,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,6EAaUC,KAAAC,UAAmC,WAYnCD,KAAAE,KAAyB,KAGzBF,KAAAG,QAAmB,MAMFH,KAAAI,QAAmB,MAGpCJ,KAAAK,SAAoB,MAOpBL,KAAAM,YAAc,KACpB,GAAIN,KAAKK,SAAU,OACnBL,KAAKO,SAASC,MAAMR,KAAKI,QAAQ,CAuDpC,CApDC,MAAAK,GACE,MAAMP,EAAOF,KAAKE,KAClB,MAAMQ,EAAWrB,EAAUa,GAC3B,MAAMS,EAASlB,EAAQS,GACvB,MAAMU,EAAYlB,EAAWQ,GAC7B,MAAMW,IAAYb,KAAKc,KACvB,MAAMC,IAAaf,KAAKgB,MACxB,MAAMC,EAAaJ,IAAYE,EAC/B,MAAMG,EAAcH,IAAaF,EACjC,MAAMM,EAAiBN,GAAWE,EAClC,MAAMK,EAAKpB,KAAKqB,WAChB,MAAMC,EAAUtB,KAAKC,UAAUsB,OAAO,GAAGC,cAAgBxB,KAAKC,UAAUwB,MAAM,GAE9E,MAAMC,EAA+B,CACnC,aAAc,KACd,CAAC,YAAYJ,KAAY,KACzBK,OAAQzB,IAAS,KACjB0B,OAAQ1B,IAAS,KACjBC,QAASH,KAAKG,QACdE,SAAUL,KAAKK,SACfD,QAASJ,KAAKI,QACdyB,SAAUZ,EACVa,UAAWZ,EACXa,aAAcZ,EACda,SAAUZ,IAAO,SACjBa,OAAQb,IAAO,OACfc,SAAUd,IAAO,SACjBe,aAAcf,IAAO,eAGvB,OACEgB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAOd,EACPe,SAAUzC,KAAKK,SAAQ,aACXL,KAAK0C,WAAa1C,KAAKgB,OAAS,SAAQ,eACtChB,KAAKI,QACnBuC,QAAS3C,KAAKM,aAEbO,GACCuB,EAAA,QAAAE,IAAA,2CAAME,MAAM,mBAAmBI,MAAO,CAAEC,SAAU,GAAGlC,QACnDyB,EAAA,WAAAE,IAAA,2CAASQ,KAAM9C,KAAKc,KAAMZ,KAAMQ,KAGnCK,GACCqB,EAAA,QAAAE,IAAA,2CAAME,MAAO,qBAAqB5B,KAAcZ,KAAKgB,Q","ignoreList":[]}

package/dist/types/components/Sidebar/Sidebar.d.ts

@@ -1,29 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export type SidebarWidth = 'mini' | 'default' | number;
-export declare class Sidebar {
-    el: HTMLElement;
-    collapsed: boolean;
-    width: SidebarWidth;
-    resizable: boolean;
-    mobile: boolean;
-    private isResizing;
-    dsToggle: EventEmitter<void>;
-    dsWidthChange: EventEmitter<SidebarWidth>;
-    private triggerEl;
-    private escapeHandler;
-    private tabHandler;
-    private mouseMoveHandler;
-    private mouseUpHandler;
-    private get resolvedWidth();
-    private get isMobileOpen();
-    onCollapsedChange(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    private setupMobileFocusTrap;
-    private teardownMobileFocusTrap;
-    private cleanupMouseHandlers;
-    private handleResizeMouseDown;
-    private handleResizeKeyDown;
-    render(): any;
-}
-//# sourceMappingURL=Sidebar.d.ts.map

package/src/react/ds-sidebar.ts

@@ -1,33 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import { type DsSidebarCustomEvent, type SidebarWidth } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsSidebar as DsSidebarElement, defineCustomElement as defineDsSidebar } from "@ds-mo/ui/dist/components/ds-sidebar.js";
-
-export type DsSidebarEvents = {
-    onDsToggle: EventName<DsSidebarCustomEvent<void>>,
-    onDsWidthChange: EventName<DsSidebarCustomEvent<SidebarWidth>>
-};
-
-export const DsSidebar: StencilReactComponent<DsSidebarElement, DsSidebarEvents, Components.DsSidebar> = /*@__PURE__*/ createComponent<DsSidebarElement, DsSidebarEvents, Components.DsSidebar>({
-    tagName: 'ds-sidebar',
-    elementClass: DsSidebarElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onDsToggle: 'dsToggle',
-        onDsWidthChange: 'dsWidthChange'
-    } as DsSidebarEvents,
-    defineCustomElement: defineDsSidebar
-});

package/src/wc/components/Sidebar/Sidebar.tsx

@@ -1,245 +0,0 @@
-import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';
-
-export type SidebarWidth = 'mini' | 'default' | number;
-
-const MINI_WIDTH = 56;
-const DEFAULT_WIDTH = 240;
-const MAX_WIDTH = 480;
-const MIN_DRAG_WIDTH = 180;
-const SNAP_THRESHOLD = 140;
-const KEYBOARD_STEP = 16;
-
-const FOCUSABLE_SEL = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(',');
-
-@Component({
-  tag: 'ds-sidebar',
-  styleUrl: 'Sidebar.css',
-  scoped: true,
-})
-export class Sidebar {
-  @Element() el!: HTMLElement;
-
-  @Prop({ mutable: true }) collapsed: boolean = false;
-  @Prop() width: SidebarWidth = 'default';
-  @Prop() resizable: boolean = true;
-  @Prop() mobile: boolean = false;
-
-  @State() private isResizing: boolean = false;
-
-  @Event() dsToggle!: EventEmitter<void>;
-  @Event() dsWidthChange!: EventEmitter<SidebarWidth>;
-
-  private triggerEl: HTMLElement | null = null;
-  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;
-  private tabHandler: ((e: KeyboardEvent) => void) | null = null;
-  private mouseMoveHandler: ((e: MouseEvent) => void) | null = null;
-  private mouseUpHandler: (() => void) | null = null;
-
-  private get resolvedWidth(): number {
-    if (this.width === 'mini') return MINI_WIDTH;
-    if (this.width === 'default') return DEFAULT_WIDTH;
-    return this.width as number;
-  }
-
-  private get isMobileOpen(): boolean {
-    return this.mobile && !this.collapsed;
-  }
-
-  @Watch('collapsed')
-  onCollapsedChange() {
-    if (this.isMobileOpen) {
-      this.setupMobileFocusTrap();
-    } else {
-      this.teardownMobileFocusTrap();
-    }
-  }
-
-  componentDidLoad() {
-    if (this.isMobileOpen) {
-      this.setupMobileFocusTrap();
-    }
-    if (this.mobile) {
-      this.escapeHandler = (e: KeyboardEvent) => {
-        if (e.key === 'Escape' && !this.collapsed) {
-          this.dsToggle.emit();
-        }
-      };
-      document.addEventListener('keydown', this.escapeHandler);
-    }
-  }
-
-  disconnectedCallback() {
-    this.teardownMobileFocusTrap();
-    if (this.escapeHandler) {
-      document.removeEventListener('keydown', this.escapeHandler);
-      this.escapeHandler = null;
-    }
-    this.cleanupMouseHandlers();
-  }
-
-  private setupMobileFocusTrap() {
-    this.triggerEl = document.activeElement as HTMLElement | null;
-
-    const focusables = () =>
-      Array.from(this.el.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(
-        el => !el.hasAttribute('aria-hidden') && el.offsetParent !== null,
-      );
-
-    const initial = focusables();
-    (initial[0] ?? this.el).focus();
-
-    this.tabHandler = (e: KeyboardEvent) => {
-      if (e.key !== 'Tab') return;
-      const items = focusables();
-      if (!items.length) { e.preventDefault(); this.el.focus(); return; }
-      const first = items[0];
-      const last = items[items.length - 1];
-      const active = document.activeElement as HTMLElement | null;
-      if (e.shiftKey && (active === first || !this.el.contains(active))) {
-        e.preventDefault(); last.focus();
-      } else if (!e.shiftKey && (active === last || !this.el.contains(active))) {
-        e.preventDefault(); first.focus();
-      }
-    };
-    document.addEventListener('keydown', this.tabHandler);
-  }
-
-  private teardownMobileFocusTrap() {
-    if (this.tabHandler) {
-      document.removeEventListener('keydown', this.tabHandler);
-      this.tabHandler = null;
-    }
-    this.triggerEl?.focus?.();
-    this.triggerEl = null;
-  }
-
-  private cleanupMouseHandlers() {
-    if (this.mouseMoveHandler) document.removeEventListener('mousemove', this.mouseMoveHandler);
-    if (this.mouseUpHandler) document.removeEventListener('mouseup', this.mouseUpHandler);
-    this.mouseMoveHandler = null;
-    this.mouseUpHandler = null;
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-  }
-
-  private handleResizeMouseDown(e: MouseEvent) {
-    if (!this.resizable) return;
-    e.preventDefault();
-    this.isResizing = true;
-
-    this.mouseMoveHandler = (ev: MouseEvent) => {
-      const newW = ev.clientX;
-      if (newW < SNAP_THRESHOLD) {
-        this.dsWidthChange.emit('mini');
-      } else if (newW < MIN_DRAG_WIDTH) {
-        this.dsWidthChange.emit('default');
-      } else {
-        this.dsWidthChange.emit(newW);
-      }
-    };
-
-    this.mouseUpHandler = () => {
-      this.isResizing = false;
-      this.cleanupMouseHandlers();
-    };
-
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-    document.addEventListener('mousemove', this.mouseMoveHandler);
-    document.addEventListener('mouseup', this.mouseUpHandler);
-  }
-
-  private handleResizeKeyDown(e: KeyboardEvent) {
-    if (!this.resizable) return;
-    const w = this.width;
-    const resolved = this.resolvedWidth;
-
-    switch (e.key) {
-      case 'ArrowLeft': {
-        e.preventDefault();
-        if (w === 'mini') return;
-        const next = resolved - KEYBOARD_STEP;
-        this.dsWidthChange.emit(next < MIN_DRAG_WIDTH ? 'mini' : next);
-        break;
-      }
-      case 'ArrowRight': {
-        e.preventDefault();
-        if (w === 'mini') { this.dsWidthChange.emit('default'); return; }
-        this.dsWidthChange.emit(Math.min(resolved + KEYBOARD_STEP, MAX_WIDTH));
-        break;
-      }
-      case 'Home':
-        e.preventDefault();
-        this.dsWidthChange.emit('mini');
-        break;
-      case 'End':
-        e.preventDefault();
-        this.dsWidthChange.emit(MAX_WIDTH);
-        break;
-    }
-  }
-
-  render() {
-    if (this.collapsed && !this.mobile) return null;
-
-    const isMini = this.width === 'mini';
-    const isMobileOpen = this.isMobileOpen;
-    const sidebarWidth = this.collapsed ? 0 : this.resolvedWidth;
-
-    const dialogProps = isMobileOpen
-      ? { role: 'dialog', 'aria-modal': 'true', tabIndex: -1 }
-      : { role: 'navigation' };
-
-    return (
-      <Host>
-        {this.mobile && !this.collapsed && (
-          <div
-            class="backdrop"
-            onClick={() => this.dsToggle.emit()}
-            aria-hidden="true"
-          />
-        )}
-        <aside
-          class={{
-            sidebar: true,
-            'sidebar--mini': isMini,
-            'sidebar--mobile': this.mobile,
-            'sidebar--collapsed': this.collapsed,
-            'sidebar--resizing': this.isResizing,
-          }}
-          style={{ width: `${sidebarWidth}px` }}
-          aria-label="Sidebar"
-          {...dialogProps}
-        >
-          <div class="sidebar__content">
-            <slot />
-          </div>
-          <div class="sidebar__footer">
-            <slot name="footer" />
-          </div>
-          {this.resizable && !this.mobile && (
-            <div
-              class="sidebar__resize-handle"
-              onMouseDown={(e: MouseEvent) => this.handleResizeMouseDown(e)}
-              onKeyDown={(e: KeyboardEvent) => this.handleResizeKeyDown(e)}
-              role="separator"
-              aria-orientation="vertical"
-              aria-label="Resize sidebar"
-              aria-valuenow={this.resolvedWidth}
-              aria-valuemin={MINI_WIDTH}
-              aria-valuemax={MAX_WIDTH}
-              tabIndex={0}
-            />
-          )}
-        </aside>
-      </Host>
-    );
-  }
-}