import { jsx as h } from "react/jsx-runtime";
import g from "react";
import { o as u } from "./create-component-CVXl33PD.mjs";
import { _ as e, r as c, x as l, a as y, b as v, n, E as s, c as I } from "./class-map-CwiboTfb.mjs";
import { o as w } from "./query-assigned-elements-DUhez03i.mjs";
import { N as $, L as C, a as L } from "./item-CpL4zUlE.mjs";
import "./ripple-pQcEjR05.mjs";
import { a as R } from "./animation-DjClVFum.mjs";
import { i as p, u as k } from "./static-DdXEOlS4.mjs";
import { m as z } from "./delegate-BXi1gVeU.mjs";
/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
const E = new Set(Object.values($));
let f = class extends c {
  /** @export */
  get items() {
    return this.listController.items;
  }
  constructor() {
    super(), this.listController = new C({
      isItem: (t) => t.hasAttribute("md-list-item"),
      getPossibleItems: () => this.slotItems,
      isRtl: () => getComputedStyle(this).direction === "rtl",
      deactivateItem: (t) => {
        t.tabIndex = -1;
      },
      activateItem: (t) => {
        t.tabIndex = 0;
      },
      isNavigableKey: (t) => E.has(t),
      isActivatable: (t) => !t.disabled && t.type !== "text"
    }), this.internals = // Cast needed for closure
    this.attachInternals(), this.internals.role = "list", this.addEventListener("keydown", this.listController.handleKeydown);
  }
  render() {
    return l`
      <slot
        @deactivate-items=${this.listController.onDeactivateItems}
        @request-activation=${this.listController.onRequestActivation}
        @slotchange=${this.listController.onSlotchange}>
      </slot>
    `;
  }
  /**
   * Activates the next item in the list. If at the end of the list, the first
   * item will be activated.
   *
   * @return The activated list item or `null` if there are no items.
   */
  activateNextItem() {
    return this.listController.activateNextItem();
  }
  /**
   * Activates the previous item in the list. If at the start of the list, the
   * last item will be activated.
   *
   * @return The activated list item or `null` if there are no items.
   */
  activatePreviousItem() {
    return this.listController.activatePreviousItem();
  }
};
e([
  w({ flatten: !0 })
], f.prototype, "slotItems", void 0);
/**
 * @license
 * Copyright 2024 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
const A = y`:host{background:var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex;flex-direction:column;outline:none;padding:8px 0;position:relative}
`;
/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
let d = class extends f {
};
d.styles = [A];
d = e([
  v("md-list")
], d);
/**
 * @license
 * Copyright 2022 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
const N = z(c);
class r extends N {
  constructor() {
    super(...arguments), this.disabled = !1, this.type = "text", this.isListItem = !0, this.href = "", this.target = "";
  }
  get isDisabled() {
    return this.disabled && this.type !== "link";
  }
  willUpdate(t) {
    this.href && (this.type = "link"), super.willUpdate(t);
  }
  render() {
    return this.renderListItem(l`
      <md-item>
        <div slot="container">
          ${this.renderRipple()} ${this.renderFocusRing()}
        </div>
        <slot name="start" slot="start"></slot>
        <slot name="end" slot="end"></slot>
        ${this.renderBody()}
      </md-item>
    `);
  }
  /**
   * Renders the root list item.
   *
   * @param content the child content of the list item.
   */
  renderListItem(t) {
    const a = this.type === "link";
    let o;
    switch (this.type) {
      case "link":
        o = p`a`;
        break;
      case "button":
        o = p`button`;
        break;
      default:
      case "text":
        o = p`li`;
        break;
    }
    const b = this.type !== "text", x = a && this.target ? this.target : s;
    return k`
      <${o}
        id="item"
        tabindex="${this.isDisabled || !b ? -1 : 0}"
        ?disabled=${this.isDisabled}
        role="listitem"
        aria-selected=${this.ariaSelected || s}
        aria-checked=${this.ariaChecked || s}
        aria-expanded=${this.ariaExpanded || s}
        aria-haspopup=${this.ariaHasPopup || s}
        class="list-item ${I(this.getRenderClasses())}"
        href=${this.href || s}
        target=${x}
        @focus=${this.onFocus}
      >${t}</${o}>
    `;
  }
  /**
   * Handles rendering of the ripple element.
   */
  renderRipple() {
    return this.type === "text" ? s : l` <md-ripple
      part="ripple"
      for="item"
      ?disabled=${this.isDisabled}></md-ripple>`;
  }
  /**
   * Handles rendering of the focus ring.
   */
  renderFocusRing() {
    return this.type === "text" ? s : l` <md-focus-ring
      @visibility-changed=${this.onFocusRingVisibilityChanged}
      part="focus-ring"
      for="item"
      inward></md-focus-ring>`;
  }
  onFocusRingVisibilityChanged(t) {
  }
  /**
   * Classes applied to the list item root.
   */
  getRenderClasses() {
    return { disabled: this.isDisabled };
  }
  /**
   * Handles rendering the headline and supporting text.
   */
  renderBody() {
    return l`
      <slot></slot>
      <slot name="overline" slot="overline"></slot>
      <slot name="headline" slot="headline"></slot>
      <slot name="supporting-text" slot="supporting-text"></slot>
      <slot
        name="trailing-supporting-text"
        slot="trailing-supporting-text"></slot>
    `;
  }
  onFocus() {
    this.tabIndex === -1 && this.dispatchEvent(L());
  }
  focus() {
    var t;
    (t = this.listItemRoot) == null || t.focus();
  }
}
r.shadowRootOptions = {
  ...c.shadowRootOptions,
  delegatesFocus: !0
};
e([
  n({ type: Boolean, reflect: !0 })
], r.prototype, "disabled", void 0);
e([
  n({ reflect: !0 })
], r.prototype, "type", void 0);
e([
  n({ type: Boolean, attribute: "md-list-item", reflect: !0 })
], r.prototype, "isListItem", void 0);
e([
  n()
], r.prototype, "href", void 0);
e([
  n()
], r.prototype, "target", void 0);
e([
  R(".list-item")
], r.prototype, "listItemRoot", void 0);
/**
 * @license
 * Copyright 2024 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
const D = y`:host{display:flex;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}:host(:is([type=button]:not([disabled]),[type=link])){cursor:pointer}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;cursor:inherit;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}@media(forced-colors: active){.disabled slot{color:GrayText}.list-item.disabled{color:GrayText;opacity:1}}
`;
/**
 * @license
 * Copyright 2022 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
let m = class extends r {
};
m.styles = [D];
m = e([
  v("md-list-item")
], m);
const F = u({
  react: g,
  tagName: "md-list",
  elementClass: d
}), Y = (i) => {
  const { children: t, ...a } = i;
  return /* @__PURE__ */ h(F, { ...a, children: t });
}, _ = u({
  react: g,
  tagName: "md-list-item",
  elementClass: m
}), J = (i) => {
  const { children: t, ...a } = i, o = i.type || "text";
  return /* @__PURE__ */ h(_, { ...a, type: o, children: t });
};
export {
  Y as List,
  J as ListItem
};