@redvars/peacock 3.2.9 → 3.3.0

package/dist/{image-DK6VQW7N.js → slider-Dk9CFWTG.js}

@@ -1,12 +1,13 @@
-import { i, _ as __decorate, n, a as i$1, b, c as __classPrivateFieldGet, A } from './PeacockComponent-CxJc63xj.js';
-import { r } from './state-B09bP3XH.js';
+import { i, _ as __decorate, n, a as i$1, b, c as __classPrivateFieldGet, A } from './IndividualComponent-tDnXrOLV.js';
+import { r } from './state-8v48Exzh.js';
 import { e as e$1 } from './directive-Cuw6h7YA.js';
-import { e as e$2 } from './unsafe-html-B-dV3Jps.js';
-import { b as e, c as createCacheFetch, s as sanitizeSvg, o as observerSlotChangesWithCallback, t as throttle, e as e$4, r as redispatchEvent, a as isDarkMode } from './dispatch-event-utils-vbdiOSeC.js';
-import { e as e$3 } from './class-map-BvQRv7eW.js';
-import { c as css_248z$x, a as css_248z$y, b as BaseButton, s as spread } from './button-2MeDq0Yy.js';
-import { o as o$3 } from './style-map-B8xgVEc9.js';
-import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-NneLARW8.js';
+import { e as e$2 } from './unsafe-html-CV6Je6HL.js';
+import { c as createCacheFetch, s as sanitizeSvg, o as observerSlotChangesWithCallback, t as throttle, r as redispatchEvent, a as isDarkMode, i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-B4odODQf.js';
+import { e as e$3 } from './class-map-DpeNtqCn.js';
+import { c as css_248z$C, a as css_248z$D, b as BaseButton, s as spread } from './button-BGFJfbT2.js';
+import { a as e, e as e$4 } from './query-QBcUV-L_.js';
+import { o as o$3 } from './style-map-CfNHEkQp.js';
+import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-BISF-Gl5.js';
 
 /**
  * @license
@@ -39,7 +40,7 @@ async function fetchIcon(name, provider = 'material-symbols') {
     return fetchSVG(PROVIDERS[provider](name));
 }
 
-var css_248z$w = i`* {
+var css_248z$B = i`* {
   box-sizing: border-box;
 }
 
@@ -69,7 +70,7 @@ var css_248z$w = i`* {
 
 /**
  * @label Icon
- * @tag base-icon
+ * @tag wc-icon
  * @rawTag icon
  * @summary Icons are visual symbols used to represent ideas, objects, or actions.
  * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
@@ -79,7 +80,7 @@ var css_248z$w = i`* {
  *
  * @example
  * ```html
- * <base-icon name="home" style="--icon-size: 2rem;"></base-icon>
+ * <wc-icon name="home" style="--icon-size: 2rem;"></wc-icon>
  * ```
  *
  */
@@ -168,7 +169,7 @@ class Icon extends i$1 {
         }
     }
 }
-Icon.styles = [css_248z$w];
+Icon.styles = [css_248z$B];
 __decorate([
     n({ type: String, reflect: true })
 ], Icon.prototype, "name", void 0);
@@ -188,7 +189,7 @@ __decorate([
     r()
 ], Icon.prototype, "error", void 0);
 
-var css_248z$v = i`* {
+var css_248z$A = i`* {
   box-sizing: border-box;
 }
 
@@ -237,7 +238,7 @@ var css_248z$v = i`* {
 
 /**
  * @label Avatar
- * @tag base-avatar
+ * @tag wc-avatar
  * @rawTag avatar
  * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
  *
@@ -249,7 +250,7 @@ var css_248z$v = i`* {
  *
  * @example
  * ```html
- * <base-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></base-avatar>
+ * <wc-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></wc-avatar>
  * ```
  *
  * @tags display
@@ -279,7 +280,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$v];
+Avatar.styles = [css_248z$A];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -287,7 +288,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$u = i`* {
+var css_248z$z = i`* {
   box-sizing: border-box;
 }
 
@@ -328,7 +329,7 @@ var css_248z$u = i`* {
 
 /**
  * @label Badge
- * @tag base-badge
+ * @tag wc-badge
  * @rawTag badge
  * @summary The badge component is used to display a small amount of information to the user.
  *
@@ -336,7 +337,7 @@ var css_248z$u = i`* {
  *
  * @example
  * ```html
- * <base-badge value="1"></base-badge>
+ * <wc-badge value="1"></wc-badge>
  * ```
  * @tags display
  */
@@ -359,12 +360,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$u];
+Badge.styles = [css_248z$z];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$t = i`* {
+var css_248z$y = i`* {
   box-sizing: border-box;
 }
 
@@ -428,7 +429,7 @@ var css_248z$t = i`* {
 
 /**
  * @label Divider
- * @tag base-divider
+ * @tag wc-divider
  * @rawTag divider
  *
  * @summary The divider component is used to visually separate content.
@@ -441,7 +442,7 @@ var css_248z$t = i`* {
  *
  * @example
  * ```html
- * <base-divider style="width: 12rem;">or</base-divider>
+ * <wc-divider style="width: 12rem;">or</wc-divider>
  * ```
  * @tags display
  */
@@ -473,7 +474,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$t];
+Divider.styles = [css_248z$y];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -481,7 +482,7 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$s = i`/**
+var css_248z$x = i`/**
  * Derived from Material Design Elevation
  * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
  */
@@ -529,7 +530,7 @@ var css_248z$s = i`/**
 
 /**
  * @label Elevation
- * @tag base-elevation
+ * @tag wc-elevation
  * @rawTag elevation
  *
  * @summary Adds elevation to an element.
@@ -543,7 +544,7 @@ var css_248z$s = i`/**
  * @example
  * ```html
  *   <div style="position: relative; padding: var(--spacing-200);">
- *     <base-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></base-elevation>
+ *     <wc-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></wc-elevation>
  *     Level 2
  *   </div>
  * ```
@@ -554,9 +555,9 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$s];
+Elevation.styles = [css_248z$x];
 
-var css_248z$r = i`.button {
+var css_248z$w = i`.button {
   --_container-padding: 0.75rem;
   width: var(--_button-height);
   --_container-padding: 0;
@@ -595,7 +596,7 @@ var css_248z$r = i`.button {
 var _IconButton_id, _IconButton_tabindex;
 /**
  * @label Icon Button
- * @tag icon-button
+ * @tag wc-icon-button
  * @rawTag icon-button
  *
  * @summary Icon buttons allow users to take actions, and make choices, with a single tap.
@@ -632,7 +633,7 @@ var _IconButton_id, _IconButton_tabindex;
  *
  * @example
  * ```html
- * <icon-button name="home"></icon-button>
+ * <wc-icon-button name="home"></wc-icon-button>
  * ```
  * @tags display
  */
@@ -704,20 +705,20 @@ class IconButton extends BaseButton {
     }
     renderButtonContent() {
         return b `
-      <focus-ring class="focus-ring" .control=${this} element="buttonElement"></focus-ring>
-      <base-elevation class="elevation"></base-elevation>
+      <wc-focus-ring class="focus-ring" .control=${this} element="buttonElement"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
       <div class="outline"></div>
-      <base-ripple class="ripple"></base-ripple>
-      <base-skeleton class="skeleton"></base-skeleton>
+      <wc-ripple class="ripple"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
 
       <div class="button-content">
-        <base-icon
+        <wc-icon
           name=${this.name}
           src=${this.src}
           provider=${this.provider}
-        ></base-icon>
+        ></wc-icon>
       </div>
 
       ${this.__renderDisabledReason()}
@@ -725,7 +726,7 @@ class IconButton extends BaseButton {
     }
 }
 _IconButton_id = new WeakMap(), _IconButton_tabindex = new WeakMap();
-IconButton.styles = [css_248z$x, css_248z$y, css_248z$r];
+IconButton.styles = [css_248z$C, css_248z$D, css_248z$w];
 __decorate([
     n({ type: String, reflect: true })
 ], IconButton.prototype, "name", void 0);
@@ -736,7 +737,7 @@ __decorate([
     n({ type: String })
 ], IconButton.prototype, "provider", void 0);
 
-var css_248z$q = i`:host {
+var css_248z$v = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -745,6 +746,7 @@ var css_248z$q = i`:host {
   border-end-start-radius: var(--focus-ring-container-shape-end-start);
   border-end-end-radius: var(--focus-ring-container-shape-end-end);
   corner-shape: var(--focus-ring-container-shape-variant);
+  --focus-ring-color: var(--color-primary);
   inset: calc(-1 * var(--focus-ring-inset, 2px));
   animation-delay: 0s, calc(var(--focus-ring-duration, 600ms) * 0.25);
   animation-duration: calc(var(--focus-ring-duration, 600ms) * 0.25), calc(var(--focus-ring-duration, 600ms) * 0.75);
@@ -754,13 +756,13 @@ var css_248z$q = i`:host {
 
 :host([visible]) {
   display: flex;
-  outline: 3px solid var(--color-primary);
+  outline: 3px solid var(--focus-ring-color);
 }`;
 
 /**
  * @label Focus Ring
  *
- * @tag focus-ring
+ * @tag wc-focus-ring
  * @rawTag focus-ring
  *
  * @summary Adds a focus ring to an element.
@@ -830,7 +832,7 @@ class FocusRing extends i$1 {
         this._control = undefined;
     }
 }
-FocusRing.styles = [css_248z$q];
+FocusRing.styles = [css_248z$v];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
@@ -838,151 +840,460 @@ __decorate([
     n({ type: String })
 ], FocusRing.prototype, "element", void 0);
 
+const PRESS_GROW_MS = 450;
+const MINIMUM_PRESS_MS = 225;
+const INITIAL_ORIGIN_SCALE = 0.2;
+const PADDING = 10;
+const SOFT_EDGE_MINIMUM_SIZE = 75;
+const SOFT_EDGE_CONTAINER_RATIO = 0.35;
+const PRESS_PSEUDO = '::after';
+const ANIMATION_FILL = 'forwards';
+/**
+ * Interaction states for the ripple.
+ *
+ * On Touch:
+ *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
+ *
+ * On Mouse or Pen:
+ *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
+ */
+var State;
+(function (State) {
+    /**
+     * Initial state of the control, no touch in progress.
+     *
+     * Transitions:
+     *   - on touch down: transition to `TOUCH_DELAY`.
+     *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+     */
+    State[State["INACTIVE"] = 0] = "INACTIVE";
+    /**
+     * Touch down has been received, waiting to determine if it's a swipe or
+     * scroll.
+     *
+     * Transitions:
+     *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.
+     *   - on cancel: transition to `INACTIVE`.
+     *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.
+     */
+    State[State["TOUCH_DELAY"] = 1] = "TOUCH_DELAY";
+    /**
+     * A touch has been deemed to be a press
+     *
+     * Transitions:
+     *  - on up: transition to `WAITING_FOR_CLICK`.
+     */
+    State[State["HOLDING"] = 2] = "HOLDING";
+    /**
+     * The user touch has finished, transition into rest state.
+     *
+     * Transitions:
+     *   - on click end press; transition to `INACTIVE`.
+     */
+    State[State["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK";
+})(State || (State = {}));
+/**
+ * Events that the ripple listens to.
+ */
+const EVENTS = [
+    'click',
+    'contextmenu',
+    'pointercancel',
+    'pointerdown',
+    'pointerenter',
+    'pointerleave',
+    'pointerup',
+];
+/**
+ * Delay reacting to touch so that we do not show the ripple for a swipe or
+ * scroll interaction.
+ */
+const TOUCH_DELAY_MS = 150;
+/**
+ * Used to detect if HCM is active. Events do not process during HCM when the
+ * ripple is not displayed.
+ */
+const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
+/**
+ * @label Ripple
+ * @tag wc-ripple
+ * @rawTag ripple
+ *
+ * @summary Provides ripple effect for interactive elements.
+ * @overview
+ * <p>Ripple creates a visual feedback effect when users interact with buttons or other clickable elements.</p>
+ *
+ * @example
+ * ```html
+ * <button style="position: relative;">
+ *   <wc-ripple></wc-ripple>
+ *   Click me
+ * </button>
+ * ```
+ * @tags display
+ */
 class Ripple extends i$1 {
     constructor() {
         super(...arguments);
-        // Arrow function to bind 'this' automatically
-        this._createRipple = (event) => {
-            const parent = this.parentElement;
-            if (!parent)
-                return;
-            const rect = parent.getBoundingClientRect();
-            // 1. Calculate diameter (furthest corner)
-            const diameter = Math.max(rect.width, rect.height) * 2.5;
-            const radius = diameter / 2;
-            // 2. Calculate position relative to the parent
-            const x = event.clientX - rect.left;
-            const y = event.clientY - rect.top;
-            // 3. Create the ripple element
-            // We create this manually to avoid triggering a full Lit render cycle
-            // for a transient, fire-and-forget animation.
-            const ripple = document.createElement('div');
-            ripple.classList.add('ripple-effect');
-            ripple.style.width = `${diameter}px`;
-            ripple.style.height = `${diameter}px`;
-            ripple.style.left = `${x - radius}px`;
-            ripple.style.top = `${y - radius}px`;
-            // 4. Append to Shadow DOM
-            this.renderRoot.appendChild(ripple);
-            // 5. Cleanup
-            ripple.addEventListener('animationend', () => {
-                ripple.remove();
-            });
-        };
+        /**
+         * Disables the ripple.
+         */
+        this.disabled = false;
+        this.hovered = false;
+        this.pressed = false;
+        this.rippleSize = '';
+        this.rippleScale = '';
+        this.initialSize = 0;
+        this.state = State.INACTIVE;
     }
     connectedCallback() {
         super.connectedCallback();
-        // We defer slightly to ensure the parent DOM is ready
-        requestAnimationFrame(() => {
-            this._setupParent();
-        });
+        // Needed for VoiceOver, which will create a "group" if the element is a
+        // sibling to other content.
+        this.setAttribute('aria-hidden', 'true');
+        // Attach to parent
+        this.attach(this.parentElement);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        if (this.parentElement) {
-            this.parentElement.removeEventListener('pointerdown', this._createRipple);
+        this.detach();
+    }
+    attach(control) {
+        if (!control)
+            return;
+        EVENTS.forEach(event => {
+            control.addEventListener(event, this.handleEvent.bind(this));
+        });
+    }
+    detach() {
+        const control = this.parentElement;
+        if (!control)
+            return;
+        EVENTS.forEach(event => {
+            control.removeEventListener(event, this.handleEvent.bind(this));
+        });
+    }
+    render() {
+        const classes = {
+            'hovered': this.hovered,
+            'pressed': this.pressed,
+        };
+        return b `<div class="surface ${e$3(classes)}"></div>`;
+    }
+    update(changedProps) {
+        if (changedProps.has('disabled') && this.disabled) {
+            this.hovered = false;
+            this.pressed = false;
         }
+        super.update(changedProps);
     }
-    _setupParent() {
-        const parent = this.parentElement;
-        if (!parent)
+    handlePointerenter(event) {
+        if (!this.shouldReactToEvent(event)) {
             return;
-        // 1. Force parent to be relative so we can position absolutely inside it
-        const style = window.getComputedStyle(parent);
-        if (style.position === 'static') {
-            parent.style.position = 'relative';
         }
-        // 2. Attach listener to the parent
-        parent.addEventListener('pointerdown', this._createRipple);
+        this.hovered = true;
     }
-    render() {
-        // No HTML needed in the template, we inject ripples dynamically
-        return b `<div class="ripple"></div>`;
+    handlePointerleave(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.hovered = false;
+        // release a held mouse or pen press that moves outside the element
+        if (this.state !== State.INACTIVE) {
+            this.endPressAnimation();
+        }
+    }
+    handlePointerup(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        if (this.state === State.HOLDING) {
+            this.state = State.WAITING_FOR_CLICK;
+            return;
+        }
+        if (this.state === State.TOUCH_DELAY) {
+            this.state = State.WAITING_FOR_CLICK;
+            this.startPressAnimation(this.rippleStartEvent);
+            return;
+        }
+    }
+    async handlePointerdown(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.rippleStartEvent = event;
+        if (!this.isTouch(event)) {
+            this.state = State.WAITING_FOR_CLICK;
+            this.startPressAnimation(event);
+            return;
+        }
+        // Wait for a hold after touch delay
+        this.state = State.TOUCH_DELAY;
+        await new Promise((resolve) => {
+            setTimeout(resolve, TOUCH_DELAY_MS);
+        });
+        if (this.state !== State.TOUCH_DELAY) {
+            return;
+        }
+        this.state = State.HOLDING;
+        this.startPressAnimation(event);
+    }
+    handleClick() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.state === State.WAITING_FOR_CLICK) {
+            this.endPressAnimation();
+            return;
+        }
+        if (this.state === State.INACTIVE) {
+            // keyboard synthesized click event
+            this.startPressAnimation();
+            this.endPressAnimation();
+        }
+    }
+    handlePointercancel(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.endPressAnimation();
+    }
+    handleContextmenu() {
+        if (this.disabled) {
+            return;
+        }
+        this.endPressAnimation();
+    }
+    determineRippleSize() {
+        const { height, width } = this.getBoundingClientRect();
+        const maxDim = Math.max(height, width);
+        const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
+        const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+        const hypotenuse = Math.sqrt(width ** 2 + height ** 2);
+        const maxRadius = hypotenuse + PADDING;
+        this.initialSize = initialSize;
+        const maybeZoomedScale = (maxRadius + softEdgeSize) / initialSize;
+        this.rippleScale = `${maybeZoomedScale}`;
+        this.rippleSize = `${initialSize}px`;
+    }
+    getTranslationCoordinates(positionEvent) {
+        const { height, width } = this.getBoundingClientRect();
+        // end in the center
+        const endPoint = {
+            x: (width - this.initialSize) / 2,
+            y: (height - this.initialSize) / 2,
+        };
+        let startPoint;
+        if (positionEvent instanceof PointerEvent) {
+            startPoint = this.getNormalizedPointerEventCoords(positionEvent);
+        }
+        else {
+            startPoint = {
+                x: width / 2,
+                y: height / 2,
+            };
+        }
+        // center around start point
+        startPoint = {
+            x: startPoint.x - this.initialSize / 2,
+            y: startPoint.y - this.initialSize / 2,
+        };
+        return { startPoint, endPoint };
+    }
+    startPressAnimation(positionEvent) {
+        if (!this.mdRoot) {
+            return;
+        }
+        this.pressed = true;
+        this.growAnimation?.cancel();
+        this.determineRippleSize();
+        const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent);
+        const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
+        const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
+        this.growAnimation = this.mdRoot.animate({
+            top: [0, 0],
+            left: [0, 0],
+            height: [this.rippleSize, this.rippleSize],
+            width: [this.rippleSize, this.rippleSize],
+            transform: [
+                `translate(${translateStart}) scale(1)`,
+                `translate(${translateEnd}) scale(${this.rippleScale})`,
+            ],
+        }, {
+            pseudoElement: PRESS_PSEUDO,
+            duration: PRESS_GROW_MS,
+            easing: 'cubic-bezier(0.2, 0, 0, 1)',
+            fill: ANIMATION_FILL,
+        });
+    }
+    async endPressAnimation() {
+        this.rippleStartEvent = undefined;
+        this.state = State.INACTIVE;
+        const animation = this.growAnimation;
+        let pressAnimationPlayState = Infinity;
+        if (typeof animation?.currentTime === 'number') {
+            pressAnimationPlayState = animation.currentTime;
+        }
+        else if (animation?.currentTime) {
+            pressAnimationPlayState = animation.currentTime.to('ms').value;
+        }
+        if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+            this.pressed = false;
+            return;
+        }
+        await new Promise((resolve) => {
+            setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
+        });
+        if (this.growAnimation !== animation) {
+            // A new press animation was started. The old animation was canceled and
+            // should not finish the pressed state.
+            return;
+        }
+        this.pressed = false;
+    }
+    /**
+     * Returns `true` if
+     *  - the ripple element is enabled
+     *  - the pointer is primary for the input type
+     *  - the pointer is the pointer that started the interaction, or will start
+     * the interaction
+     *  - the pointer is a touch, or the pointer state has the primary button
+     * held, or the pointer is hovering
+     */
+    shouldReactToEvent(event) {
+        if (this.disabled || !event.isPrimary) {
+            return false;
+        }
+        if (this.rippleStartEvent &&
+            this.rippleStartEvent.pointerId !== event.pointerId) {
+            return false;
+        }
+        if (event.type === 'pointerenter' || event.type === 'pointerleave') {
+            return !this.isTouch(event);
+        }
+        const isPrimaryButton = event.buttons === 1;
+        return this.isTouch(event) || isPrimaryButton;
+    }
+    isTouch({ pointerType }) {
+        return pointerType === 'touch';
+    }
+    async handleEvent(event) {
+        if (FORCED_COLORS?.matches) {
+            // Skip event logic since the ripple is `display: none`.
+            return;
+        }
+        switch (event.type) {
+            case 'click':
+                this.handleClick();
+                break;
+            case 'contextmenu':
+                this.handleContextmenu();
+                break;
+            case 'pointercancel':
+                this.handlePointercancel(event);
+                break;
+            case 'pointerdown':
+                await this.handlePointerdown(event);
+                break;
+            case 'pointerenter':
+                this.handlePointerenter(event);
+                break;
+            case 'pointerleave':
+                this.handlePointerleave(event);
+                break;
+            case 'pointerup':
+                this.handlePointerup(event);
+                break;
+        }
+    }
+    getNormalizedPointerEventCoords(pointerEvent) {
+        const { scrollX, scrollY } = window;
+        const { left, top } = this.getBoundingClientRect();
+        const documentX = scrollX + left;
+        const documentY = scrollY + top;
+        const { pageX, pageY } = pointerEvent;
+        return {
+            x: pageX - documentX,
+            y: pageY - documentY,
+        };
     }
 }
 Ripple.styles = i `
     :host {
-      position: absolute;
-      inset: 0; /* top/left/bottom/right: 0 */
-      pointer-events: none; /* Let clicks pass through to parent */
-      overflow: hidden;
-      border-radius: inherit; /* Inherit parent's rounded corners */
-      z-index: 0;
-      --ripple-state-opacity: 0;
-      --ripple-pressed-color: var(--color-on-surface);
+      display: flex;
+      margin: auto;
+      pointer-events: none;
     }
 
-    .ripple:before {
-      content: '';
-      opacity: var(--ripple-state-opacity);
-      pointer-events: none;
-      position: absolute;
+    :host([disabled]) {
+      display: none;
+    }
 
-      background-color: var(--ripple-pressed-color);
-      inset: 0;
-      transition:
-        opacity 15ms linear,
-        background-color 15ms linear;
+    @media (forced-colors: active) {
+      :host {
+        display: none;
+      }
     }
 
-    .ripple:after {
-      content: '';
-      opacity: var(--ripple-state-opacity);
-      pointer-events: none;
-      position: absolute;
-      background: radial-gradient(
-        closest-side,
-        var(--ripple-pressed-color) max(100% - 70px, 65%),
-        transparent 100%
-      );
-      transform-origin: center center;
-      transition: opacity 375ms linear;
-
-      width: 25px;
-      top: 0px;
-      transform: translate(51.4375px, 7.5px) scale(8.75941);
-      left: 0px;
-      height: 25px;
-    }
-
-    .ripple-effect {
+    :host,
+    .surface {
+      border-radius: inherit;
+      corner-shape: inherit;
       position: absolute;
-      border-radius: 50%;
-      background-color: var(--ripple-pressed-color);
-      opacity: 0.12; /* Material 3 State Layer Opacity */
-      transform: scale(0);
-      animation: ripple-anim 600ms linear forwards;
+      inset: 0;
+      overflow: hidden;
     }
 
-    @keyframes ripple-anim {
-      to {
-        transform: scale(1);
+    .surface {
+      -webkit-tap-highlight-color: transparent;
+
+      &::before,
+      &::after {
+        content: '';
         opacity: 0;
+        position: absolute;
       }
-    }
-  `;
-
-var css_248z$p = i`* {
-  box-sizing: border-box;
-}
 
-.screen-reader-only {
-  display: none !important;
-}
+      &::before {
+        background-color: var(--ripple-pressed-color, var(--color-on-surface));
+        inset: 0;
+        transition: opacity 15ms linear, background-color 15ms linear;
+      }
 
-:host {
-  display: block;
-}
+      &::after {
+        background: radial-gradient(
+          closest-side,
+          var(--ripple-pressed-color, var(--color-on-surface)) max(calc(100% - 70px), 65%),
+          transparent 100%
+        );
+        transform-origin: center center;
+        transition: opacity 375ms linear;
+      }
+    }
 
-slot::slotted(:not(:last-child)) {
-  border-block-start: 1px solid var(--color-outline);
-}
+    .hovered::before {
+      opacity: 0.08;
+    }
 
-slot::slotted(:last-child) {
-  border-block-end: 1px solid var(--color-outline);
-}`;
+    .pressed::after {
+      opacity: 0.12;
+      transition-duration: 105ms;
+    }
+  `;
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Ripple.prototype, "disabled", void 0);
+__decorate([
+    r()
+], Ripple.prototype, "hovered", void 0);
+__decorate([
+    r()
+], Ripple.prototype, "pressed", void 0);
+__decorate([
+    e$4('.surface')
+], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$o = i`* {
+var css_248z$u = i`* {
   box-sizing: border-box;
 }
 
@@ -1072,15 +1383,15 @@ var css_248z$o = i`* {
 var _AccordionItem_id;
 /**
  * @label Accordion Item
- * @tag accordion-item
- * @rawTag accordion
+ * @tag wc-accordion-item
+ * @rawTag accordion-item
  * @summary An accordion item is single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user.
  *
  * @example
  * ```html
- * <base-accordion-item>
+ * <wc-accordion-item>
  * Testing
- * </accordion-item>
+ * </wc-accordion-item>
  * ```
  * @tags display
  */
@@ -1134,7 +1445,7 @@ class AccordionItem extends i$1 {
         @click=${this.__handleToggle}
         aria-expanded=${this.open}
       >
-        <base-icon class="accordion-icon" name="keyboard_arrow_down"></base-icon>
+        <wc-icon class="accordion-icon" name="keyboard_arrow_down"></wc-icon>
         <div part="title" class="accordion-title">
           <slot name="heading">${this.heading}</slot>
         </div>
@@ -1151,7 +1462,7 @@ class AccordionItem extends i$1 {
     }
 }
 _AccordionItem_id = new WeakMap();
-AccordionItem.styles = [css_248z$o];
+AccordionItem.styles = [css_248z$u];
 __decorate([
     n({ type: String, reflect: true })
 ], AccordionItem.prototype, "heading", void 0);
@@ -1165,19 +1476,40 @@ __decorate([
     e$4('.accordion-heading')
 ], AccordionItem.prototype, "buttonElement", void 0);
 
+var css_248z$t = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+slot::slotted(:not(:last-child)) {
+  border-block-start: 1px solid var(--color-outline);
+}
+
+slot::slotted(:last-child) {
+  border-block-start: 1px solid var(--color-outline);
+  border-block-end: 1px solid var(--color-outline);
+}`;
+
 /**
  * @label Accordion
- * @tag base-accordion
+ * @tag wc-accordion
  * @rawTag accordion
  * @summary An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
  *
  * @example
  * ```html
- * <base-accordion>
- *     <accordion-item heading="Accordion">
+ * <wc-accordion>
+ *     <wc-accordion-item heading="Accordion">
  *         Content
- *     </accordion-item>
- * </base-accordion>
+ *     </wc-accordion-item>
+ * </wc-accordion>
  * ```
  * @tags display
  */
@@ -1263,7 +1595,7 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$p];
+Accordion.styles = [css_248z$t];
 Accordion.Item = AccordionItem;
 __decorate([
     n({ type: Boolean, attribute: 'allow-multiple' })
@@ -1272,7 +1604,7 @@ __decorate([
     o$2({ selector: 'p-accordion-item' })
 ], Accordion.prototype, "items", void 0);
 
-var css_248z$n = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -1311,17 +1643,16 @@ var css_248z$n = i`* {
 
 /**
  * @label Link
- * @tag base-link
+ * @tag wc-link
  * @rawTag link
  * @summary The link component is used to navigate to a new page or section within the current page.
- *
- * @cssprop --badge-color - Controls the color of the badge.
+ * @cssprop --link-color - Controls the color of the link.
+ * @tags navigation
  *
  * @example
  * ```html
- * <base-link href="#">Link</base-link>
+ * <wc-link href="#">Link</wc-link>
  * ```
- * @tags display
  */
 class Link extends i$1 {
     constructor() {
@@ -1344,7 +1675,7 @@ class Link extends i$1 {
     </a>`;
     }
 }
-Link.styles = [css_248z$n];
+Link.styles = [css_248z$s];
 __decorate([
     n({ reflect: true })
 ], Link.prototype, "href", void 0);
@@ -1355,7 +1686,7 @@ __decorate([
     r()
 ], Link.prototype, "tabIndexValue", void 0);
 
-var css_248z$m = i`* {
+var css_248z$r = i`* {
   box-sizing: border-box;
 }
 
@@ -1492,7 +1823,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$l = i`:host([color=default]) {
+var css_248z$q = i`:host([color=default]) {
   --filled-tag-container-color: var(--color-surface);
   --filled-tag-label-text-color: var(--color-on-surface);
   --tonal-tag-container-color: var(--color-surface-container);
@@ -1558,7 +1889,7 @@ var css_248z$l = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$k = i`.tag {
+var css_248z$p = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -1588,15 +1919,15 @@ var css_248z$k = i`.tag {
 
 /**
  * @label Tag
- * @tag base-tag
+ * @tag wc-tag
  * @rawTag tag
  * @summary Tag component for displaying labels or values with optional dismiss functionality.
+ * @tags display
  *
  * @example
  * ```html
- * <base-tag color=red>Tag</base-tag>
+ * <wc-tag color="red">Tag</wc-tag>
  * ```
- * @tags display
  */
 class Tag extends i$1 {
     constructor() {
@@ -1624,8 +1955,8 @@ class Tag extends i$1 {
         @click=${this._dismissClickHandler}
         aria-label="Dismiss"
       >
-        <base-ripple class="ripple"></base-ripple>
-        <base-icon class="dismiss-button-icon" name="close"></base-icon>
+        <wc-ripple class="ripple"></wc-ripple>
+        <wc-icon class="dismiss-button-icon" name="close"></wc-icon>
       </button>
     `;
     }
@@ -1639,7 +1970,7 @@ class Tag extends i$1 {
         };
         return b `
       <div class="${e$3(classes)}">
-        <base-elevation class="elevation"></base-elevation>
+        <wc-elevation class="elevation"></wc-elevation>
         <div class="background"></div>
         <div class="outline"></div>
 
@@ -1657,7 +1988,7 @@ class Tag extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Tag.styles = [css_248z$m, css_248z$l, css_248z$k];
+Tag.styles = [css_248z$r, css_248z$q, css_248z$p];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -1671,7 +2002,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$j = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -1783,7 +2114,7 @@ var css_248z$j = i`* {
   color: var(--background);
 }`;
 
-var css_248z$i = i`:host([color=red]) {
+var css_248z$n = i`:host([color=red]) {
   --chip-container-color: var(--color-red-container);
   --chip-outline-color: var(--color-on-red-container);
 }
@@ -1812,7 +2143,7 @@ var css_248z$i = i`:host([color=red]) {
   --chip-outline-color: var(--color-on-purple-container);
 }`;
 
-var css_248z$h = i`.tag {
+var css_248z$m = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -1872,15 +2203,15 @@ var css_248z$h = i`.tag {
 
 /**
  * @label Chip
- * @tag base-chip
+ * @tag wc-chip
  * @rawTag chip
- * @summary
+ * @summary Chip component for displaying compact information with optional actions.
+ * @tags display
  *
  * @example
  * ```html
- * <base-tag>Link</base-tag>
+ * <wc-chip>Chip content</wc-chip>
  * ```
- * @tags display
  */
 class Chip extends i$1 {
     constructor() {
@@ -1913,7 +2244,7 @@ class Chip extends i$1 {
         @click=${this._dismissClickHandler}
         aria-label="Dismiss"
       >
-        <base-icon class="close-btn-icon" name="close"></base-icon>
+        <wc-icon class="close-btn-icon" name="close"></wc-icon>
       </button>
     `;
     }
@@ -1935,7 +2266,7 @@ class Chip extends i$1 {
         };
         return b `
       <div class="${e$3(classes)}">
-        <base-elevation class="elevation"></base-elevation>
+        <wc-elevation class="elevation"></wc-elevation>
         <div class="background"></div>
         <div class="outline"></div>
 
@@ -1950,7 +2281,7 @@ class Chip extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Chip.styles = [css_248z$j, css_248z$i, css_248z$h];
+Chip.styles = [css_248z$o, css_248z$n, css_248z$m];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
@@ -1967,7 +2298,7 @@ __decorate([
     n({ type: String })
 ], Chip.prototype, "imageSrc", void 0);
 
-var css_248z$g = i`:host {
+var css_248z$l = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2119,14 +2450,14 @@ __decorate([
 
 /**
  * @label Linear Progress
- * @tag linear-progress
+ * @tag wc-linear-progress
  * @rawTag linear-progress
- *
  * @summary A linear progress indicator is a visual representation of progress toward a specific goal.
+ * @tags display
  *
  * @example
  * ```html
- * <linear-progress value="30" style="width:10rem"></linear-progress>
+ * <wc-linear-progress value="30" style="width:10rem"></wc-linear-progress>
  * ```
  */
 class LinearProgress extends BaseProgress {
@@ -2173,9 +2504,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$g];
+LinearProgress.styles = [css_248z$l];
 
-var css_248z$f = i`:host {
+var css_248z$k = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -2254,7 +2585,7 @@ var css_248z$f = i`:host {
   flex: 1;
 }
 .circular-progress.inline .progress-helper {
-  text-align: right;
+  text-align: start;
 }
 
 @keyframes rotate-container {
@@ -2279,14 +2610,14 @@ var css_248z$f = i`:host {
 
 /**
  * @label Circular Progress
- * @tag circular-progress
+ * @tag wc-circular-progress
  * @rawTag circular-progress
- *
  * @summary A circular progress indicator is a visual representation of progress toward a specific goal.
+ * @tags display
  *
  * @example
  * ```html
- * <circular-progress value="30"></circular-progress>
+ * <wc-circular-progress value="30"></wc-circular-progress>
  * ```
  */
 class CircularProgress extends BaseProgress {
@@ -2338,9 +2669,9 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$f];
+CircularProgress.styles = [css_248z$k];
 
-var css_248z$e = i`:host {
+var css_248z$j = i`:host {
   --skeleton-container-color: var(--color-surface-container);
   --skeleton-element: var(--color-on-surface);
   display: inline-block;
@@ -2425,14 +2756,15 @@ var css_248z$e = i`:host {
 
 /**
  * @label Skeleton
- *
- * @tag base-skeleton
+ * @tag wc-skeleton
  * @rawTag skeleton
- *
  * @summary Adds a skeleton effect to an element.
- *
- *
  * @tags display
+ *
+ * @example
+ * ```html
+ * <wc-skeleton visible></wc-skeleton>
+ * ```
  */
 class Skeleton extends i$1 {
     constructor() {
@@ -2443,12 +2775,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$e];
+Skeleton.styles = [css_248z$j];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$d = i`* {
+var css_248z$i = i`* {
   box-sizing: border-box;
 }
 
@@ -2480,14 +2812,14 @@ var css_248z$d = i`* {
 
 /**
  * @label Input
- * @tag input-field
+ * @tag wc-input
  * @rawTag input
  *
  * @summary The Input component is used to capture user input.
  *
  * @example
  * ```html
- * <input-field label="Name" required placeholder="Enter your name"></input-field>
+ * <wc-input label="Name" required placeholder="Enter your name"></wc-input>
  * ```
  */
 class Input extends BaseInput {
@@ -2558,7 +2890,7 @@ class Input extends BaseInput {
     render() {
         const displayType = this.type === 'password' && this.passwordVisible ? 'text' : this.type;
         return b `
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -2603,7 +2935,7 @@ class Input extends BaseInput {
                 ? 'Hide password'
                 : 'Show password'}
               >
-                <icon-button
+                <wc-icon-button
                   class="password-toggle"
                   variant="text"
                   name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
@@ -2611,17 +2943,17 @@ class Input extends BaseInput {
                 this.passwordVisible = !this.passwordVisible;
             }}
                 >
-                </icon-button>
+                </wc-icon-button>
               </pc-tooltip>
             `
             : A}
 
         <slot name="end" slot="field-end"></slot>
-      </base-field>
+      </wc-field>
     `;
     }
 }
-Input.styles = [css_248z$d];
+Input.styles = [css_248z$i];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -2680,7 +3012,7 @@ __decorate([
     e$4('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$c = i`* {
+var css_248z$h = i`* {
   box-sizing: border-box;
 }
 
@@ -2888,12 +3220,29 @@ var css_248z$c = i`* {
   position: absolute;
   top: 0;
   left: 0;
-  --skeleton-shape-start-start: var(--shape-corner-extra-small);
-  --skeleton-shape-start-end: var(--shape-corner-extra-small);
-  --skeleton-shape-end-start: var(--shape-corner-extra-small);
-  --skeleton-shape-end-end: var(--shape-corner-extra-small);
+  --skeleton-container-shape-start-start: var(--_container-shape-start-start);
+  --skeleton-container-shape-start-end: var(--_container-shape-start-end);
+  --skeleton-container-shape-end-start: var(--_container-shape-end-start);
+  --skeleton-container-shape-end-end: var(--_container-shape-end-end);
 }`;
 
+/**
+ * @label Field
+ * @tag wc-field
+ * @rawTag field
+ *
+ * @summary Wrapper for form fields with label and help text.
+ * @overview
+ * <p>Field provides consistent styling and behavior for form inputs.</p>
+ *
+ * @example
+ * ```html
+ * <wc-field label="Name" required>
+ *   some text
+ * </wc-field>
+ * ```
+ * @tags form
+ */
 class Field extends i$1 {
     constructor() {
         super(...arguments);
@@ -2953,7 +3302,7 @@ class Field extends i$1 {
         ${this.label}${this.required
             ? b `<span class="required">*</span>`
             : A}
-        <base-skeleton class="skeleton"></base-skeleton>
+        <wc-skeleton class="skeleton"></wc-skeleton>
       </label>
     </div>`;
     }
@@ -2977,7 +3326,7 @@ class Field extends i$1 {
         <div class="field-body" @click=${this.__handleClick}>
           <div class="outline"></div>
           <div class="background"></div>
-          <base-skeleton class="skeleton"></base-skeleton>
+          <wc-skeleton class="skeleton"></wc-skeleton>
 
           <div class="field-content">
             <div
@@ -3031,7 +3380,7 @@ class Field extends i$1 {
         return b `<div class="text-count">${this.textCount}</div>`;
     }
 }
-Field.styles = [css_248z$c];
+Field.styles = [css_248z$h];
 __decorate([
     n({ type: String })
 ], Field.prototype, "label", void 0);
@@ -3087,7 +3436,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$b = i`* {
+var css_248z$g = i`* {
   box-sizing: border-box;
 }
 
@@ -3142,7 +3491,7 @@ var _NumberField_id;
  *
  * @example
  * ```html
- * <number-field label="Age" placeholder="Enter your age"></number-field>
+ * <wc-number-field label="Age" placeholder="Enter your age"></wc-number-field>
  * ```
  */
 class NumberField extends BaseInput {
@@ -3220,7 +3569,7 @@ class NumberField extends BaseInput {
             stepper: this.stepper,
         };
         return b `
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -3236,13 +3585,13 @@ class NumberField extends BaseInput {
         class=${e$3(classes)}
       >
         ${this.stepper && !this.disabled
-            ? b `<icon-button
+            ? b `<wc-icon-button
               class="stepper"
               name="remove"
               variant="text"
               slot="field-start"
               @click=${this.stepDown}
-            ></icon-button>`
+            ></wc-icon-button>`
             : A}
 
         <slot name="start" slot="field-start"></slot>
@@ -3271,20 +3620,20 @@ class NumberField extends BaseInput {
         <slot name="end" slot="field-end"></slot>
 
         ${this.stepper && !this.disabled
-            ? b `<icon-button
+            ? b `<wc-icon-button
               class="stepper"
               variant="text"
               name="add"
               slot="field-end"
               @click=${this.stepUp}
-            ></icon-button>`
+            ></wc-icon-button>`
             : A}
-      </base-field>
+      </wc-field>
     `;
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$b];
+NumberField.styles = [css_248z$g];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -3346,7 +3695,7 @@ __decorate([
     e$4('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$a = i`* {
+var css_248z$f = i`* {
   box-sizing: border-box;
 }
 
@@ -3380,14 +3729,14 @@ var css_248z$a = i`* {
 
 /**
  * @label Date Picker
- * @tag date-picker
+ * @tag wc-date-picker
  * @rawTag date-picker
- *
  * @summary The Date Picker component is used to capture date user input.
+ * @tags input
  *
  * @example
  * ```html
- * <date-picker label="Name" required placeholder="Enter your name"></date-picker>
+ * <wc-date-picker label="Date" placeholder="Select a date"></wc-date-picker>
  * ```
  */
 class DatePicker extends BaseInput {
@@ -3456,7 +3805,7 @@ class DatePicker extends BaseInput {
     }
     render() {
         return b `
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -3495,7 +3844,7 @@ class DatePicker extends BaseInput {
 
         <slot name="end" slot="field-end"></slot>
 
-        <icon-button
+        <wc-icon-button
           slot="field-end"
           color="secondary"
           variant="text"
@@ -3508,12 +3857,12 @@ class DatePicker extends BaseInput {
             });
         }}
         >
-        </icon-button>
-      </base-field>
+        </wc-icon-button>
+      </wc-field>
     `;
     }
 }
-DatePicker.styles = [css_248z$a];
+DatePicker.styles = [css_248z$f];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -3569,7 +3918,7 @@ __decorate([
     e$4('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$9 = i`* {
+var css_248z$e = i`* {
   box-sizing: border-box;
 }
 
@@ -3603,14 +3952,14 @@ var css_248z$9 = i`* {
 
 /**
  * @label Time Picker
- * @tag time-picker
+ * @tag wc-time-picker
  * @rawTag time-picker
- *
  * @summary The Time Picker component is used to capture time user input.
+ * @tags input
  *
  * @example
  * ```html
- * <time-picker label="Name" required placeholder="Enter your name"></time-picker>
+ * <wc-time-picker label="Time" placeholder="Select a time"></wc-time-picker>
  * ```
  */
 class TimePicker extends BaseInput {
@@ -3679,7 +4028,7 @@ class TimePicker extends BaseInput {
     }
     render() {
         return b `
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -3718,7 +4067,7 @@ class TimePicker extends BaseInput {
 
         <slot name="end" slot="field-end"></slot>
 
-        <icon-button
+        <wc-icon-button
           slot="field-end"
           color="secondary"
           variant="text"
@@ -3731,12 +4080,12 @@ class TimePicker extends BaseInput {
             });
         }}
         >
-        </icon-button>
-      </base-field>
+        </wc-icon-button>
+      </wc-field>
     `;
     }
 }
-TimePicker.styles = [css_248z$9];
+TimePicker.styles = [css_248z$e];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -3792,7 +4141,7 @@ __decorate([
     e$4('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$8 = i`* {
+var css_248z$d = i`* {
   box-sizing: border-box;
 }
 
@@ -3833,14 +4182,14 @@ var css_248z$8 = i`* {
 
 /**
  * @label Textarea
- * @tag textarea-field
+ * @tag wc-textarea
  * @rawTag textarea
- *
  * @summary The Textarea component is used to capture user input.
+ * @tags input
  *
  * @example
  * ```html
- * <textarea-field label="Name" required placeholder="Enter your name"></textarea-field>
+ * <wc-textarea label="Description" placeholder="Enter text"></wc-textarea>
  * ```
  */
 class Textarea extends BaseInput {
@@ -3910,7 +4259,7 @@ class Textarea extends BaseInput {
     }
     render() {
         return b `
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -3948,11 +4297,11 @@ class Textarea extends BaseInput {
         ></textarea>
 
         <slot name="end" slot="field-end"></slot>
-      </base-field>
+      </wc-field>
     `;
     }
 }
-Textarea.styles = [css_248z$8];
+Textarea.styles = [css_248z$d];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4011,7 +4360,7 @@ __decorate([
     e$4('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$7 = i`* {
+var css_248z$c = i`* {
   box-sizing: border-box;
 }
 
@@ -4144,7 +4493,7 @@ var css_248z$7 = i`* {
 
 /**
  * @label Switch
- * @tag base-switch
+ * @tag wc-switch
  * @rawTag switch
  *
  * @summary Captures boolean input with an on/off switch interaction.
@@ -4164,7 +4513,7 @@ var css_248z$7 = i`* {
  *
  * @example
  * ```html
- * <base-switch value="true"></base-switch>
+ * <wc-switch value="true"></wc-switch>
  * ```
  * @tags input, form
  */
@@ -4298,8 +4647,8 @@ class Switch extends BaseInput {
     __renderIcon() {
         if (this.withIcon) {
             if (this.value)
-                return b `<base-icon name="check" class="icon"></base-icon>`;
-            return b `<base-icon name="close" class="icon"></base-icon>`;
+                return b `<wc-icon name="check" class="icon"></wc-icon>`;
+            return b `<wc-icon name="close" class="icon"></wc-icon>`;
         }
         return A;
     }
@@ -4352,7 +4701,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$7];
+Switch.styles = [css_248z$c];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -4396,7 +4745,7 @@ __decorate([
     e$4('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$6 = i`* {
+var css_248z$b = i`* {
   box-sizing: border-box;
 }
 
@@ -4462,7 +4811,7 @@ var css_248z$6 = i`* {
 
 /**
  * @label Spinner
- * @tag base-spinner
+ * @tag wc-spinner
  * @rawTag spinner
  * @summary A spinner component that animates a circular shape.
  * @cssprop --spinner-track-color - The color of the track.
@@ -4471,7 +4820,7 @@ var css_248z$6 = i`* {
  *
  * @example
  * ```html
- * <base-spinner></base-spinner>
+ * <wc-spinner></wc-spinner>
  * ```
  */
 class Spinner extends i$1 {
@@ -4483,9 +4832,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$6];
+Spinner.styles = [css_248z$b];
 
-var css_248z$5 = i`* {
+var css_248z$a = i`* {
   box-sizing: border-box;
 }
 
@@ -4570,22 +4919,17 @@ var css_248z$5 = i`* {
 
 /**
  * @label Container
- * @tag base-container
+ * @tag wc-container
  * @rawTag container
- * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
- *
- * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
- * @cssprop --avatar-background-color - Controls the color of the avatar.
- * @cssprop --avatar-size - Controls the size of the avatar.
- * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
- *
+ * @summary A responsive container component for layout.
+ * @cssprop --container-max-width - Controls the maximum width of the container.
+ * @cssprop --container-padding - Controls the padding of the container.
+ * @tags layout
  *
  * @example
  * ```html
- * <base-container>Container</base-avatar>
+ * <wc-container size="lg">Content</wc-container>
  * ```
- *
- * @tags display
  */
 class Container extends i$1 {
     constructor() {
@@ -4608,12 +4952,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$5];
+Container.styles = [css_248z$a];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$4 = i`* {
+var css_248z$9 = i`* {
   box-sizing: border-box;
 }
 
@@ -4699,8 +5043,15 @@ var css_248z$4 = i`* {
 
 /**
  * @label Empty State
- * @name empty-state
- * @description A message that displays when there is no information to display.
+ * @tag wc-empty-state
+ * @rawTag empty-state
+ * @summary A message that displays when there is no information to display.
+ * @tags display
+ *
+ * @example
+ * ```html
+ * <wc-empty-state headline="No items found"></wc-empty-state>
+ * ```
  */
 class EmptyState extends i$1 {
     constructor() {
@@ -4747,7 +5098,7 @@ class EmptyState extends i$1 {
       <div class="${e$3(classes)}">
         <div class="empty-state-container">
           <div class="illustration">
-            <base-icon src="${illustrationPath}"></base-icon>
+            <wc-icon src="${illustrationPath}"></wc-icon>
           </div>
 
           <div class="content">
@@ -4762,7 +5113,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$4];
+EmptyState.styles = [css_248z$9];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -4776,7 +5127,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$3 = i`* {
+var css_248z$8 = i`* {
   box-sizing: border-box;
 }
 
@@ -6421,15 +6772,17 @@ class PopoverController {
 
 /**
  * @label Tooltip
- * @tag base-tooltip
+ * @tag wc-tooltip
  * @rawTag tooltip
  * @summary Displays a tooltip for an element.
+ * @tags display
  *
  * @example
  * ```html
- * <span class="tooltip">Tooltip</span>
+ * <wc-tooltip content="Tooltip text">
+ *   <button>Hover me</button>
+ * </wc-tooltip>
  * ```
- * @tags display
  */
 class Tooltip extends i$1 {
     constructor() {
@@ -6443,6 +6796,7 @@ class Tooltip extends i$1 {
         this.trigger = 'hover focus';
         this.open = false;
         this.variant = 'plain';
+        this.preview = false;
         this._target = null;
         this._popover = new PopoverController(this, {
             placement: 'top',
@@ -6556,7 +6910,7 @@ class Tooltip extends i$1 {
         if (changedProps.has('for')) {
             this.attachListeners();
         }
-        if (changedProps.has('open') && this.open && this._target) {
+        if (changedProps.has('open') && this.open && this._target && !this.preview) {
             this._popover.updatePosition(this._target, this.floatingEl);
         }
     }
@@ -6589,7 +6943,7 @@ class Tooltip extends i$1 {
     __renderRichTooltip() {
         return b `
       <div class="tooltip-content">
-        <base-elevation class="elevation"></base-elevation>
+        <wc-elevation class="elevation"></wc-elevation>
 
         <div class="tooltip-title" id="tooltip-labelledby">
           <slot name="title"></slot>
@@ -6604,7 +6958,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$3];
+Tooltip.styles = [css_248z$8];
 Tooltip.CLOSE_OTHERS_EVENT = 'tooltip--open';
 __decorate([
     n()
@@ -6621,11 +6975,14 @@ __decorate([
 __decorate([
     n({ type: String, reflect: true })
 ], Tooltip.prototype, "variant", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Tooltip.prototype, "preview", void 0);
 __decorate([
     e$4('#tooltip')
 ], Tooltip.prototype, "floatingEl", void 0);
 
-var css_248z$2 = i`* {
+var css_248z$7 = i`* {
   box-sizing: border-box;
 }
 
@@ -6663,24 +7020,23 @@ ol {
 
 /**
  * @label Breadcrumb
- * @tag base-breadcrumb
+ * @tag wc-breadcrumb
  * @rawTag breadcrumb
- *
  * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.
  * @overview
  *  - Breadcrumbs provide a trail for users to follow back to the starting or entry point.
  *  - They help users understand their current location within the site hierarchy.
  *  - Follows WCAG 2.1 guidelines for accessible navigation landmarks.
+ * @tags navigation
  *
  * @example
  * ```html
- * <base-breadcrumb label="Breadcrumb">
- *   <breadcrumb-item href="#">Home</breadcrumb-item>
- *   <breadcrumb-item href="#">Category</breadcrumb-item>
- *   <breadcrumb-item active>Current Page</breadcrumb-item>
- * </base-breadcrumb>
+ * <wc-breadcrumb label="Breadcrumb">
+ *   <wc-breadcrumb-item href="#">Home</wc-breadcrumb-item>
+ *   <wc-breadcrumb-item href="#">Category</wc-breadcrumb-item>
+ *   <wc-breadcrumb-item active>Current Page</wc-breadcrumb-item>
+ * </wc-breadcrumb>
  * ```
- * @tags navigation
  */
 class Breadcrumb extends i$1 {
     constructor() {
@@ -6699,7 +7055,7 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$2];
+Breadcrumb.styles = [css_248z$7];
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
@@ -6710,7 +7066,7 @@ __decorate([
  * SPDX-License-Identifier: BSD-3-Clause
  */const o=o=>o??A;
 
-var css_248z$1 = i`* {
+var css_248z$6 = i`* {
   box-sizing: border-box;
 }
 
@@ -6770,15 +7126,15 @@ var css_248z$1 = i`* {
 
 /**
  * @label Breadcrumb Item
- * @tag breadcrumb-item
+ * @tag wc-breadcrumb-item
  * @rawTag breadcrumb-item
  * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.
+ * @tags navigation
  *
  * @example
  * ```html
- * <breadcrumb-item href="#">Home</breadcrumb-item>
+ * <wc-breadcrumb-item href="#">Home</wc-breadcrumb-item>
  * ```
- * @tags navigation
  */
 class BreadcrumbItem extends i$1 {
     constructor() {
@@ -6839,7 +7195,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$1];
+BreadcrumbItem.styles = [css_248z$6];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -6856,18 +7212,24 @@ __decorate([
     r()
 ], BreadcrumbItem.prototype, "position", void 0);
 
-var css_248z = i`@charset "UTF-8";
+var css_248z$5 = i`@charset "UTF-8";
 :host {
-  display: inline-block;
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
 .image-wrapper {
-  position: relative;
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
 }
 
 img {
   display: block;
+  max-height: 100%;
   max-width: 100%;
 }
 
@@ -6883,7 +7245,7 @@ img.clickable {
 }
 
 /* Preview overlay — rendered in light DOM via portal, but we keep
-   a host-level overlay as a fallback when shadow DOM is used.       */
+    a host-level overlay as a fallback when shadow DOM is used.       */
 .preview-overlay {
   display: none;
   position: fixed;
@@ -6909,23 +7271,15 @@ img.clickable {
 
 /**
  * @label Image
- * @tag base-image
+ * @tag wc-image
  * @rawTag image
- *
- * @summary Image
- * @overview
- *  - CodeHighlighter is a component that provides syntax highlighting for code snippets.
- *  - It supports various programming languages and can display line numbers for better readability.
+ * @summary An image component with lazy loading and theme support.
+ * @tags media
  *
  * @example
  * ```html
- * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
- *   function helloWorld() {
- *     console.log('Hello, world!');
- *   }</code></pre>
- * </code-highlighter>
+ * <wc-image src="image.jpg" alt="Description"></wc-image>
  * ```
- * @tags display
  */
 class Image extends i$1 {
     constructor() {
@@ -7015,7 +7369,7 @@ class Image extends i$1 {
     `;
     }
 }
-Image.styles = [css_248z];
+Image.styles = [css_248z$5];
 __decorate([
     n({ reflect: true })
 ], Image.prototype, "src", void 0);
@@ -7038,5 +7392,936 @@ __decorate([
     r()
 ], Image.prototype, "_previewOpen", void 0);
 
-export { Accordion as A, Badge as B, Chip as C, DatePicker as D, Elevation as E, Field as F, Icon as I, LinearProgress as L, NumberField as N, Ripple as R, Skeleton as S, Tag as T, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, CircularProgress as d, Container as e, Divider as f, EmptyState as g, FocusRing as h, IconButton as i, Image as j, Input as k, Link as l, Spinner as m, Switch as n, Textarea as o, TimePicker as p, Tooltip as q };
-//# sourceMappingURL=image-DK6VQW7N.js.map
+var css_248z$4 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  height: 100%;
+  --tab-outline-color: var(--color-primary);
+}
+
+.tab-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+}
+
+.tab {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: var(--_tab-height);
+  padding: 0 var(--_container-padding);
+  width: 100%;
+  cursor: pointer;
+}
+.tab .tab-content {
+  position: relative;
+  font-family: var(--typography-title-small-font-family) !important;
+  font-size: var(--typography-title-small-font-size) !important;
+  font-weight: var(--typography-title-small-font-weight) !important;
+  line-height: var(--typography-title-small-line-height) !important;
+  letter-spacing: var(--typography-title-small-letter-spacing) !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--_tab-icon-label-spacing);
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  color: var(--_label-text-color);
+  opacity: var(--_label-text-opacity, 1);
+  --icon-size: var(--tab-icon-size, var(--_tab-icon-size));
+  --icon-color: var(--_label-text-color);
+}
+.tab .tab-content .slot-container {
+  display: none;
+}
+.tab .indicator {
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  background: var(--_active-indicator-color);
+  border-radius: var(--_active-indicator-shape);
+  transform-origin: left bottom;
+  height: var(--_active-indicator-height);
+  inset: auto 0px 0px;
+  opacity: 0;
+}
+.tab.has-content .slot-container {
+  display: flex;
+  flex: none;
+  justify-content: center;
+}
+.tab.disabled {
+  cursor: not-allowed;
+}
+.tab {
+  /*
+    Background layers
+   */
+}
+.tab .focus-ring {
+  z-index: 2;
+  --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
+  --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
+  --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
+  --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
+  --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
+}
+.tab .ripple {
+  corner-shape: var(--_container-corner-shape-variant);
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
+}
+.tab .outline {
+  z-index: 1;
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: var(--_outline-width) solid var(--_outline-color);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+}
+
+:host-context([variant=line]) .tab {
+  --_tab-height: 100%;
+  --_container-padding: 1rem;
+  --_label-text-color: var(--color-on-surface);
+  --_container-state-color: var(--_label-text-color);
+  --_container-shape-start-start: var(--shape-corner-small);
+  --_container-shape-start-end: var(--shape-corner-small);
+  --_container-shape-end-start: var(--shape-corner-small);
+  --_container-shape-end-end: var(--shape-corner-small);
+  --_active-indicator-color: var(--color-primary);
+  --_active-indicator-shape: 3px 3px 0 0;
+  --_active-indicator-height: 2px;
+}
+:host-context([variant=line]) .tab .focus-ring {
+  inset: 3px 3px 4px 3px;
+}
+:host-context([variant=line]) .tab.active .tab-content .indicator {
+  opacity: 1;
+}
+:host-context([variant=line]) .tab.active .focus-ring {
+  inset: 3px 3px calc(4px + var(--_active-indicator-height)) 3px;
+}
+:host-context([variant=line]) .tab:hover:not(:where(.disabled)) {
+  --_container-state-opacity: 0.08;
+}
+:host-context([variant=line]) .tab.pressed:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+:host-context([variant=line]) .tab.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+:host-context([variant=line]) .tab.disabled .ripple {
+  display: none;
+}`;
+
+var _Tab_id;
+/**
+ * @label Tab
+ * @tag wc-tab
+ * @rawTag tab
+ *
+ * @summary A tab component for use within tabs.
+ * @overview
+ * <p>Tab represents an individual tab in a tabs component.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tab>Tab Label</wc-tab>
+ * ```
+ * @tags navigation
+ */
+class Tab extends i$1 {
+    focus() {
+        this.tabElement?.focus();
+    }
+    blur() {
+        this.tabElement?.blur();
+    }
+    constructor() {
+        super();
+        _Tab_id.set(this, crypto.randomUUID());
+        this.active = false;
+        this.disabled = false;
+        this.disabledReason = '';
+        /**
+        * Sets or retrieves the window or frame at which to target content.
+        */
+        this.target = '_self';
+        /**
+         * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+         */
+        this.throttleDelay = 200;
+        this.hasFocus = false;
+        this.slotHasContent = false;
+        /**
+          * States
+          */
+        this.isPressed = false;
+        this._tabindex = 0;
+        this.__dispatchClickWithThrottle = event => {
+            this.__dispatchClick(event);
+        };
+        this.__dispatchClick = (event) => {
+            // If the button is soft-disabled or a disabled link, we need to explicitly
+            // prevent the click from propagating to other event listeners as well as
+            // prevent the default action.
+            if (this.disabled && this.href) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.tabElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.tabElement);
+        };
+        this.__handlePress = (event) => {
+            if (this.disabled)
+                return;
+            if (event instanceof KeyboardEvent &&
+                event.type === 'keydown' &&
+                (event.key === 'Enter' || event.key === ' ')) {
+                this.isPressed = true;
+            }
+            else if (event.type === 'mousedown') {
+                this.isPressed = true;
+            }
+            else {
+                this.isPressed = false;
+            }
+        };
+        this._tabindex = 0;
+    }
+    firstUpdated() {
+        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
+            this.slotHasContent = hasContent;
+            this.requestUpdate();
+        });
+    }
+    __isLink() {
+        return !!this.href;
+    }
+    // private handleKeyDown(evt: KeyboardEvent) {
+    //   if (this.disabled || this.showLoader) return;
+    //   if (evt.key === 'Enter' || evt.key === ' ') {
+    //     evt.preventDefault();
+    //     this.isActive = true;
+    //     this.dispatchTabClick();
+    //   }
+    // }
+    render() {
+        const isLink = this.__isLink();
+        const cssClasses = {
+            tab: true,
+            'tab-element': true,
+            disabled: this.disabled,
+            pressed: this.isPressed,
+            active: this.active,
+            'has-content': this.slotHasContent
+        };
+        if (!isLink) {
+            return b `<button
+              class=${e$3(cssClasses)}
+              tabindex="0"
+              @mousedown=${this.__handlePress}
+              @keydown=${this.__handlePress}
+              @keyup=${this.__handlePress}
+              ?aria-describedby=${this.__getDisabledReasonID()}
+              aria-disabled=${`${this.disabled}`}
+              ?disabled=${this.disabled}
+              ${spread(this.configAria)}
+            >
+              ${this.renderTabContent()}
+            </button>`;
+        }
+        return b `<a
+        class=${e$3(cssClasses)}
+        id="button"
+        tabindex="0"
+        href=${this.href}
+        target=${this.target}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        role="button"
+        ?aria-describedby=${this.__getDisabledReasonID()}
+        aria-disabled=${`${this.disabled}`}
+        ${spread(this.configAria)}
+      >
+        ${this.renderTabContent()}
+      </a>`;
+    }
+    renderTabContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" .control=${this} element="tabElement"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      
+      <div class="tab-content">
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        <slot name="icon"></slot>
+
+        <div class="indicator"></div>
+      </div>
+
+      <div class="indicator"></div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+    __getDisabledReasonID() {
+        return this.disabled && this.disabledReason
+            ? `disabled-reason-${__classPrivateFieldGet(this, _Tab_id, "f")}`
+            : A;
+    }
+    __renderDisabledReason() {
+        const disabledReasonID = this.__getDisabledReasonID();
+        if (disabledReasonID)
+            return b `<div
+        id="disabled-reason-${__classPrivateFieldGet(this, _Tab_id, "f")}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        {this.disabledReason}
+      </div>`;
+        return A;
+    }
+}
+_Tab_id = new WeakMap();
+Tab.styles = [css_248z$4];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Tab.prototype, "active", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Tab.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], Tab.prototype, "disabledReason", void 0);
+__decorate([
+    n({ type: String })
+], Tab.prototype, "icon", void 0);
+__decorate([
+    n({ type: String })
+], Tab.prototype, "label", void 0);
+__decorate([
+    n({ type: String })
+], Tab.prototype, "value", void 0);
+__decorate([
+    n({ reflect: true })
+], Tab.prototype, "configAria", void 0);
+__decorate([
+    n()
+], Tab.prototype, "target", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Tab.prototype, "href", void 0);
+__decorate([
+    n()
+], Tab.prototype, "throttleDelay", void 0);
+__decorate([
+    r()
+], Tab.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Tab.prototype, "slotHasContent", void 0);
+__decorate([
+    r()
+], Tab.prototype, "isPressed", void 0);
+__decorate([
+    e$4('.tab-element')
+], Tab.prototype, "tabElement", void 0);
+
+var css_248z$3 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}`;
+
+/**
+ * @label Tab Group
+ * @tag wc-tab-group
+ * @rawTag tab-group
+ *
+ * @summary The tab group component is used to display multiple panels of content in a container.
+ * @overview
+ * <p>The tab group component allows users to switch between different views or content sections.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tab-group>
+ *
+ *   <wc-tabs>
+ *    <wc-tab selected >Tab 1</wc-tab>
+ *    <wc-tab>Tab 2</wc-tab>
+ *   </wc-tabs>
+ *
+ *   <wc-tab-panel>Panel 1</wc-tab-panel>
+ *   <wc-tab-panel>Panel 2</wc-tab-panel>
+ * </wc-tab-group>
+ * ```
+ * @tags navigation
+ */
+class TabGroup extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.variant = 'line';
+        this.uid = crypto.randomUUID();
+        this.onTabClick = (event) => {
+            const custom = event;
+            event.stopPropagation();
+            const targetValue = custom.detail?.target || custom.detail?.value;
+            if (targetValue) {
+                this.selectTab(targetValue);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('base-tab-click', this.onTabClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('base-tab-click', this.onTabClick);
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this.initializeTabs();
+    }
+    selectTab(target) {
+        const tabs = this.getTabs();
+        tabs.forEach((tab) => {
+            tab.selected = false;
+            tab.classList.remove('previous-tab', 'next-tab');
+        });
+        let selectedIndex = -1;
+        tabs.forEach((tab, index) => {
+            const t = tab.getAttribute('target') || tab.getAttribute('value');
+            if (t === target) {
+                selectedIndex = index;
+            }
+        });
+        if (selectedIndex >= 0) {
+            const selectedTab = tabs[selectedIndex];
+            selectedTab.selected = true;
+            if (tabs[selectedIndex - 1]) {
+                tabs[selectedIndex - 1].classList.add('previous-tab');
+            }
+            if (tabs[selectedIndex + 1]) {
+                tabs[selectedIndex + 1].classList.add('next-tab');
+            }
+        }
+        const panels = this.getTabPanels();
+        panels.forEach(panel => {
+            const panelValue = panel.getAttribute('value');
+            panel.active = panelValue === target;
+        });
+    }
+    getTabs() {
+        return this.querySelectorAll(':scope > tabs-list base-tab');
+    }
+    getTabPanels() {
+        return this.querySelectorAll(':scope > base-tab-panel');
+    }
+    getTabList() {
+        return this.querySelector(':scope > tabs-list');
+    }
+    tabsHaveTarget() {
+        return !!this.querySelector(':scope > tabs-list base-tab[target]');
+    }
+    initializeTabs() {
+        const tabs = Array.from(this.getTabs());
+        if (!this.tabsHaveTarget()) {
+            this.getTabPanels().forEach((panel, index) => {
+                if (!panel.getAttribute('value')) {
+                    panel.setAttribute('value', `tab-${this.uid}-${index}`);
+                }
+            });
+            if (tabs.length > 0) {
+                const firstTarget = tabs[0].getAttribute('target');
+                if (firstTarget) {
+                    this.selectTab(firstTarget);
+                }
+            }
+        }
+        else {
+            const selectedTab = this.querySelector(':scope > tabs-list base-tab[selected]');
+            if (selectedTab) {
+                const selectedTarget = selectedTab.getAttribute('target');
+                if (selectedTarget)
+                    this.selectTab(selectedTarget);
+            }
+        }
+    }
+    render() {
+        return b `<slot></slot>`;
+    }
+}
+TabGroup.styles = [css_248z$3];
+__decorate([
+    n({ reflect: true })
+], TabGroup.prototype, "variant", void 0);
+
+var css_248z$2 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  flex: 1;
+}
+
+:host([hidden]) {
+  display: none;
+}`;
+
+/**
+ * @label Tab Panel
+ * @tag wc-tab-panel
+ * @rawTag tab-panel
+ *
+ * @summary Content panel for tabs.
+ * @overview
+ * <p>TabPanel contains the content associated with a tab.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tab-panel>Content for this tab</wc-tab-panel>
+ * ```
+ * @tags navigation
+ */
+class TabPanel extends i$1 {
+    render() {
+        return b `<slot></slot>`;
+    }
+}
+TabPanel.styles = [css_248z$2];
+__decorate([
+    n({ reflect: true })
+], TabPanel.prototype, "value", void 0);
+
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+.tabs-list {
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+:host-context([variant=line]) {
+  --tabs-list-height: 3rem;
+}
+:host-context([variant=line]) .tabs-list {
+  height: var(--tabs-list-height);
+  border-bottom: 1px solid var(--color-surface-variant);
+}`;
+
+/**
+ * @label Tabs
+ * @tag wc-tabs
+ * @rawTag tabs
+ *
+ * @summary Container for tab components.
+ * @overview
+ * <p>Tabs holds the tab buttons and manages their layout.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tabs>
+ *   <wc-tab>Tab 1</wc-tab>
+ *   <wc-tab>Tab 2</wc-tab>
+ * </wc-tabs>
+ * ```
+ * @tags navigation
+ */
+class Tabs extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.managed = false;
+        this.__handleTabClick = (event) => {
+            if (this.managed)
+                return;
+            const detailEvent = event;
+            const path = detailEvent.composedPath();
+            const clickedTab = path.find(node => node instanceof Element && node.tagName.toLowerCase() === 'base-tab');
+            if (!clickedTab)
+                return;
+            const tabs = this.querySelectorAll('base-tab');
+            tabs.forEach(tab => {
+                tab.active = false;
+            });
+            clickedTab.active = true;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.__handleTabClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.__handleTabClick);
+        super.disconnectedCallback();
+    }
+    render() {
+        return b `
+      <div class="tabs-list">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+Tabs.styles = [css_248z$1];
+__decorate([
+    n({ type: Boolean })
+], Tabs.prototype, "managed", void 0);
+
+var css_248z = i`:host {
+  --_track-height: 4px;
+  --_thumb-size: 20px;
+  --thumb-half: 10px;
+  --_active-track-color: var(--color-primary);
+  --_inactive-track-color: var(--color-secondary-container);
+  --_thumb-color: var(--color-primary);
+  --_label-color: var(--color-primary);
+  --_label-text-color: var(--color-on-primary);
+  display: inline-block;
+  width: 100%;
+  min-width: 200px;
+  vertical-align: middle;
+  touch-action: none;
+}
+
+.slider-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  cursor: pointer;
+}
+.slider-container.disabled {
+  pointer-events: none;
+  opacity: 0.38;
+}
+
+.track {
+  position: absolute;
+  width: 100%;
+  height: var(--_track-height);
+  background-color: var(--_inactive-track-color);
+  border-radius: var(--_track-height);
+  overflow: hidden;
+  pointer-events: none;
+}
+.track .track-active {
+  position: absolute;
+  height: 100%;
+  background-color: var(--_active-track-color);
+  transition: width 0.1s ease-out;
+  will-change: width;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  background-color: var(--_thumb-color);
+  border-radius: 50%;
+  box-shadow: var(--md-sys-elevation-1);
+  outline: none;
+  cursor: grab;
+  transition: left 0.05s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
+  will-change: left;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.thumb::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background-color: var(--_thumb-color);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.thumb:hover::before {
+  opacity: 0.08;
+}
+.thumb:focus-visible::before {
+  opacity: 0.12;
+}
+.thumb:active {
+  cursor: grabbing;
+  box-shadow: var(--md-sys-elevation-5);
+}
+.thumb.dragging {
+  transition: none;
+}
+
+.value-label {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 8px;
+  padding: 4px 8px;
+  background-color: var(--_label-color);
+  color: var(--_label-text-color);
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.1s, transform 0.1s;
+  pointer-events: none;
+}
+.value-label::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-color: var(--_label-color);
+}
+
+.slider-container.dragging .value-label,
+.slider-container:active .value-label,
+.thumb:focus-visible .value-label {
+  opacity: 1;
+  transform: translateY(0);
+}`;
+
+/**
+ * @label Slider
+ * @tag wc-slider
+ * @rawTag slider
+ *
+ * @summary Sliders allow users to make selections from a range of values.
+ *
+ * @fires {CustomEvent} input - Dispatched when the slider value changes during interaction.
+ * @fires {CustomEvent} change - Dispatched when the slider interaction ends.
+ *
+ * @example
+ * ```html
+ * <wc-slider min="0" max="100" value="50"></wc-slider>
+ * ```
+ */
+class Slider extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The minimum value of the slider.
+         */
+        this.min = 0;
+        /**
+         * The maximum value of the slider.
+         */
+        this.max = 100;
+        /**
+         * The current value of the slider.
+         */
+        this.value = 50;
+        /**
+         * The step increment for the slider.
+         */
+        this.step = 1;
+        /**
+         * Whether the slider is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether to show labels on the slider.
+         */
+        this.labeled = true;
+        this.isDragging = false;
+        this.onMouseMove = (e) => {
+            if (this.isDragging) {
+                e.preventDefault();
+                this.handleInput(e);
+            }
+        };
+        this.onMouseUp = () => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            this.container.classList.remove('dragging');
+            this.thumbElement.classList.remove('dragging');
+            this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true }));
+            window.removeEventListener('mousemove', this.onMouseMove);
+            window.removeEventListener('mouseup', this.onMouseUp);
+            window.removeEventListener('touchmove', this.onMouseMove);
+            window.removeEventListener('touchend', this.onMouseUp);
+            window.removeEventListener('touchcancel', this.onMouseUp);
+        };
+    }
+    handleInput(event) {
+        if (this.disabled)
+            return;
+        const rect = this.container.getBoundingClientRect();
+        const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+        // Calculate percentage relative to track width
+        let percentage = (clientX - rect.left) / rect.width;
+        percentage = Math.max(0, Math.min(1, percentage));
+        const rawValue = this.min + percentage * (this.max - this.min);
+        const steppedValue = Math.round(rawValue / this.step) * this.step;
+        const oldValue = this.value;
+        this.value = Math.max(this.min, Math.min(this.max, steppedValue));
+        if (oldValue !== this.value) {
+            this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value }, bubbles: true, composed: true }));
+        }
+    }
+    onMouseDown(e) {
+        if (this.disabled)
+            return;
+        e.preventDefault();
+        this.isDragging = true;
+        // Add dragging class for CSS state
+        this.container.classList.add('dragging');
+        this.thumbElement.classList.add('dragging');
+        this.handleInput(e);
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('mouseup', this.onMouseUp);
+        window.addEventListener('touchmove', this.onMouseMove, { passive: false });
+        window.addEventListener('touchend', this.onMouseUp);
+        window.addEventListener('touchcancel', this.onMouseUp);
+    }
+    handleKeyDown(e) {
+        if (this.disabled)
+            return;
+        const increment = e.shiftKey ? this.step * 10 : this.step;
+        let newValue = this.value;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+            newValue = Math.min(this.max, this.value + increment);
+            e.preventDefault();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+            newValue = Math.max(this.min, this.value - increment);
+            e.preventDefault();
+        }
+        else if (e.key === 'Home') {
+            newValue = this.min;
+            e.preventDefault();
+        }
+        else if (e.key === 'End') {
+            newValue = this.max;
+            e.preventDefault();
+        }
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value }, bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true }));
+        }
+    }
+    render() {
+        const percentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+        return b `
+      <div 
+        class="slider-container ${this.disabled ? 'disabled' : ''}"
+        @mousedown=${this.onMouseDown}
+        @touchstart=${this.onMouseDown}
+      >
+        <div class="track">
+          <div class="track-active" style=${o$3({ width: `${percentage}%` })}></div>
+        </div>
+
+        <div 
+          class="thumb" 
+          role="slider"
+          tabindex="${this.disabled ? -1 : 0}"
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-valuenow=${this.value}
+          aria-disabled=${this.disabled}
+          style=${o$3({ left: `calc(${percentage}% - var(--thumb-half))` })}
+          @keydown=${this.handleKeyDown}
+        >
+          ${this.labeled ? b `<div class="value-label">${this.value}</div>` : ''}
+        </div>
+      </div>
+    `;
+    }
+}
+Slider.styles = [css_248z];
+__decorate([
+    n({ type: Number })
+], Slider.prototype, "min", void 0);
+__decorate([
+    n({ type: Number })
+], Slider.prototype, "max", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], Slider.prototype, "value", void 0);
+__decorate([
+    n({ type: Number })
+], Slider.prototype, "step", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Slider.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean })
+], Slider.prototype, "labeled", void 0);
+__decorate([
+    r()
+], Slider.prototype, "isDragging", void 0);
+__decorate([
+    e$4('.slider-container')
+], Slider.prototype, "container", void 0);
+__decorate([
+    e$4('.thumb')
+], Slider.prototype, "thumbElement", void 0);
+
+export { Accordion as A, Badge as B, Chip as C, DatePicker as D, Elevation as E, Field as F, Icon as I, LinearProgress as L, NumberField as N, Ripple as R, Skeleton as S, Tab as T, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, CircularProgress as d, Container as e, Divider as f, EmptyState as g, FocusRing as h, IconButton as i, Image as j, Input as k, Link as l, Slider as m, Spinner as n, Switch as o, TabGroup as p, TabPanel as q, Tabs as r, Tag as s, Textarea as t, TimePicker as u, Tooltip as v };
+//# sourceMappingURL=slider-Dk9CFWTG.js.map