@francofantomius/material-components 1.0.1 → 1.1.0

package/dist/chunks/segmented-button-B0BvGSQ7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-B0BvGSQ7.js","names":[],"sources":["../../src/components/segmented-button/segmented-button.css.ts","../../src/components/segmented-button/segmented-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const segmentedButtonStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    box-sizing: border-box;\n    height: 40px;\n    min-height: 40px;\n    padding: 0 16px;\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    text-decoration: none;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  :host(:hover:not([disabled])) {\n    background-color: rgba(29, 27, 32, 0.08);\n  }\n\n  :host([selected]:hover:not([disabled])) {\n    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container, #E8DEF8) 90%, #1D192B 10%);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n    cursor: not-allowed;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    gap: 8px;\n    position: relative;\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    --md-icon-size: 18px;\n  }\n\n  .checkmark-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    animation: checkmark-pop 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  @keyframes checkmark-pop {\n    0% {\n      transform: scale(0.6);\n      opacity: 0;\n    }\n    100% {\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  .label {\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport const segmentedButtonSetStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: stretch;\n    position: relative;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    background-color: transparent;\n    overflow: hidden;\n    box-sizing: border-box;\n    vertical-align: middle;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  ::slotted(md-segmented-button:not(:first-child)) {\n    border-left: 1px solid var(--md-sys-color-outline, #79747E);\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { segmentedButtonStyles, segmentedButtonSetStyles } from './segmented-button.css.js';\n\n@customElement('md-segmented-button')\nexport class MdSegmentedButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, segmentedButtonStyles];\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: Boolean, attribute: 'no-checkmark', reflect: true })\n  noCheckmark = false;\n\n  @queryAssignedElements({ slot: 'icon' })\n  private assignedIcons!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'button');\n    this.updateAriaAttributes();\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('selected') || changedProperties.has('disabled')) {\n      this.updateAriaAttributes();\n    }\n  }\n\n  private updateAriaAttributes() {\n    this.setAttribute('aria-pressed', this.selected ? 'true' : 'false');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    const parentSet = this.closest('md-segmented-button-set');\n    if (!parentSet) {\n      this.selected = !this.selected;\n      this.emitEvent('change', {\n        selected: this.selected,\n        value: this.value || this.label || this.textContent?.trim() || '',\n      });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.click();\n    }\n  };\n\n  override render() {\n    const showCheckmark = this.selected && !this.noCheckmark;\n    const hasIcon = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n\n    return html`\n      <div class=\"button\">\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n\n        ${showCheckmark\n          ? html`\n              <span class=\"icon checkmark-icon\" aria-hidden=\"true\">\n                <md-icon name=\"check\" size=\"18\"></md-icon>\n              </span>\n            `\n          : hasIcon\n          ? html`\n              <span class=\"icon\">\n                <slot name=\"icon\">\n                  ${this.icon ? html`<md-icon name=${this.icon} size=\"18\"></md-icon>` : nothing}\n                </slot>\n              </span>\n            `\n          : html`<slot name=\"icon\"></slot>`}\n\n        <span class=\"label\">\n          <slot>${this.label}</slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\n@customElement('md-segmented-button-set')\nexport class MdSegmentedButtonSet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, segmentedButtonSetStyles];\n\n  @property({ type: Boolean, reflect: true })\n  multiselect = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ selector: 'md-segmented-button' })\n  private buttons!: MdSegmentedButton[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'group');\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this.syncDisabled();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncRovingTabIndex();\n    if (this.disabled) {\n      this.syncDisabled();\n    }\n  };\n\n  private syncDisabled() {\n    if (!this.buttons) return;\n    this.buttons.forEach((btn) => {\n      btn.disabled = this.disabled;\n    });\n  }\n\n  private syncRovingTabIndex() {\n    if (!this.buttons || this.buttons.length === 0) return;\n    const selectedBtn = this.buttons.find((b) => b.selected && !b.disabled);\n    const firstEnabled = this.buttons.find((b) => !b.disabled);\n    const focusTarget = selectedBtn || firstEnabled;\n\n    this.buttons.forEach((b) => {\n      b.tabIndex = b === focusTarget ? 0 : -1;\n    });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n    const target = (event.target as HTMLElement).closest('md-segmented-button') as MdSegmentedButton | null;\n    if (!target || target.disabled || !this.buttons.includes(target)) return;\n\n    const index = this.buttons.indexOf(target);\n\n    if (this.multiselect) {\n      target.selected = !target.selected;\n    } else {\n      this.buttons.forEach((btn) => {\n        btn.selected = btn === target;\n      });\n    }\n\n    this.syncRovingTabIndex();\n\n    const selectedButtons = this.buttons.filter((b) => b.selected);\n    const values = selectedButtons.map((b) => b.value || b.label || b.textContent?.trim() || '');\n    const value = target.value || target.label || target.textContent?.trim() || '';\n\n    this.emitEvent('change', {\n      target,\n      index,\n      selected: target.selected,\n      value,\n      values,\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const enabledButtons = this.buttons.filter((b) => !b.disabled);\n    if (enabledButtons.length === 0) return;\n\n    const currentFocus = document.activeElement;\n    const currentIndex = enabledButtons.findIndex(\n      (b) => b === currentFocus || (b.shadowRoot && b.shadowRoot.activeElement === currentFocus)\n    );\n\n    let nextIndex = -1;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      nextIndex = currentIndex >= 0 && currentIndex < enabledButtons.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledButtons.length - 1;\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      nextIndex = 0;\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      nextIndex = enabledButtons.length - 1;\n    }\n\n    if (nextIndex !== -1 && enabledButtons[nextIndex]) {\n      const targetBtn = enabledButtons[nextIndex]!;\n      this.buttons.forEach((b) => {\n        b.tabIndex = b === targetBtn ? 0 : -1;\n      });\n      targetBtn.focus();\n    }\n  };\n\n  override render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-segmented-button': MdSegmentedButton;\n    'md-segmented-button-set': MdSegmentedButtonSet;\n  }\n}\n\n"],"mappings":"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"}

package/dist/chunks/side-sheet-S2w081AK.js

@@ -0,0 +1,360 @@
+import { n, t } from "./decorate-DXuynaiA.js";
+import "./icon-DrNqcNEL.js";
+import "./icon-button-BQz73GLa.js";
+import { css as h, html as s, nothing as d } from "lit";
+import { customElement as c, property as o } from "lit/decorators.js";
+var p = h`
+  :host {
+    display: contents;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+  }
+
+  /* Scrim for modal variant */
+  .scrim {
+    position: fixed;
+    inset: 0;
+    background-color: var(--md-side-sheet-scrim-color, var(--md-sys-color-scrim, rgba(0, 0, 0, 0.32)));
+    backdrop-filter: blur(1px);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),
+                visibility 250ms cubic-bezier(0.2, 0, 0, 1);
+    z-index: 999;
+  }
+
+  :host([open][modal]) .scrim,
+  :host([open][type="modal"]) .scrim {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  /* Side Sheet Container */
+  .sheet {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: var(--md-side-sheet-width, 400px);
+    max-width: calc(100vw - 56px);
+    background-color: var(--md-side-sheet-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));
+    color: var(--md-side-sheet-on-container-color, var(--md-sys-color-on-surface, #1D1B20));
+    overflow: hidden;
+    z-index: 1000;
+  }
+
+  /* Modal Mode (Overlay with scrim) */
+  :host([type="modal"]) .sheet,
+  :host([modal]) .sheet {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: auto;
+    height: 100dvh;
+    border-radius: var(--md-side-sheet-shape, 16px) 0 0 var(--md-side-sheet-shape, 16px);
+    box-shadow: var(--md-side-sheet-elevation, var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15)));
+    transform: translateX(100%);
+    visibility: hidden;
+    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1),
+                visibility 300ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([open][type="modal"]) .sheet,
+  :host([open][modal]) .sheet {
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  /* Start / Left placement for Modal */
+  :host([type="modal"][side="start"]) .sheet,
+  :host([modal][side="start"]) .sheet,
+  :host([type="modal"][side="left"]) .sheet,
+  :host([modal][side="left"]) .sheet {
+    left: 0;
+    right: auto;
+    border-radius: 0 var(--md-side-sheet-shape, 16px) var(--md-side-sheet-shape, 16px) 0;
+    transform: translateX(-100%);
+  }
+
+  :host([open][type="modal"][side="start"]) .sheet,
+  :host([open][modal][side="start"]) .sheet,
+  :host([open][type="modal"][side="left"]) .sheet,
+  :host([open][modal][side="left"]) .sheet {
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  /* Standard Mode (In-flow side panel) */
+  :host(:not([type="modal"]):not([modal])),
+  :host([type="standard"]) {
+    display: block;
+    height: 100%;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: width 300ms cubic-bezier(0.2, 0, 0, 1),
+                min-width 300ms cubic-bezier(0.2, 0, 0, 1),
+                max-width 300ms cubic-bezier(0.2, 0, 0, 1),
+                opacity 250ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host(:not([type="modal"]):not([modal]):not([open])),
+  :host([type="standard"]:not([open])) {
+    width: 0 !important;
+    min-width: 0 !important;
+    max-width: 0 !important;
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  :host(:not([type="modal"]):not([modal])[open]),
+  :host([type="standard"][open]) {
+    width: var(--md-side-sheet-width, 400px);
+    opacity: 1;
+    visibility: visible;
+  }
+
+  :host(:not([type="modal"]):not([modal])) .scrim,
+  :host([type="standard"]) .scrim {
+    display: none;
+  }
+
+  :host(:not([type="modal"]):not([modal])) .sheet,
+  :host([type="standard"]) .sheet {
+    position: relative;
+    height: 100%;
+    width: var(--md-side-sheet-width, 400px);
+    min-width: var(--md-side-sheet-width, 400px);
+    transform: none;
+    visibility: visible;
+    box-shadow: none;
+    background-color: var(--md-side-sheet-container-color, var(--md-sys-color-surface, #FEF7FF));
+    border-left: 1px solid var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));
+    border-right: none;
+  }
+
+  /* Start placement border (Standard) */
+  :host(:not([type="modal"]):not([modal])[side="start"]) .sheet,
+  :host(:not([type="modal"]):not([modal])[side="left"]) .sheet,
+  :host([type="standard"][side="start"]) .sheet,
+  :host([type="standard"][side="left"]) .sheet {
+    border-right: 1px solid var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));
+    border-left: none;
+  }
+
+  /* Header Section */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 16px 16px 24px;
+    min-height: 56px;
+    box-sizing: border-box;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .header-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    gap: 2px;
+  }
+
+  .headline {
+    margin: 0;
+    font-size: var(--md-sys-typescale-title-large-size, 20px);
+    line-height: 28px;
+    font-weight: 500;
+    color: var(--md-side-sheet-headline-color, var(--md-sys-color-on-surface, #1D1B20));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .subhead {
+    margin: 0;
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    line-height: 20px;
+    color: var(--md-side-sheet-subhead-color, var(--md-sys-color-on-surface-variant, #49454F));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  .close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Divider */
+  .divider {
+    height: 1px;
+    background-color: var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));
+    width: 100%;
+    flex-shrink: 0;
+  }
+
+  /* Content Section */
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 16px 24px;
+    box-sizing: border-box;
+    gap: 16px;
+  }
+
+  .content::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .content::-webkit-scrollbar-thumb {
+    background-color: var(--md-sys-color-outline-variant, #CAC4D0);
+    border-radius: 4px;
+  }
+
+  /* Footer Section */
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 16px 24px;
+    box-sizing: border-box;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+`, e = class extends n {
+  constructor(...i) {
+    super(...i), this.open = !1, this.type = "standard", this.modal = !1, this.side = "end", this.headline = "", this.subhead = "", this.hideCloseButton = !1, this.divider = !1, this.handleKeyDown = (a) => {
+      a.key === "Escape" && this.open && this.isModalMode() && (this.close(), this.emitEvent("cancel"));
+    }, this.handleScrimClick = () => {
+      this.close(), this.emitEvent("scrim-click");
+    }, this.handleCloseClick = () => {
+      this.close(), this.emitEvent("close-click");
+    };
+  }
+  static {
+    this.styles = [n.styles, p];
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(i) {
+    super.updated(i), i.has("open") && (this.open ? this.emitEvent("open") : this.emitEvent("close"));
+  }
+  isModalMode() {
+    return this.modal || this.type === "modal";
+  }
+  show() {
+    this.open = !0;
+  }
+  close() {
+    this.open = !1;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  render() {
+    const i = this.isModalMode(), a = this.headline ? s`<h2 class="headline">${this.headline}</h2>` : d, r = this.subhead ? s`<p class="subhead">${this.subhead}</p>` : d, l = this.hideCloseButton ? d : s`
+          <slot name="close-button">
+            <md-icon-button
+              class="close-button"
+              icon="close"
+              aria-label="Close side sheet"
+              @click=${this.handleCloseClick}
+            ></md-icon-button>
+          </slot>
+        `;
+    return s`
+      <div class="scrim" @click=${this.handleScrimClick}></div>
+
+      <aside
+        class="sheet"
+        role=${i ? "dialog" : "complementary"}
+        aria-modal=${i ? "true" : d}
+        aria-hidden=${this.open ? "false" : "true"}
+        aria-label=${this.headline || "Side sheet"}
+      >
+        <slot name="header">
+          <div class="header">
+            <div class="header-content">
+              <slot name="headline">
+                ${a}
+              </slot>
+              <slot name="subhead">
+                ${r}
+              </slot>
+            </div>
+
+            <div class="header-actions">
+              <slot name="header-actions"></slot>
+              ${l}
+            </div>
+          </div>
+        </slot>
+
+        ${this.divider ? s`<div class="divider"></div>` : d}
+
+        <div class="content">
+          <slot></slot>
+        </div>
+
+        <slot name="footer">
+          <div class="footer">
+            <slot name="actions"></slot>
+          </div>
+        </slot>
+      </aside>
+    `;
+  }
+};
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "open", void 0);
+t([o({
+  type: String,
+  reflect: !0
+})], e.prototype, "type", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "modal", void 0);
+t([o({
+  type: String,
+  reflect: !0
+})], e.prototype, "side", void 0);
+t([o({ type: String })], e.prototype, "headline", void 0);
+t([o({ type: String })], e.prototype, "subhead", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0,
+  attribute: "hide-close-button"
+})], e.prototype, "hideCloseButton", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "divider", void 0);
+e = t([c("md-side-sheet")], e);
+export {
+  e as t
+};
+
+//# sourceMappingURL=side-sheet-S2w081AK.js.map

package/dist/chunks/side-sheet-S2w081AK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-sheet-S2w081AK.js","names":[],"sources":["../../src/components/side-sheet/side-sheet.css.ts","../../src/components/side-sheet/side-sheet.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const sideSheetStyles = css`\n  :host {\n    display: contents;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n  }\n\n  /* Scrim for modal variant */\n  .scrim {\n    position: fixed;\n    inset: 0;\n    background-color: var(--md-side-sheet-scrim-color, var(--md-sys-color-scrim, rgba(0, 0, 0, 0.32)));\n    backdrop-filter: blur(1px);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 999;\n  }\n\n  :host([open][modal]) .scrim,\n  :host([open][type=\"modal\"]) .scrim {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  /* Side Sheet Container */\n  .sheet {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--md-side-sheet-width, 400px);\n    max-width: calc(100vw - 56px);\n    background-color: var(--md-side-sheet-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));\n    color: var(--md-side-sheet-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    z-index: 1000;\n  }\n\n  /* Modal Mode (Overlay with scrim) */\n  :host([type=\"modal\"]) .sheet,\n  :host([modal]) .sheet {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: auto;\n    height: 100dvh;\n    border-radius: var(--md-side-sheet-shape, 16px) 0 0 var(--md-side-sheet-shape, 16px);\n    box-shadow: var(--md-side-sheet-elevation, var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15)));\n    transform: translateX(100%);\n    visibility: hidden;\n    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 300ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([open][type=\"modal\"]) .sheet,\n  :host([open][modal]) .sheet {\n    transform: translateX(0);\n    visibility: visible;\n  }\n\n  /* Start / Left placement for Modal */\n  :host([type=\"modal\"][side=\"start\"]) .sheet,\n  :host([modal][side=\"start\"]) .sheet,\n  :host([type=\"modal\"][side=\"left\"]) .sheet,\n  :host([modal][side=\"left\"]) .sheet {\n    left: 0;\n    right: auto;\n    border-radius: 0 var(--md-side-sheet-shape, 16px) var(--md-side-sheet-shape, 16px) 0;\n    transform: translateX(-100%);\n  }\n\n  :host([open][type=\"modal\"][side=\"start\"]) .sheet,\n  :host([open][modal][side=\"start\"]) .sheet,\n  :host([open][type=\"modal\"][side=\"left\"]) .sheet,\n  :host([open][modal][side=\"left\"]) .sheet {\n    transform: translateX(0);\n    visibility: visible;\n  }\n\n  /* Standard Mode (In-flow side panel) */\n  :host(:not([type=\"modal\"]):not([modal])),\n  :host([type=\"standard\"]) {\n    display: block;\n    height: 100%;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: width 300ms cubic-bezier(0.2, 0, 0, 1),\n                min-width 300ms cubic-bezier(0.2, 0, 0, 1),\n                max-width 300ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host(:not([type=\"modal\"]):not([modal]):not([open])),\n  :host([type=\"standard\"]:not([open])) {\n    width: 0 !important;\n    min-width: 0 !important;\n    max-width: 0 !important;\n    opacity: 0;\n    pointer-events: none;\n    visibility: hidden;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])[open]),\n  :host([type=\"standard\"][open]) {\n    width: var(--md-side-sheet-width, 400px);\n    opacity: 1;\n    visibility: visible;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])) .scrim,\n  :host([type=\"standard\"]) .scrim {\n    display: none;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])) .sheet,\n  :host([type=\"standard\"]) .sheet {\n    position: relative;\n    height: 100%;\n    width: var(--md-side-sheet-width, 400px);\n    min-width: var(--md-side-sheet-width, 400px);\n    transform: none;\n    visibility: visible;\n    box-shadow: none;\n    background-color: var(--md-side-sheet-container-color, var(--md-sys-color-surface, #FEF7FF));\n    border-left: 1px solid var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    border-right: none;\n  }\n\n  /* Start placement border (Standard) */\n  :host(:not([type=\"modal\"]):not([modal])[side=\"start\"]) .sheet,\n  :host(:not([type=\"modal\"]):not([modal])[side=\"left\"]) .sheet,\n  :host([type=\"standard\"][side=\"start\"]) .sheet,\n  :host([type=\"standard\"][side=\"left\"]) .sheet {\n    border-right: 1px solid var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    border-left: none;\n  }\n\n  /* Header Section */\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 16px 16px 24px;\n    min-height: 56px;\n    box-sizing: border-box;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n\n  .header-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    gap: 2px;\n  }\n\n  .headline {\n    margin: 0;\n    font-size: var(--md-sys-typescale-title-large-size, 20px);\n    line-height: 28px;\n    font-weight: 500;\n    color: var(--md-side-sheet-headline-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .subhead {\n    margin: 0;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    color: var(--md-side-sheet-subhead-color, var(--md-sys-color-on-surface-variant, #49454F));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .header-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n  }\n\n  .close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Divider */\n  .divider {\n    height: 1px;\n    background-color: var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  /* Content Section */\n  .content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 16px 24px;\n    box-sizing: border-box;\n    gap: 16px;\n  }\n\n  .content::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .content::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 4px;\n  }\n\n  /* Footer Section */\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 16px 24px;\n    box-sizing: border-box;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport { sideSheetStyles } from './side-sheet.css.js';\n\nexport type SideSheetType = 'standard' | 'modal';\nexport type SideSheetPlacement = 'start' | 'end' | 'left' | 'right';\n\n/**\n * Material Design 3 Side Sheet component.\n *\n * Side sheets display secondary content anchored to the side of the screen,\n * supporting standard (in-flow side panel) and modal (overlay with scrim) modes.\n *\n * @slot - Default slot for main sheet body content.\n * @slot header - Full header area replacement.\n * @slot headline - Custom title / headline content.\n * @slot subhead - Custom subtitle / subhead content.\n * @slot header-actions - Additional actions next to the close button in the header.\n * @slot close-button - Custom close button element.\n * @slot footer - Bottom actions / footer area.\n */\n@customElement('md-side-sheet')\nexport class MdSideSheet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, sideSheetStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  type: SideSheetType = 'standard';\n\n  @property({ type: Boolean, reflect: true })\n  modal = false;\n\n  @property({ type: String, reflect: true })\n  side: SideSheetPlacement = 'end';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  subhead = '';\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  @property({ type: Boolean, reflect: true })\n  divider = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.emitEvent('open');\n      } else {\n        this.emitEvent('close');\n      }\n    }\n  }\n\n  /**\n   * Returns whether the side sheet is currently functioning in modal mode.\n   */\n  isModalMode(): boolean {\n    return this.modal || this.type === 'modal';\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open && this.isModalMode()) {\n      this.close();\n      this.emitEvent('cancel');\n    }\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n    this.emitEvent('scrim-click');\n  };\n\n  private handleCloseClick = () => {\n    this.close();\n    this.emitEvent('close-click');\n  };\n\n  /**\n   * Opens the side sheet.\n   */\n  show() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the side sheet.\n   */\n  close() {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the open/closed state of the side sheet.\n   */\n  toggle() {\n    this.open = !this.open;\n  }\n\n  override render() {\n    const isModal = this.isModalMode();\n\n    const headlineContent = this.headline\n      ? html`<h2 class=\"headline\">${this.headline}</h2>`\n      : nothing;\n\n    const subheadContent = this.subhead\n      ? html`<p class=\"subhead\">${this.subhead}</p>`\n      : nothing;\n\n    const closeBtnContent = !this.hideCloseButton\n      ? html`\n          <slot name=\"close-button\">\n            <md-icon-button\n              class=\"close-button\"\n              icon=\"close\"\n              aria-label=\"Close side sheet\"\n              @click=${this.handleCloseClick}\n            ></md-icon-button>\n          </slot>\n        `\n      : nothing;\n\n    return html`\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <aside\n        class=\"sheet\"\n        role=${isModal ? 'dialog' : 'complementary'}\n        aria-modal=${isModal ? 'true' : nothing}\n        aria-hidden=${this.open ? 'false' : 'true'}\n        aria-label=${this.headline || 'Side sheet'}\n      >\n        <slot name=\"header\">\n          <div class=\"header\">\n            <div class=\"header-content\">\n              <slot name=\"headline\">\n                ${headlineContent}\n              </slot>\n              <slot name=\"subhead\">\n                ${subheadContent}\n              </slot>\n            </div>\n\n            <div class=\"header-actions\">\n              <slot name=\"header-actions\"></slot>\n              ${closeBtnContent}\n            </div>\n          </div>\n        </slot>\n\n        ${this.divider ? html`<div class=\"divider\"></div>` : nothing}\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"footer\">\n          <div class=\"footer\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </aside>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-side-sheet': MdSideSheet;\n  }\n}\n"],"mappings":";;;;;AAEA,IAAa,IAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCuBlB,IA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"}