@francofantomius/material-components 0.1.0 → 1.0.0

package/dist/chunks/text-field-hN6-2HQy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-hN6-2HQy.js","names":[],"sources":["../../src/components/text-field/text-field.css.ts","../../src/components/text-field/text-field.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const textFieldStyles = css`\n  :host {\n    display: inline-flex;\n    flex-direction: column;\n    min-width: 240px;\n    vertical-align: top;\n    align-self: flex-start;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: 56px;\n    padding: 0 16px;\n    box-sizing: border-box;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Filled Variant (Default) --- */\n  :host(:not([variant])) .container,\n  :host([variant=\"filled\"]) .container {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px) var(--md-sys-shape-corner-extra-small, 4px) 0 0;\n    border-bottom: 1px solid var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host(:not([variant])[focused]) .container,\n  :host([variant=\"filled\"][focused]) .container {\n    border-bottom: 2px solid var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host(:not([variant])[error]) .container,\n  :host([variant=\"filled\"][error]) .container {\n    border-bottom-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* --- Outlined Variant --- */\n  :host([variant=\"outlined\"]) .container {\n    background-color: transparent;\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n  }\n\n  :host([variant=\"outlined\"][focused]) .container {\n    border: 2px solid var(--md-sys-color-primary, #6750A4);\n    padding: 0 15px; /* Offset for 2px border */\n  }\n\n  :host([variant=\"outlined\"][error]) .container {\n    border-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* Floating Label */\n  .label {\n    position: absolute;\n    left: 16px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 16px;\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    pointer-events: none;\n    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),\n                font-size 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1),\n                left 150ms cubic-bezier(0.2, 0, 0, 1),\n                top 150ms cubic-bezier(0.2, 0, 0, 1);\n    transform-origin: top left;\n    white-space: nowrap;\n    max-width: calc(100% - 32px);\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  :host([has-leading-icon]) .label {\n    left: 52px;\n    max-width: calc(100% - 68px);\n  }\n\n  /* Filled Variant Floating Label */\n  :host(:not([variant])[focused]) .label,\n  :host(:not([variant])[has-value]) .label,\n  :host(:not([variant])[has-placeholder]) .label,\n  :host([variant=\"filled\"][focused]) .label,\n  :host([variant=\"filled\"][has-value]) .label,\n  :host([variant=\"filled\"][has-placeholder]) .label {\n    top: 8px;\n    transform: translateY(0) scale(0.75);\n    transform-origin: top left;\n  }\n\n  /* Outlined Variant Floating Label */\n  :host([variant=\"outlined\"][focused]) .label,\n  :host([variant=\"outlined\"][has-value]) .label,\n  :host([variant=\"outlined\"][has-placeholder]) .label {\n    top: 0;\n    left: 12px;\n    transform: translateY(-50%) scale(0.75);\n    transform-origin: left center;\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n    padding: 0 4px;\n    max-width: calc(100% - 24px);\n    z-index: 1;\n  }\n\n  :host([focused]) .label {\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([error]) .label {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n\n  .input-wrapper {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  :host(:not([variant])) .input-wrapper,\n  :host([variant=\"filled\"]) .input-wrapper {\n    padding-top: 18px;\n  }\n\n  input {\n    flex: 1;\n    width: 100%;\n    border: none;\n    outline: none;\n    background: transparent;\n    font-family: inherit;\n    font-size: 16px;\n    line-height: 24px;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    padding: 0;\n  }\n\n  input::placeholder {\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    opacity: 0.6;\n  }\n\n  .affix {\n    font-size: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    user-select: none;\n    transition: opacity 150ms ease;\n  }\n\n  :host(:not([focused]):not([has-value]):not([has-placeholder])) .affix {\n    opacity: 0;\n  }\n\n  .prefix { margin-right: 4px; }\n  .suffix { margin-left: 4px; }\n\n  .icon-slot {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .leading-icon { margin-right: 12px; }\n  .trailing-icon { margin-left: 12px; }\n\n  :host([error]) .trailing-icon {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* Supporting / Error text */\n  .supporting-text {\n    display: flex;\n    justify-content: space-between;\n    padding: 4px 16px 0;\n    font-size: 12px;\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host([error]) .supporting-text {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../icon/icon.js';\nimport { textFieldStyles } from './text-field.css.js';\n\nexport type TextFieldVariant = 'filled' | 'outlined';\n\n@customElement('md-text-field')\nexport class MdTextField extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, textFieldStyles];\n\n  @property({ type: String, reflect: true })\n  variant: TextFieldVariant = 'filled';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  type = 'text';\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String, attribute: 'error-text' })\n  errorText = '';\n\n  @property({ type: String, attribute: 'supporting-text' })\n  supportingText = '';\n\n  @property({ type: String, attribute: 'prefix-text' })\n  prefixText = '';\n\n  @property({ type: String, attribute: 'suffix-text' })\n  suffixText = '';\n\n  @property({ type: Number, attribute: 'maxlength' })\n  maxLength = -1;\n\n  @property({ type: String })\n  pattern = '';\n\n  @property({ type: String, attribute: 'leading-icon' })\n  leadingIcon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @state()\n  private focused = false;\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  @queryAssignedElements({ slot: 'leading-icon' })\n  private assignedLeadingIcons!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.toggleAttribute('has-placeholder', Boolean(this.placeholder));\n    this.toggleAttribute('has-leading-icon', Boolean(this.leadingIcon));\n  }\n\n  override firstUpdated(changedProperties: Map<string, unknown>) {\n    super.firstUpdated(changedProperties);\n    this.handleSlotChange();\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      this.setFormValue(this.value);\n      this.toggleAttribute('has-value', Boolean(this.value));\n      this.validateInput();\n    }\n    if (changedProperties.has('placeholder')) {\n      this.toggleAttribute('has-placeholder', Boolean(this.placeholder));\n    }\n    if (changedProperties.has('leadingIcon')) {\n      this.toggleAttribute('has-leading-icon', Boolean(this.leadingIcon));\n    }\n  }\n\n  override formResetCallback() {\n    this.value = '';\n    this.error = false;\n    this.toggleAttribute('has-value', false);\n    this.setFormValue(null);\n  }\n\n  private handleFocus = () => {\n    this.focused = true;\n    this.toggleAttribute('focused', true);\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.toggleAttribute('focused', false);\n    this.validateInput();\n  };\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.setFormValue(this.value);\n    this.emitEvent('input', { value: this.value });\n  };\n\n  private handleChange = () => {\n    this.emitEvent('change', { value: this.value });\n  };\n\n  private validateInput() {\n    if (!this.inputElement) return;\n\n    if (this.required && !this.value) {\n      this.setValidity({ valueMissing: true }, this.errorText || 'This field is required');\n      this.error = true;\n    } else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {\n      this.setValidity({ patternMismatch: true }, this.errorText || 'Invalid format');\n      this.error = true;\n    } else {\n      this.setValidity({});\n      if (!this.errorText) {\n        this.error = false;\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    const hasLeading = Boolean(this.leadingIcon || (this.assignedLeadingIcons && this.assignedLeadingIcons.length > 0));\n    this.toggleAttribute('has-leading-icon', hasLeading);\n  }\n\n  override render() {\n    const displayText = this.error ? (this.errorText || this.supportingText) : this.supportingText;\n\n    return html`\n      <div class=\"container\" @click=${() => this.inputElement?.focus()}>\n        ${this.variant === 'filled' ? html`<md-ripple ?disabled=${this.disabled}></md-ripple>` : nothing}\n\n        <span class=\"icon-slot leading-icon\">\n          <slot name=\"leading-icon\" @slotchange=${this.handleSlotChange}>\n            ${this.leadingIcon ? html`<md-icon name=${this.leadingIcon}></md-icon>` : nothing}\n          </slot>\n        </span>\n\n        <div class=\"input-wrapper\">\n          ${this.label ? html`<label class=\"label\">${this.label}</label>` : nothing}\n          ${this.prefixText ? html`<span class=\"affix prefix\">${this.prefixText}</span>` : nothing}\n          <input\n            type=${this.type}\n            .value=${this.value}\n            placeholder=${this.focused || !this.label ? this.placeholder : ''}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            maxlength=${this.maxLength > 0 ? this.maxLength : nothing}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n          />\n          ${this.suffixText ? html`<span class=\"affix suffix\">${this.suffixText}</span>` : nothing}\n        </div>\n\n        <span class=\"icon-slot trailing-icon\">\n          <slot name=\"trailing-icon\">\n            ${this.error ? html`<md-icon name=\"error\" filled></md-icon>` : (this.trailingIcon ? html`<md-icon name=${this.trailingIcon}></md-icon>` : nothing)}\n          </slot>\n        </span>\n      </div>\n\n      ${displayText || (this.maxLength > 0)\n        ? html`\n            <div class=\"supporting-text\">\n              <span>${displayText}</span>\n              ${this.maxLength > 0 ? html`<span>${this.value.length} / ${this.maxLength}</span>` : nothing}\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-field': MdTextField;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/top-app-bar-Dgbp6CFv.js

@@ -0,0 +1,228 @@
+import { n as d, t as i } from "./decorate-DXuynaiA.js";
+import { css as x, html as e, nothing as p } from "lit";
+import { customElement as h, property as o } from "lit/decorators.js";
+var v = x`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+    background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface, #FEF7FF));
+    color: var(--md-top-app-bar-on-container-color, var(--md-sys-color-on-surface, #1D1B20));
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),
+                box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([fixed]) {
+    position: sticky;
+    top: 0;
+    z-index: 8;
+  }
+
+  :host([elevated]) {
+    background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface-container, #F3EDF7));
+    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));
+  }
+
+  .top-app-bar {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    height: 64px;
+    padding: 0 4px;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  .leading {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 48px;
+    min-height: 48px;
+    flex-shrink: 0;
+  }
+
+  .trailing {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 48px;
+    flex-shrink: 0;
+    gap: 4px;
+    margin-left: auto;
+  }
+
+  .title-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    flex: 1;
+    min-width: 0;
+    padding: 0 12px;
+  }
+
+  .headline {
+    margin: 0;
+    font-size: var(--md-sys-typescale-title-large-size, 22px);
+    line-height: 28px;
+    font-weight: 400;
+    color: var(--md-top-app-bar-headline-color, var(--md-sys-color-on-surface, #1D1B20));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .subtitle {
+    margin: 0;
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    line-height: 20px;
+    font-weight: 400;
+    color: var(--md-top-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant, #49454F));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Center-aligned variant (Default) */
+  :host([variant="center-aligned"]) .title-container,
+  :host(:not([variant])) .title-container {
+    text-align: center;
+    align-items: center;
+  }
+
+  /* Small variant */
+  :host([variant="small"]) .title-container {
+    text-align: start;
+    align-items: flex-start;
+  }
+
+  /* Medium variant */
+  :host([variant="medium"]) .headline-row {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-height: 48px;
+    padding: 0 16px 16px 16px;
+    box-sizing: border-box;
+  }
+
+  :host([variant="medium"]) .headline-row .headline {
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 400;
+  }
+
+  /* Large variant */
+  :host([variant="large"]) .headline-row {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-height: 88px;
+    padding: 0 16px 20px 16px;
+    box-sizing: border-box;
+  }
+
+  :host([variant="large"]) .headline-row .headline {
+    font-size: 28px;
+    line-height: 36px;
+    font-weight: 400;
+  }
+`, t = class extends d {
+  constructor(...a) {
+    super(...a), this.variant = "center-aligned", this.headline = "", this.subtitle = "", this.elevated = !1, this.fixed = !1;
+  }
+  static {
+    this.styles = [d.styles, v];
+  }
+  render() {
+    const a = this.variant === "medium" || this.variant === "large", n = e`
+      <div class="leading">
+        <slot name="navigation">
+          <slot name="leading-icon">
+            <slot name="leading"></slot>
+          </slot>
+        </slot>
+      </div>
+    `, l = e`
+      <div class="trailing">
+        <slot name="actions">
+          <slot name="trailing-icon">
+            <slot name="trailing"></slot>
+          </slot>
+        </slot>
+      </div>
+    `, s = e`
+      <slot name="headline">
+        <slot name="title">
+          ${this.headline ? e`<span class="headline">${this.headline}</span>` : p}
+        </slot>
+      </slot>
+    `, r = e`
+      <slot name="subtitle">
+        <slot name="supporting-text">
+          ${this.subtitle ? e`<span class="subtitle">${this.subtitle}</span>` : p}
+        </slot>
+      </slot>
+    `;
+    return a ? e`
+        <header class="top-app-bar" role="banner">
+          <div class="row">
+            ${n}
+            <slot></slot>
+            ${l}
+          </div>
+          <div class="headline-row">
+            <div class="title-container">
+              ${s}
+              ${r}
+            </div>
+          </div>
+        </header>
+      ` : e`
+      <header class="top-app-bar" role="banner">
+        <div class="row">
+          ${n}
+          <div class="title-container">
+            ${s}
+            ${r}
+          </div>
+          <slot></slot>
+          ${l}
+        </div>
+      </header>
+    `;
+  }
+};
+i([o({
+  type: String,
+  reflect: !0
+})], t.prototype, "variant", void 0);
+i([o({ type: String })], t.prototype, "headline", void 0);
+i([o({ type: String })], t.prototype, "subtitle", void 0);
+i([o({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "elevated", void 0);
+i([o({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "fixed", void 0);
+t = i([h("md-top-app-bar")], t);
+var c = class extends t {
+};
+c = i([h("md-top-bar")], c);
+export {
+  c as n,
+  t
+};
+
+//# sourceMappingURL=top-app-bar-Dgbp6CFv.js.map

package/dist/chunks/top-app-bar-Dgbp6CFv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-app-bar-Dgbp6CFv.js","names":[],"sources":["../../src/components/top-app-bar/top-app-bar.css.ts","../../src/components/top-app-bar/top-app-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const topAppBarStyles = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n    background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface, #FEF7FF));\n    color: var(--md-top-app-bar-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([fixed]) {\n    position: sticky;\n    top: 0;\n    z-index: 8;\n  }\n\n  :host([elevated]) {\n    background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface-container, #F3EDF7));\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  .top-app-bar {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    height: 64px;\n    padding: 0 4px;\n    box-sizing: border-box;\n    position: relative;\n  }\n\n  .leading {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 48px;\n    min-height: 48px;\n    flex-shrink: 0;\n  }\n\n  .trailing {\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-end;\n    min-height: 48px;\n    flex-shrink: 0;\n    gap: 4px;\n    margin-left: auto;\n  }\n\n  .title-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    overflow: hidden;\n    flex: 1;\n    min-width: 0;\n    padding: 0 12px;\n  }\n\n  .headline {\n    margin: 0;\n    font-size: var(--md-sys-typescale-title-large-size, 22px);\n    line-height: 28px;\n    font-weight: 400;\n    color: var(--md-top-app-bar-headline-color, var(--md-sys-color-on-surface, #1D1B20));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .subtitle {\n    margin: 0;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    font-weight: 400;\n    color: var(--md-top-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant, #49454F));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Center-aligned variant (Default) */\n  :host([variant=\"center-aligned\"]) .title-container,\n  :host(:not([variant])) .title-container {\n    text-align: center;\n    align-items: center;\n  }\n\n  /* Small variant */\n  :host([variant=\"small\"]) .title-container {\n    text-align: start;\n    align-items: flex-start;\n  }\n\n  /* Medium variant */\n  :host([variant=\"medium\"]) .headline-row {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    min-height: 48px;\n    padding: 0 16px 16px 16px;\n    box-sizing: border-box;\n  }\n\n  :host([variant=\"medium\"]) .headline-row .headline {\n    font-size: 24px;\n    line-height: 32px;\n    font-weight: 400;\n  }\n\n  /* Large variant */\n  :host([variant=\"large\"]) .headline-row {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    min-height: 88px;\n    padding: 0 16px 20px 16px;\n    box-sizing: border-box;\n  }\n\n  :host([variant=\"large\"]) .headline-row .headline {\n    font-size: 28px;\n    line-height: 36px;\n    font-weight: 400;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { topAppBarStyles } from './top-app-bar.css.js';\n\nexport type TopAppBarVariant = 'center-aligned' | 'small' | 'medium' | 'large';\n\n/**\n * Material Design 3 Top App Bar component.\n *\n * @slot navigation - Leading navigation icon button (e.g. menu, back arrow). Also aliased as `leading-icon` or `leading`.\n * @slot headline - Primary title text. Also aliased as `title`.\n * @slot subtitle - Secondary subtitle text. Also aliased as `supporting-text`.\n * @slot actions - Trailing action icon buttons or menus. Also aliased as `trailing-icon` or `trailing`.\n * @slot - Default slot for additional bar contents.\n */\n@customElement('md-top-app-bar')\nexport class MdTopAppBar extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, topAppBarStyles];\n\n  @property({ type: String, reflect: true })\n  variant: TopAppBarVariant = 'center-aligned';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: Boolean, reflect: true })\n  elevated = false;\n\n  @property({ type: Boolean, reflect: true })\n  fixed = false;\n\n  override render() {\n    const isMultiRow = this.variant === 'medium' || this.variant === 'large';\n\n    const navigationSlot = html`\n      <div class=\"leading\">\n        <slot name=\"navigation\">\n          <slot name=\"leading-icon\">\n            <slot name=\"leading\"></slot>\n          </slot>\n        </slot>\n      </div>\n    `;\n\n    const actionsSlot = html`\n      <div class=\"trailing\">\n        <slot name=\"actions\">\n          <slot name=\"trailing-icon\">\n            <slot name=\"trailing\"></slot>\n          </slot>\n        </slot>\n      </div>\n    `;\n\n    const headlineSlot = html`\n      <slot name=\"headline\">\n        <slot name=\"title\">\n          ${this.headline ? html`<span class=\"headline\">${this.headline}</span>` : nothing}\n        </slot>\n      </slot>\n    `;\n\n    const subtitleSlot = html`\n      <slot name=\"subtitle\">\n        <slot name=\"supporting-text\">\n          ${this.subtitle ? html`<span class=\"subtitle\">${this.subtitle}</span>` : nothing}\n        </slot>\n      </slot>\n    `;\n\n    if (isMultiRow) {\n      return html`\n        <header class=\"top-app-bar\" role=\"banner\">\n          <div class=\"row\">\n            ${navigationSlot}\n            <slot></slot>\n            ${actionsSlot}\n          </div>\n          <div class=\"headline-row\">\n            <div class=\"title-container\">\n              ${headlineSlot}\n              ${subtitleSlot}\n            </div>\n          </div>\n        </header>\n      `;\n    }\n\n    return html`\n      <header class=\"top-app-bar\" role=\"banner\">\n        <div class=\"row\">\n          ${navigationSlot}\n          <div class=\"title-container\">\n            ${headlineSlot}\n            ${subtitleSlot}\n          </div>\n          <slot></slot>\n          ${actionsSlot}\n        </div>\n      </header>\n    `;\n  }\n}\n\n// Register md-top-bar as an alias\n@customElement('md-top-bar')\nexport class MdTopBar extends MdTopAppBar {}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-top-app-bar': MdTopAppBar;\n    'md-top-bar': MdTopAppBar;\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,GCelB,IAAN,cAA0B,EAAc;AAAA;iBAIjB,KAAA,UAAA,kBAGjB,KAAA,WAAA,IAGA,KAAA,WAAA,IAGA,KAAA,WAAA,IAGH,KAAA,QAAA;AAAA;;AAfiB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAe;AAAA;EAiB/D,SAAkB;AAChB,UAAM,IAAa,KAAK,YAAY,YAAY,KAAK,YAAY,SAE3D,IAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUjB,IAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUd,IAAe;AAAA;AAAA;AAAA,YAGb,KAAK,WAAW,2BAA8B,KAAK,QAAA,YAAoB,CAAA;AAAA;AAAA;AAAA,OAKzE,IAAe;AAAA;AAAA;AAAA,YAGb,KAAK,WAAW,2BAA8B,KAAK,QAAA,YAAoB,CAAA;AAAA;AAAA;AAAA;AAK/E,WAAI,IACK;AAAA;AAAA;AAAA,cAGC,CAAA;AAAA;AAAA,cAEA,CAAA;AAAA;AAAA;AAAA;AAAA,gBAIE,CAAA;AAAA,gBACA,CAAA;AAAA;AAAA;AAAA;AAAA,UAOL;AAAA;AAAA;AAAA,YAGC,CAAA;AAAA;AAAA,cAEE,CAAA;AAAA,cACA,CAAA;AAAA;AAAA;AAAA,YAGF,CAAA;AAAA;AAAA;AAAA;AAAA,EAIV;AACF;AAtFG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAhB3C,IAAA,EAAA,CAAA,EAAc,gBAAgB,CAAA,GAAA,CAAA;AA8FxB,IAAM,IAAN,cAAuB,EAAY;AAAC;AAD1C,IAAA,EAAA,CAAA,EAAc,YAAY,CAAA,GAAA,CAAA"}

package/dist/components/account-menu/account-menu.css.d.ts

@@ -0,0 +1,3 @@
+export declare const accountMenuStyles: import('lit').CSSResult;
+export declare const accountItemStyles: import('lit').CSSResult;
+//# sourceMappingURL=account-menu.css.d.ts.map

package/dist/components/account-menu/account-menu.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-menu.css.d.ts","sourceRoot":"","sources":["../../../src/components/account-menu/account-menu.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA8oB7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,yBA4G7B,CAAC"}

package/dist/components/account-menu/account-menu.d.ts

@@ -0,0 +1,111 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export type AccountMenuAlignment = 'start' | 'end';
+export type AccountMenuPivot = 'left' | 'right';
+export type AccountMenuTab = 'overview' | 'security' | 'storage' | 'accounts';
+/**
+ * Material Design 3 Account Item component.
+ * Represents a single account profile in the account switcher or an account action item.
+ *
+ * @slot icon - Custom icon or graphic.
+ * @slot - Default slot for account name/details.
+ * @slot trailing - Custom trailing content or checkmark.
+ */
+export declare class MdAccountItem extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    name: string;
+    email: string;
+    avatar: string;
+    initials: string;
+    icon: string;
+    badge: string;
+    href: string;
+    target: string;
+    active: boolean;
+    disabled: boolean;
+    action: boolean;
+    private handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+}
+/**
+ * Material Design 3 Account Menu (Account Profile Switcher) component.
+ * Displays a profile menu with rich user info, storage usage, security overview, and multi-account switcher.
+ *
+ * @slot trigger - Custom trigger element replacing the default avatar button.
+ * @slot header - Custom header element.
+ * @slot overview - Custom overview info content.
+ * @slot security - Custom security info content.
+ * @slot storage - Custom storage info content.
+ * @slot accounts - Container for md-account-item instances.
+ * @slot footer - Custom footer content.
+ */
+export declare class MdAccountMenu extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    open: boolean;
+    name: string;
+    email: string;
+    avatar: string;
+    initials: string;
+    icon: string;
+    headline: string;
+    manageText: string;
+    manageUrl: string;
+    organization: string;
+    roleTitle: string;
+    status: string;
+    storageUsed: string;
+    storageTotal: string;
+    storageProgress: number;
+    securityStatus: string;
+    ariaLabelText: string;
+    noTrigger: boolean;
+    get trigger(): boolean;
+    set trigger(value: boolean);
+    alignment: AccountMenuAlignment;
+    pivot: AccountMenuPivot;
+    modal: boolean;
+    fullscreen: boolean;
+    showTabs: boolean;
+    activeTab: AccountMenuTab;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private handleKeyDown;
+    private handleDocumentClick;
+    private handleBackdropClick;
+    private handleBackClick;
+    private handleTriggerClick;
+    private handleTabClick;
+    private handleManageClick;
+    private handleSignOutClick;
+    private handleEditAvatarClick;
+    private handleAccountItemClick;
+    /**
+     * Opens the account menu popover.
+     */
+    show(): void;
+    /**
+     * Closes the account menu popover.
+     */
+    close(): void;
+    /**
+     * Toggles the account menu open/closed state.
+     */
+    toggle(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export declare class MdAccountDrawer extends MdAccountMenu {
+}
+export declare class MdAccountProfile extends MdAccountMenu {
+}
+export declare class MdAccountProfileItem extends MdAccountItem {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-account-menu': MdAccountMenu;
+        'md-account-drawer': MdAccountDrawer;
+        'md-account-profile': MdAccountProfile;
+        'md-account-item': MdAccountItem;
+        'md-account-profile-item': MdAccountProfileItem;
+    }
+}
+//# sourceMappingURL=account-menu.d.ts.map

package/dist/components/account-menu/account-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-menu.d.ts","sourceRoot":"","sources":["../../../src/components/account-menu/account-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,CAAC;AACzB,OAAO,+BAA+B,CAAC;AAGvC,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,KAAK,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC;AAChD,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAE9E;;;;;;;GAOG;AACH,qBACa,aAAc,SAAQ,aAAa;IAC9C,OAAgB,MAAM,iCAA6C;IAGnE,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,MAAM,SAAM;IAGZ,QAAQ,SAAM;IAGd,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,MAAM,SAAM;IAGZ,MAAM,UAAS;IAGf,QAAQ,UAAS;IAGjB,MAAM,UAAS;IAEf,OAAO,CAAC,WAAW,CAejB;IAEO,MAAM;CA+DhB;AAED;;;;;;;;;;;GAWG;AACH,qBACa,aAAc,SAAQ,aAAa;IAC9C,OAAgB,MAAM,iCAA6C;IAGnE,IAAI,UAAS;IAGb,IAAI,SAAsB;IAG1B,KAAK,SAAkC;IAGvC,MAAM,SAAM;IAGZ,QAAQ,SAAM;IAGd,IAAI,SAAoB;IAGxB,QAAQ,SAAa;IAGrB,UAAU,SAAyB;IAGnC,SAAS,SAAM;IAGf,YAAY,SAAyB;IAGrC,SAAS,SAAoB;IAG7B,MAAM,SAAY;IAGlB,WAAW,SAAa;IAGxB,YAAY,SAAW;IAGvB,eAAe,SAAQ;IAGvB,cAAc,SAAe;IAG7B,aAAa,SAAkB;IAG/B,SAAS,UAAS;IAElB,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAGzB;IAGD,SAAS,EAAE,oBAAoB,CAAS;IAGxC,KAAK,EAAE,gBAAgB,CAAW;IAGlC,KAAK,UAAS;IAGd,UAAU,UAAS;IAGnB,QAAQ,UAAQ;IAGhB,SAAS,EAAE,cAAc,CAAc;IAE9B,iBAAiB;IAOjB,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWxD,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,mBAAmB,CAMzB;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,qBAAqB,CAK3B;IAEF,OAAO,CAAC,sBAAsB,CAS5B;IAEF;;OAEG;IACH,IAAI;IAMJ;;OAEG;IACH,KAAK;IAML;;OAEG;IACH,MAAM;IAIG,MAAM;CA6ShB;AAGD,qBACa,eAAgB,SAAQ,aAAa;CAAG;AAErD,qBACa,gBAAiB,SAAQ,aAAa;CAAG;AAEtD,qBACa,oBAAqB,SAAQ,aAAa;CAAG;AAE1D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;QACjC,mBAAmB,EAAE,eAAe,CAAC;QACrC,oBAAoB,EAAE,gBAAgB,CAAC;QACvC,iBAAiB,EAAE,aAAa,CAAC;QACjC,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}

package/dist/components/app-drawer/app-drawer.css.d.ts

@@ -0,0 +1,3 @@
+export declare const appDrawerStyles: import('lit').CSSResult;
+export declare const appDrawerItemStyles: import('lit').CSSResult;
+//# sourceMappingURL=app-drawer.css.d.ts.map

package/dist/components/app-drawer/app-drawer.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-drawer.css.d.ts","sourceRoot":"","sources":["../../../src/components/app-drawer/app-drawer.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBA6S3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yBA+G/B,CAAC"}

package/dist/components/app-drawer/app-drawer.d.ts

@@ -0,0 +1,173 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export type AppDrawerAlignment = 'start' | 'end';
+export type AppDrawerPivot = 'left' | 'right';
+/**
+ * Material Design 3 App Drawer Item component.
+ * Represents a single application, shortcut, or destination in the app drawer grid.
+ *
+ * @slot icon - Custom icon or graphic.
+ * @slot - Default slot for app label.
+ * @slot badge - Custom badge indicator.
+ */
+export declare class MdAppDrawerItem extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    icon: string;
+    src: string;
+    label: string;
+    headline: string;
+    badge: string;
+    href: string;
+    target: string;
+    disabled: boolean;
+    active: boolean;
+    selected: boolean;
+    dragging: boolean;
+    dragOver: boolean;
+    private wasDragging;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    internalSetDragging(isDragging: boolean): void;
+    private handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+}
+/**
+ * Material Design 3 App Drawer (Apps Launcher / Waffle Menu) component.
+ * Displays a popup grid of applications and services next to account or navigation controls.
+ *
+ * @slot trigger - Custom trigger button element.
+ * @slot header - Optional header content above the apps grid.
+ * @slot - Default slot for app drawer items (md-app-drawer-item).
+ * @slot footer - Optional footer content (e.g. "More apps" link/button).
+ */
+export declare class MdAppDrawer extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    open: boolean;
+    headline: string;
+    icon: string;
+    ariaLabelText: string;
+    noTrigger: boolean;
+    get trigger(): boolean;
+    set trigger(value: boolean);
+    alignment: AppDrawerAlignment;
+    pivot: AppDrawerPivot;
+    modal: boolean;
+    fullscreen: boolean;
+    columns: number;
+    reorderable: boolean;
+    editable: boolean;
+    editing: boolean;
+    storageKey: string;
+    disableStorage: boolean;
+    private isReordering;
+    private initialOrder;
+    private draggedItem;
+    private dropTargetItem;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private handleKeyDown;
+    private handleDocumentClick;
+    private handleBackdropClick;
+    private handleBackClick;
+    private handleTriggerClick;
+    /**
+     * Identifies an app item uniquely for storage and ordering.
+     */
+    getItemKey(item: Element): string;
+    /**
+     * Returns the storage key used in localStorage.
+     */
+    getEffectiveStorageKey(): string;
+    /**
+     * Returns all slotted app item elements.
+     */
+    getItems(): HTMLElement[];
+    /**
+     * Retrieves the saved order array from persistent storage.
+     */
+    loadOrder(): string[] | null;
+    /**
+     * Persists the item order to storage.
+     */
+    saveOrder(order?: string[]): string[];
+    /**
+     * Returns the current array of item keys in DOM order.
+     */
+    getOrder(): string[];
+    firstUpdated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Sets and applies the order of items in the app drawer.
+     */
+    setOrder(order: string[]): void;
+    /**
+     * Applies the saved order from localStorage if available.
+     */
+    applySavedOrder(): void;
+    /**
+     * Resets the persistent order and restores the initial layout.
+     */
+    resetOrder(): void;
+    /**
+     * Moves an item from one index position to another.
+     */
+    reorderItem(fromIndex: number, toIndex: number): void;
+    /**
+     * Returns whether reordering is currently active.
+     */
+    isReorderActive(): boolean;
+    /**
+     * Toggles the reordering editing mode.
+     */
+    toggleEdit(): void;
+    /**
+     * Enables the reordering editing mode.
+     */
+    startEditing(): void;
+    /**
+     * Disables the reordering editing mode.
+     */
+    stopEditing(): void;
+    private handleEditToggle;
+    private handleResetClick;
+    private updateDraggableItems;
+    private handleSlotChange;
+    private findDrawerItem;
+    private handleDragStart;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private handleDragEnd;
+    private cleanupDrag;
+    private handleItemKeyDown;
+    /**
+     * Opens the app drawer popup.
+     */
+    show(): void;
+    /**
+     * Closes the app drawer popup.
+     */
+    close(): void;
+    /**
+     * Toggles the app drawer open/closed state.
+     */
+    toggle(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export declare class MdAppLauncher extends MdAppDrawer {
+}
+export declare class MdAppsMenu extends MdAppDrawer {
+}
+export declare class MdAppItem extends MdAppDrawerItem {
+}
+export declare class MdAppLauncherItem extends MdAppDrawerItem {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-app-drawer': MdAppDrawer;
+        'md-app-launcher': MdAppLauncher;
+        'md-apps-menu': MdAppsMenu;
+        'md-app-drawer-item': MdAppDrawerItem;
+        'md-app-item': MdAppItem;
+        'md-app-launcher-item': MdAppLauncherItem;
+    }
+}
+//# sourceMappingURL=app-drawer.d.ts.map

package/dist/components/app-drawer/app-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/app-drawer/app-drawer.ts"],"names":[],"mappings":"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"}