@redvars/peacock 3.2.7 → 3.2.8

package/dist/peacock-loader.js

@@ -1,42 +1,967 @@
-import { Elevation } from './elevation.js';
-import { FocusRing } from './focus-ring.js';
-import { Ripple } from './ripple.js';
-import { Icon } from './icon.js';
-import { Avatar } from './avatar.js';
-import { Badge } from './badge.js';
-import { Divider } from './divider.js';
-import { S as Switch, b as TimePicker, D as DatePicker, T as Textarea, N as NumberField, a as Input, C as CircularProgress, L as LinearProgress, I as IconButton, B as Button } from './switch-DqxIiVsB.js';
+import { A as Accordion, e as Container, g as EmptyState, l as Spinner, m as Switch, c as BreadcrumbItem, b as Breadcrumb, p as Tooltip, o as TimePicker, D as DatePicker, n as Textarea, N as NumberField, F as Field, j as Input, S as Skeleton, d as CircularProgress, L as LinearProgress, T as Tag, C as Chip, k as Link, R as Ripple, E as Elevation, f as Divider, i as IconButton, B as Badge, a as Avatar, h as FocusRing, I as Icon } from './breadcrumb-item-DkhwoMAH.js';
+import { e, s as spread, B as Button } from './button-BtpAXuLN.js';
 import { ButtonGroup } from './button-group.js';
-import { Field } from './field.js';
-import { Checkbox } from './checkbox.js';
-import { Menu } from './menu.js';
-import { MenuItem } from './menu-item.js';
-import { MenuList } from './menu-list.js';
-import { Accordion } from './accordion.js';
-import { Link } from './link.js';
-import { Tag } from './tag.js';
-import { Chip } from './chip.js';
-import { Tooltip } from './tooltip.js';
-import { Breadcrumb } from './breadcrumb.js';
-import { BreadcrumbItem } from './breadcrumb-item.js';
-import { Skeleton } from './skeleton.js';
-import { Spinner } from './spinner.js';
-import { EmptyState } from './empty-state.js';
-import { Container } from './container.js';
-import './lit-element-CA46RFZ_.js';
-import './property-DNVWDdPC.js';
-import './state-CV1fRmOT.js';
-import './directive-Cuw6h7YA.js';
-import './unsafe-html-BS8X6Gto.js';
-import './utils-DGMeCC48.js';
-import './class-map-BmCohX9p.js';
-import './spread-axRTFMoH.js';
-import './BaseButton.js';
-import './query-QBcUV-L_.js';
-import './style-map-CdmclYgz.js';
-import './base-progress.js';
-import './BaseInput.js';
-import './accordion-item.js';
+import { i, _ as __decorate, n, a as i$1, w, b } from './PeacockComponent-DMrFEGDh.js';
+import { r } from './state-CEVpI7Vv.js';
+import { e as e$1 } from './class-map-CbncA34D.js';
+import './unsafe-html-Ca00SXpn.js';
+import './style-map-mOmZwsJT.js';
+
+var css_248z$3 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  --checkbox-size: 18px;
+  --checkbox-icon-size: 12px;
+  --checkbox-selected-color: var(--color-primary);
+  --checkbox-unselected-color: var(--color-on-surface-variant);
+  --checkbox-checkmark-color: var(--color-on-primary);
+  --checkbox-state-layer-size: 40px;
+  --checkbox-disabled-opacity: 0.38;
+  --checkbox-border-radius: 2px;
+}
+
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  font-family: var(--typography-body-medium-font-family) !important;
+  font-size: var(--typography-body-medium-font-size) !important;
+  font-weight: var(--typography-body-medium-font-weight) !important;
+  line-height: var(--typography-body-medium-line-height) !important;
+  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
+}
+.checkbox.has-content {
+  gap: 8px;
+}
+.checkbox .input-native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.checkbox .container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-state-layer-size);
+  height: var(--checkbox-state-layer-size);
+  cursor: inherit;
+  outline: none;
+  flex-shrink: 0;
+}
+.checkbox .state-layer {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity var(--duration-short2) var(--easing-standard);
+}
+.checkbox .outline {
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border: 2px solid var(--checkbox-unselected-color);
+  border-radius: var(--checkbox-border-radius);
+  box-sizing: border-box;
+  transition: border-color var(--duration-short2) var(--easing-standard);
+}
+.checkbox .background {
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  background: var(--checkbox-selected-color);
+  border-radius: var(--checkbox-border-radius);
+  opacity: 0;
+  transform: scale(0);
+  transition: transform var(--duration-short2) var(--easing-standard), opacity var(--duration-short2) var(--easing-standard);
+}
+.checkbox .icon {
+  position: absolute;
+  width: var(--checkbox-icon-size);
+  height: var(--checkbox-icon-size);
+  fill: none;
+  stroke: var(--checkbox-checkmark-color);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0;
+  transition: opacity var(--duration-short1) var(--easing-standard);
+}
+.checkbox .icon .checkmark {
+  stroke-dasharray: 14;
+  stroke-dashoffset: 14;
+  transition: stroke-dashoffset var(--duration-short4) var(--easing-emphasized);
+}
+.checkbox .icon .indeterminate {
+  transform-origin: center;
+  opacity: 0;
+  transition: opacity var(--duration-short1) var(--easing-standard);
+}
+.checkbox .label {
+  color: var(--color-on-surface);
+  cursor: inherit;
+}
+.checkbox:hover:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.08;
+  background: var(--color-on-surface);
+}
+.checkbox:hover:not(.disabled):not(.readonly).state-checked .state-layer, .checkbox:hover:not(.disabled):not(.readonly).state-indeterminate .state-layer {
+  background: var(--checkbox-selected-color);
+}
+.checkbox.has-focus:not(.active):not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.checkbox.has-focus:not(.active):not(.disabled):not(.readonly) .container {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+.checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .state-layer, .checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-indeterminate .state-layer {
+  background: var(--checkbox-selected-color);
+}
+.checkbox.active:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.checkbox.active:not(.disabled):not(.readonly).state-checked .state-layer, .checkbox.active:not(.disabled):not(.readonly).state-indeterminate .state-layer {
+  background: var(--checkbox-selected-color);
+}
+.checkbox.rounded {
+  --checkbox-border-radius: 18px;
+}
+
+.checkbox.state-checked .outline {
+  border-color: transparent;
+}
+.checkbox.state-checked .background {
+  opacity: 1;
+  transform: scale(1);
+}
+.checkbox.state-checked .icon {
+  opacity: 1;
+}
+.checkbox.state-checked .icon .checkmark {
+  stroke-dashoffset: 0;
+}
+
+.checkbox.state-indeterminate .outline {
+  border-color: transparent;
+}
+.checkbox.state-indeterminate .background {
+  opacity: 1;
+  transform: scale(1);
+}
+.checkbox.state-indeterminate .icon {
+  opacity: 1;
+  fill: var(--checkbox-checkmark-color);
+}
+.checkbox.state-indeterminate .icon .indeterminate {
+  opacity: 1;
+}
+
+.checkbox.size-sm {
+  --checkbox-size: 16px;
+  --checkbox-icon-size: 10px;
+  --checkbox-state-layer-size: 36px;
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+}
+.checkbox.size-sm .icon {
+  stroke-width: 1.5;
+}
+
+.checkbox.size-md {
+  --checkbox-size: 18px;
+  --checkbox-icon-size: 12px;
+  --checkbox-state-layer-size: 40px;
+}
+.checkbox.size-md .icon {
+  stroke-width: 2;
+}
+
+.checkbox.size-lg {
+  --checkbox-size: 24px;
+  --checkbox-icon-size: 16px;
+  --checkbox-state-layer-size: 48px;
+  font-size: var(--font-size-body-large);
+  line-height: var(--line-height-body-large);
+}
+.checkbox.size-lg .icon {
+  stroke-width: 2.5;
+}
+
+.checkbox.readonly {
+  cursor: default;
+}
+.checkbox.readonly .label {
+  color: var(--color-on-surface);
+}
+.checkbox.readonly .outline {
+  border-color: var(--color-on-surface-variant);
+}
+.checkbox.readonly.state-checked .background, .checkbox.readonly.state-indeterminate .background {
+  background: var(--color-on-surface-variant);
+}
+.checkbox.readonly .state-layer {
+  display: none;
+}
+
+.checkbox.disabled {
+  cursor: not-allowed;
+  opacity: var(--checkbox-disabled-opacity);
+}
+.checkbox.disabled .label {
+  color: var(--color-on-surface);
+}
+.checkbox.disabled .outline {
+  border-color: var(--color-on-surface);
+}
+.checkbox.disabled.state-checked .background, .checkbox.disabled.state-indeterminate .background {
+  background: var(--color-on-surface);
+}
+.checkbox.disabled .state-layer {
+  display: none;
+}`;
+
+/**
+ * @label Checkbox
+ * @tag base-checkbox
+ * @rawTag checkbox
+ *
+ * @summary Captures boolean input with an optional indeterminate mode.
+ * @overview
+ * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>
+ * <p>Material Design 3 checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
+ *
+ * @cssprop --checkbox-size: Size of the checkbox container.
+ * @cssprop --checkbox-selected-color: Color of the checkbox when selected.
+ * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.
+ * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.
+ * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.
+ *
+ * @fires {CustomEvent} change - Dispatched when the checkbox value changes.
+ * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.
+ * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.
+ *
+ * @example
+ * ```html
+ * <base-checkbox label="Accept terms"></base-checkbox>
+ * ```
+ * @tags input, form
+ */
+class Checkbox extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The input field name.
+         */
+        this.name = '';
+        /**
+         * The checkbox label.
+         */
+        this.label = '';
+        /**
+         * The input field value (checked state).
+         */
+        this.value = false;
+        /**
+         * If true, displays the checkbox in an indeterminate state.
+         */
+        this.indeterminate = false;
+        /**
+         * If true, the checkbox has rounded corners. Defaults to `false`.
+         */
+        this.rounded = false;
+        /**
+         * The checkbox size.
+         * Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+         */
+        this.size = 'md';
+        /**
+         * If true, required icon is shown. Defaults to `false`.
+         */
+        this.required = false;
+        /**
+         * If true, the checkbox is readonly. Defaults to `false`.
+         */
+        this.readonly = false;
+        /**
+         * If true, the user cannot interact with the checkbox. Defaults to `false`.
+         */
+        this.disabled = false;
+        /**
+         * Configuration object for aria attributes.
+         */
+        this.configAria = {};
+        this.hasFocus = false;
+        this.isActive = false;
+        this.slotHasContent = false;
+        this.windowMouseUp = () => {
+            if (this.isActive) {
+                this.isActive = false;
+            }
+        };
+        this.windowKeyUp = (evt) => {
+            if (this.isActive && evt.key === ' ') {
+                this.isActive = false;
+            }
+        };
+        this.mouseDownHandler = () => {
+            this.isActive = true;
+        };
+        this.keyDownHandler = (evt) => {
+            if (evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = true;
+                this.clickHandler(evt);
+            }
+        };
+        this.clickHandler = (ev) => {
+            if (!this.disabled && !this.readonly) {
+                this.value = !this.value;
+                this.indeterminate = false;
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: { value: this.value, originalEvent: ev },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.containerElement?.focus();
+            }
+        };
+        this.blurHandler = (ev) => {
+            this.hasFocus = false;
+            this.dispatchEvent(new CustomEvent('blur', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.focusHandler = (ev) => {
+            this.hasFocus = true;
+            this.dispatchEvent(new CustomEvent('focus', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.handleKeyUp = (evt) => {
+            if (evt.key === 'Enter') {
+                this.clickHandler(evt);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleInitialAttributes();
+        window.addEventListener('mouseup', this.windowMouseUp);
+        window.addEventListener('keyup', this.windowKeyUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('mouseup', this.windowMouseUp);
+        window.removeEventListener('keyup', this.windowKeyUp);
+    }
+    firstUpdated() {
+        this.slotHasContent = this.hasChildNodes();
+    }
+    handleInitialAttributes() {
+        if (this.hasAttribute('tabindex')) {
+            this.tabindex = this.getAttribute('tabindex') || undefined;
+            this.removeAttribute('tabindex');
+        }
+        Array.from(this.attributes).forEach(attr => {
+            if (attr.name.startsWith('aria-')) {
+                this.configAria[attr.name] = attr.value;
+                this.removeAttribute(attr.name);
+            }
+        });
+    }
+    /**
+     * Sets focus on the checkbox.
+     */
+    focus() {
+        this.containerElement?.focus();
+    }
+    /**
+     * Removes focus from the checkbox.
+     */
+    blur() {
+        this.containerElement?.blur();
+    }
+    render() {
+        const cssClasses = {
+            checkbox: true,
+            'state-checked': this.value,
+            'state-indeterminate': !this.value && this.indeterminate,
+            [`size-${this.size}`]: true,
+            'has-focus': this.hasFocus,
+            active: this.isActive,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            required: this.required,
+            rounded: this.rounded,
+            'has-content': this.slotHasContent,
+        };
+        return b `
+      <label class=${e$1(cssClasses)}>
+        <div
+          class="container"
+          tabindex=${this.tabindex || 0}
+          @keyup=${this.handleKeyUp}
+          @mousedown=${this.mouseDownHandler}
+          @keydown=${this.keyDownHandler}
+          @blur=${this.blurHandler}
+          @focus=${this.focusHandler}
+          role="checkbox"
+          aria-disabled=${this.disabled}
+          aria-required=${this.required}
+          aria-checked=${this.value
+            ? 'true'
+            : this.indeterminate
+                ? 'mixed'
+                : 'false'}
+          ${spread(this.configAria)}
+        >
+          <div class="state-layer"></div>
+          <div class="outline"></div>
+          <div class="background"></div>
+          <svg class="icon" viewBox="0 0 12 12">
+            ${this.value
+            ? w `
+                  <path
+                    class="checkmark"
+                    d="M2 6L5 9L10 2"
+                  />
+                `
+            : this.indeterminate
+                ? w `<rect
+                    class="indeterminate"
+                    x="2"
+                    y="5"
+                    width="8"
+                    height="2"
+                  />`
+                : ''}
+          </svg>
+        </div>
+
+        <input
+          type="checkbox"
+          class="input-native"
+          name=${this.name}
+          .checked=${this.value}
+          .indeterminate=${this.indeterminate}
+          aria-hidden="true"
+          ?required=${this.required}
+          tabindex="-1"
+          @click=${this.clickHandler}
+        />
+
+        ${this.label
+            ? b `<div class="label">${this.label}</div>`
+            : b `<div class="label slot-container"><slot></slot></div>`}
+      </label>
+    `;
+    }
+}
+Checkbox.styles = [css_248z$3];
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "name", void 0);
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    n({ type: Boolean })
+], Checkbox.prototype, "rounded", void 0);
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Object })
+], Checkbox.prototype, "configAria", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "isActive", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "slotHasContent", void 0);
+__decorate([
+    e('.container')
+], Checkbox.prototype, "containerElement", void 0);
+__decorate([
+    e('.input-native')
+], Checkbox.prototype, "nativeElement", void 0);
+
+class Menu extends i$1 {
+    constructor() {
+        super();
+        this.open = false;
+        // Position: 'bottom-start' | 'bottom-end' | etc. (Simplified here to generic dropdown)
+        this.align = 'start';
+        this._boundClickOutside = this._handleClickOutside.bind(this);
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        window.addEventListener('click', this._boundClickOutside);
+        // Listen for menu-item clicks bubbling up
+        this.addEventListener('click', this._handleItemClick);
+    }
+    disconnectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.disconnectedCallback();
+        window.removeEventListener('click', this._boundClickOutside);
+        this.removeEventListener('click', this._handleItemClick);
+    }
+    _handleClickOutside(e) {
+        if (!this.open)
+            return;
+        const path = e.composedPath();
+        if (!path.includes(this)) {
+            this.open = false;
+        }
+    }
+    _handleItemClick(e) {
+        const target = e.target;
+        // Check if the clicked element is a menu-item
+        if (target.tagName.toLowerCase() === 'menu-item') {
+            // Dispatch custom event with value
+            const value = target.value;
+            this.dispatchEvent(new CustomEvent('menu-selected', {
+                detail: { value },
+                bubbles: true,
+                composed: true,
+            }));
+            this.open = false;
+        }
+    }
+    _toggleMenu(e) {
+        e.stopPropagation(); // Prevent immediate closing via window listener
+        this.open = !this.open;
+    }
+    render() {
+        return b `
+      <div class="trigger" @click="${this._toggleMenu}">
+        <slot name="trigger"></slot>
+      </div>
+
+      <div class="menu-wrapper">
+        <!-- We expect a menu-list to be passed here -->
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+Menu.styles = i `
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .trigger {
+      cursor: pointer;
+      display: inline-block;
+    }
+
+    .menu-wrapper {
+      position: absolute;
+      top: 100%;
+      z-index: 10;
+      opacity: 0;
+      transform: scale(0.95);
+      transform-origin: top left;
+      transition:
+        opacity 0.1s ease-out,
+        transform 0.1s ease-out;
+      pointer-events: none; /* Prevent clicking when hidden */
+      margin-top: 4px; /* Slight gap */
+    }
+
+    :host([open]) .menu-wrapper {
+      opacity: 1;
+      transform: scale(1);
+      pointer-events: auto;
+    }
+
+    /* Alignment logic */
+    :host([align='end']) .menu-wrapper {
+      right: 0;
+      transform-origin: top right;
+    }
+    :host([align='start']) .menu-wrapper {
+      left: 0;
+      transform-origin: top left;
+    }
+  `;
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Menu.prototype, "open", void 0);
+__decorate([
+    n({ type: String })
+], Menu.prototype, "align", void 0);
+__decorate([
+    e('.menu-wrapper')
+], Menu.prototype, "menuWrapper", void 0);
+
+var css_248z$2 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  padding-inline: var(--spacing-050);
+}
+
+.menu-item {
+  position: relative;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  padding-inline: 0.75rem;
+  outline: 0;
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
+}
+.menu-item .menu-item-content {
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  width: 100%;
+  gap: var(--spacing-100);
+  color: var(--_label-text-color);
+  opacity: var(--_label-text-opacity, 1);
+  --icon-size: var(--button-icon-size, var(--_button-icon-size));
+  --icon-color: var(--_label-text-color);
+}
+.menu-item .menu-item-content .slot-container {
+  flex: 1;
+}
+.menu-item .background {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  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);
+  corner-shape: var(--_container-corner-shape-variant);
+  pointer-events: none;
+}
+.menu-item {
+  /*
+   Background layers
+  */
+}
+.menu-item .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);
+}
+.menu-item .ripple {
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-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);
+  corner-shape: var(--_container-corner-shape-variant);
+}
+
+.menu-item {
+  --_container-shape-start-start: var(--menu-item-container-shape-start-start, var(--shape-corner-extra-small));
+  --_container-shape-start-end: var(--menu-item-container-shape-start-end, var(--shape-corner-extra-small));
+  --_container-shape-end-start: var(--menu-item-container-shape-end-start, var(--shape-corner-extra-small));
+  --_container-shape-end-end: var(--menu-item-container-shape-end-end, var(--shape-corner-extra-small));
+  --_container-corner-shape-variant: none;
+  --_label-text-color: var(--menu-item-label-color);
+  --_container-state-color: var(--_label-text-color);
+}
+.menu-item:hover:not(:where(.disabled, .selected)) {
+  --_container-state-opacity: 0.08;
+}
+.menu-item.selected {
+  --_container-color: var(--menu-item-container-selected-color);
+  --_label-text-color: var(--menu-item-label-selected-color);
+  --_container-shape-start-start: var(--menu-item-container-shape-start-start, var(--shape-corner-large));
+  --_container-shape-start-end: var(--menu-item-container-shape-start-end, var(--shape-corner-large));
+  --_container-shape-end-start: var(--menu-item-container-shape-end-start, var(--shape-corner-large));
+  --_container-shape-end-end: var(--menu-item-container-shape-end-end, var(--shape-corner-large));
+  --_container-corner-shape-variant: none;
+}
+.menu-item.disabled {
+  cursor: not-allowed;
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.1;
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+.menu-item.disabled .ripple {
+  display: none;
+}`;
+
+var css_248z$1 = i`:host-context(menu-list[variant=standard]) {
+  --menu-item-label-color: var(--color-on-surface-variant);
+  --menu-item-label-selected-color: var(--color-on-tertiary-container);
+  --menu-item-container-selected-color: var(--color-tertiary-container);
+}
+
+:host-context(menu-list[variant=vibrant]) {
+  --menu-item-label-color: var(--color-on-tertiary-container);
+  --menu-item-label-selected-color: var(--color-on-tertiary);
+  --menu-item-container-selected-color: var(--color-tertiary);
+}`;
+
+class MenuItem extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.value = '';
+        this.selected = false;
+        /**
+        * Sets or retrieves the window or frame at which to target content.
+        */
+        this.target = '_self';
+        this.variant = 'standard';
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'menuitem');
+        }
+    }
+    // Handle keyboard activation (Enter/Space)
+    _handleKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.click();
+        }
+    }
+    __isLink() {
+        return !!this.href;
+    }
+    focus() {
+        this.menuItemElement?.focus();
+    }
+    blur() {
+        this.menuItemElement?.blur();
+    }
+    render() {
+        const isLink = this.__isLink();
+        const cssClasses = {
+            'menu-item': true,
+            disabled: this.disabled,
+            selected: this.selected,
+        };
+        if (isLink) {
+            return b `<a
+        class=${e$1(cssClasses)}
+        href=${this.href}
+        target=${this.target}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+        }
+        return b `<div
+        class=${e$1(cssClasses)}
+        tabindex=${!this.disabled ? 0 : -1}
+        @keydown="${this._handleKeyDown}"
+      >
+        ${this.renderContent()}
+      </div>
+    `;
+    }
+    renderContent() {
+        return b `
+      <focus-ring class="focus-ring" .control=${this}  element="menuItemElement"></focus-ring>
+      <div class="background"></div>
+      <base-ripple class="ripple"></base-ripple>
+
+      <div class="menu-item-content">
+        <slot name="leading-icon"></slot>
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+        <slot
+          name="trailing-supporting-text"
+        ></slot>
+      </div>
+    `;
+    }
+}
+MenuItem.styles = [css_248z$2, css_248z$1];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], MenuItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], MenuItem.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean })
+], MenuItem.prototype, "selected", void 0);
+__decorate([
+    n({ reflect: true })
+], MenuItem.prototype, "href", void 0);
+__decorate([
+    n()
+], MenuItem.prototype, "target", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], MenuItem.prototype, "variant", void 0);
+__decorate([
+    e('.menu-item')
+], MenuItem.prototype, "menuItemElement", void 0);
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+.menu-list {
+  display: flex;
+  position: relative;
+  min-width: 112px;
+  padding-block: var(--spacing-050);
+}
+.menu-list .menu-list-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-050);
+  z-index: 1;
+}
+.menu-list .menu-list-content ::slotted(:first-child) {
+  --menu-item-container-shape-start-start: var(--shape-corner-medium);
+  --menu-item-container-shape-start-end: var(--shape-corner-medium);
+}
+.menu-list .menu-list-content ::slotted(:last-child) {
+  --menu-item-container-shape-end-start: var(--shape-corner-medium);
+  --menu-item-container-shape-end-end: var(--shape-corner-medium);
+}
+.menu-list .menu-list-content ::slotted(base-divider) {
+  --divider-spacing: var(--spacing-100);
+  padding-inline: var(--spacing-050);
+}
+.menu-list .background {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  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);
+  pointer-events: none;
+}
+.menu-list .elevation {
+  --elevation-level: 2;
+  transition-duration: 280ms;
+  --elevation-container-shape-start-start: var(--_container-shape-start-start);
+  --elevation-container-shape-start-end: var(--_container-shape-start-end);
+  --elevation-container-shape-end-start: var(--_container-shape-end-start);
+  --elevation-container-shape-end-end: var(--_container-shape-end-end);
+  --elevation-container-shape-variant: var(--_container-corner-shape-variant);
+}
+
+.menu-list {
+  --_container-shape-start-start: var(--shape-corner-large);
+  --_container-shape-start-end: var(--shape-corner-large);
+  --_container-shape-end-start: var(--shape-corner-large);
+  --_container-shape-end-end: var(--shape-corner-large);
+}
+.menu-list.variant-standard {
+  --_container-color: var(--color-surface-container);
+}
+.menu-list.variant-vibrant {
+  --_container-color: var(--color-tertiary-container);
+}`;
+
+class MenuList extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.variant = 'standard';
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        this.setAttribute('role', 'menu');
+    }
+    render() {
+        return b `<div
+      class=${e$1({
+            'menu-list': true,
+            [`variant-${this.variant}`]: true,
+        })}
+    >
+      <div class="background"></div>
+      <base-elevation class="elevation"></base-elevation>
+
+      <div class="menu-list-content">
+        <slot></slot>
+      </div>
+    </div>`;
+    }
+}
+MenuList.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], MenuList.prototype, "variant", void 0);
 
 class LoaderUtils {
     constructor(loaderConfig) {