@francofantomius/material-components 0.1.0

package/dist/components/radio/radio.js

@@ -0,0 +1,205 @@
+import { css as h, html as u } from "lit";
+import { property as l, customElement as p, queryAssignedElements as y } from "lit/decorators.js";
+import { M as m } from "../../chunks/base-component-DQTjlEVL.js";
+import { M as f } from "../../chunks/form-associated-fKbeX_2P.js";
+import "../../internal/ripple/ripple.js";
+import "../../chunks/focus-ring-Dl-XoEKK.js";
+const v = h`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    cursor: pointer;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    gap: 8px;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-body-large-size, 16px);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+    color: rgba(29, 27, 32, 0.38);
+    pointer-events: none;
+  }
+
+  .container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  .outer-circle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    box-sizing: border-box;
+    border: 2px solid var(--md-sys-color-on-surface-variant, #49454F);
+    border-radius: 50%;
+    background-color: transparent;
+    transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([checked]) .outer-circle {
+    border-color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  :host([disabled]) .outer-circle {
+    border-color: rgba(29, 27, 32, 0.38);
+  }
+
+  .inner-circle {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    transform: scale(0);
+    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([checked]) .inner-circle {
+    transform: scale(1);
+  }
+
+  :host([disabled][checked]) .inner-circle {
+    background-color: rgba(29, 27, 32, 0.38);
+  }
+`, b = h`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  :host([row]) {
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+  }
+`;
+var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (e, t, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? k(t, i) : t, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (s = (r ? c(t, i, s) : c(s)) || s);
+  return r && s && g(t, i, s), s;
+};
+let a = class extends f {
+  constructor() {
+    super(...arguments), this.checked = !1, this.value = "on", this.handleClick = (e) => {
+      this.disabled || this.checked || (e.preventDefault(), this.select());
+    }, this.handleKeyDown = (e) => {
+      this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.select());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.tabIndex = this.disabled ? -1 : this.checked ? 0 : -1, this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this.updateFormValue();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(e) {
+    super.updated(e), (e.has("checked") || e.has("value")) && (this.tabIndex = this.disabled ? -1 : this.checked ? 0 : -1, this.updateFormValue());
+  }
+  formResetCallback() {
+    this.checked = !1, this.updateFormValue();
+  }
+  updateFormValue() {
+    this.setFormValue(this.checked ? this.value : null), this.required && !this.checked ? this.setValidity({ valueMissing: !0 }, "Please select one of these options") : this.setValidity({});
+  }
+  select() {
+    this.checked = !0, this.updateFormValue(), this.emitEvent("change", { checked: !0, value: this.value }), this.emitEvent("input", { checked: !0, value: this.value }), this.name && this.getRootNode().querySelectorAll(`md-radio[name="${this.name}"]`).forEach((i) => {
+      i !== this && i.checked && (i.checked = !1, i.tabIndex = -1);
+    });
+  }
+  render() {
+    return u`
+      <div class="container">
+        <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>
+        <md-focus-ring></md-focus-ring>
+        <div class="outer-circle">
+          <div class="inner-circle"></div>
+        </div>
+      </div>
+      <slot></slot>
+    `;
+  }
+};
+a.styles = [f.styles, v];
+o([
+  l({ type: Boolean, reflect: !0 })
+], a.prototype, "checked", 2);
+o([
+  l({ type: String })
+], a.prototype, "value", 2);
+a = o([
+  p("md-radio")
+], a);
+let n = class extends m {
+  constructor() {
+    super(...arguments), this.name = "", this.value = "", this.row = !1, this.handleSlotChange = () => {
+      this.syncRadios();
+    }, this.handleChange = (e) => {
+      const t = e.target;
+      t && t.checked && (this.value = t.value, this.emitEvent("group-change", { value: this.value }));
+    }, this.handleKeyDown = (e) => {
+      const t = this.radios.filter((s) => !s.disabled);
+      if (t.length === 0) return;
+      const i = t.findIndex((s) => s === document.activeElement || s.shadowRoot?.activeElement);
+      let r = -1;
+      if (e.key === "ArrowDown" || e.key === "ArrowRight" ? (e.preventDefault(), r = i < t.length - 1 ? i + 1 : 0) : (e.key === "ArrowUp" || e.key === "ArrowLeft") && (e.preventDefault(), r = i > 0 ? i - 1 : t.length - 1), r !== -1) {
+        const s = t[r];
+        s && (s.select(), s.focus());
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("change", this.handleChange), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("change", this.handleChange), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(e) {
+    super.updated(e), (e.has("name") || e.has("value")) && this.syncRadios();
+  }
+  syncRadios() {
+    let e = !1;
+    if (this.radios.forEach((t) => {
+      this.name && !t.name && (t.name = this.name), this.value && t.value === this.value && (t.checked = !0, e = !0);
+    }), !e && this.radios.length > 0) {
+      const t = this.radios.find((i) => !i.disabled);
+      t && (t.tabIndex = 0);
+    }
+  }
+  render() {
+    return u`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+};
+n.styles = [m.styles, b];
+o([
+  l({ type: String })
+], n.prototype, "name", 2);
+o([
+  l({ type: String })
+], n.prototype, "value", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], n.prototype, "row", 2);
+o([
+  y({ selector: "md-radio" })
+], n.prototype, "radios", 2);
+n = o([
+  p("md-radio-group")
+], n);
+export {
+  a as MdRadio,
+  n as MdRadioGroup
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.css.ts","../../../src/components/radio/radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const radioStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    gap: 8px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n    color: rgba(29, 27, 32, 0.38);\n    pointer-events: none;\n  }\n\n  .container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n  }\n\n  .outer-circle {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    box-sizing: border-box;\n    border: 2px solid var(--md-sys-color-on-surface-variant, #49454F);\n    border-radius: 50%;\n    background-color: transparent;\n    transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([checked]) .outer-circle {\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([disabled]) .outer-circle {\n    border-color: rgba(29, 27, 32, 0.38);\n  }\n\n  .inner-circle {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    transform: scale(0);\n    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([checked]) .inner-circle {\n    transform: scale(1);\n  }\n\n  :host([disabled][checked]) .inner-circle {\n    background-color: rgba(29, 27, 32, 0.38);\n  }\n`;\n\nexport const radioGroupStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  :host([row]) {\n    flex-direction: row;\n    align-items: center;\n    gap: 16px;\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property, 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 '../../internal/focus-ring/focus-ring.js';\nimport { radioStyles, radioGroupStyles } from './radio.css.js';\n\n@customElement('md-radio')\nexport class MdRadio extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, radioStyles];\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: String })\n  value = 'on';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.tabIndex = this.disabled ? -1 : (this.checked ? 0 : -1);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.updateFormValue();\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('checked') || changedProperties.has('value')) {\n      this.tabIndex = this.disabled ? -1 : (this.checked ? 0 : -1);\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.checked = false;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    this.setFormValue(this.checked ? this.value : null);\n    if (this.required && !this.checked) {\n      this.setValidity({ valueMissing: true }, 'Please select one of these options');\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.checked) return;\n    event.preventDefault();\n    this.select();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.select();\n    }\n  };\n\n  select() {\n    this.checked = true;\n    this.updateFormValue();\n    this.emitEvent('change', { checked: true, value: this.value });\n    this.emitEvent('input', { checked: true, value: this.value });\n\n    // Uncheck siblings with same name\n    if (this.name) {\n      const root = this.getRootNode() as Document | ShadowRoot;\n      const radios = root.querySelectorAll(`md-radio[name=\"${this.name}\"]`) as NodeListOf<MdRadio>;\n      radios.forEach((radio) => {\n        if (radio !== this && radio.checked) {\n          radio.checked = false;\n          radio.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\">\n        <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>\n        <md-focus-ring></md-focus-ring>\n        <div class=\"outer-circle\">\n          <div class=\"inner-circle\"></div>\n        </div>\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n\n@customElement('md-radio-group')\nexport class MdRadioGroup extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, radioGroupStyles];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: Boolean, reflect: true })\n  row = false;\n\n  @queryAssignedElements({ selector: 'md-radio' })\n  private radios!: MdRadio[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('change', this.handleChange);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('change', this.handleChange);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('name') || changedProperties.has('value')) {\n      this.syncRadios();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncRadios();\n  };\n\n  private syncRadios() {\n    let hasChecked = false;\n    this.radios.forEach((radio) => {\n      if (this.name && !radio.name) {\n        radio.name = this.name;\n      }\n      if (this.value && radio.value === this.value) {\n        radio.checked = true;\n        hasChecked = true;\n      }\n    });\n\n    if (!hasChecked && this.radios.length > 0) {\n      const firstEnabled = this.radios.find((r) => !r.disabled);\n      if (firstEnabled) firstEnabled.tabIndex = 0;\n    }\n  }\n\n  private handleChange = (event: Event) => {\n    const radio = event.target as MdRadio;\n    if (radio && radio.checked) {\n      this.value = radio.value;\n      this.emitEvent('group-change', { value: this.value });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const enabledRadios = this.radios.filter((r) => !r.disabled);\n    if (enabledRadios.length === 0) return;\n\n    const currentIndex = enabledRadios.findIndex((r) => r === document.activeElement || r.shadowRoot?.activeElement);\n\n    let nextIndex = -1;\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      nextIndex = currentIndex < enabledRadios.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledRadios.length - 1;\n    }\n\n    if (nextIndex !== -1) {\n      const target = enabledRadios[nextIndex];\n      if (target) {\n        target.select();\n        target.focus();\n      }\n    }\n  };\n\n  override render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-radio': MdRadio;\n    'md-radio-group': MdRadioGroup;\n  }\n}\n"],"names":["radioStyles","css","radioGroupStyles","MdRadio","MdFormAssociatedElement","event","changedProperties","radio","html","__decorateClass","property","customElement","MdRadioGroup","MdBaseElement","enabledRadios","r","currentIndex","nextIndex","target","hasChecked","firstEnabled","queryAssignedElements"],"mappings":"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"}

package/dist/components/snackbar/snackbar.css.d.ts

@@ -0,0 +1,2 @@
+export declare const snackbarStyles: import('lit').CSSResult;
+//# sourceMappingURL=snackbar.css.d.ts.map

package/dist/components/snackbar/snackbar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.css.d.ts","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAkF1B,CAAC"}

package/dist/components/snackbar/snackbar.d.ts

@@ -0,0 +1,24 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export declare class MdSnackbar extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    open: boolean;
+    message: string;
+    actionText: string;
+    closeable: boolean;
+    timeoutMs: number;
+    private timerId;
+    updated(changedProperties: Map<string, unknown>): void;
+    show(): void;
+    close(): void;
+    private startTimer;
+    private clearTimer;
+    private handleAction;
+    private handleClose;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-snackbar': MdSnackbar;
+    }
+}
+//# sourceMappingURL=snackbar.d.ts.map

package/dist/components/snackbar/snackbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iBAAiB,CAAC;AAGzB,qBACa,UAAW,SAAQ,aAAa;IAC3C,OAAgB,MAAM,iCAA0C;IAGhE,IAAI,UAAS;IAGb,OAAO,SAAM;IAGb,UAAU,SAAM;IAGhB,SAAS,UAAS;IAGlB,SAAS,SAAQ;IAEjB,OAAO,CAAC,OAAO,CAAuB;IAE7B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWxD,IAAI;IAIJ,KAAK;IAKL,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEO,MAAM;CA2BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/snackbar/snackbar.js

@@ -0,0 +1,164 @@
+import { css as h, nothing as m, html as p } from "lit";
+import { property as o, customElement as u } from "lit/decorators.js";
+import { M as d } from "../../chunks/base-component-DQTjlEVL.js";
+import "../icon/icon.js";
+const b = h`
+  :host {
+    display: block;
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 2000;
+    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),
+                opacity 250ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([open]) {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .snackbar {
+    display: flex;
+    align-items: center;
+    min-width: 288px;
+    max-width: 568px;
+    min-height: 48px;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+    background-color: var(--md-sys-color-inverse-surface, #313033);
+    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);
+    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0,0,0,0.30));
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    line-height: 20px;
+    gap: 12px;
+  }
+
+  .message {
+    flex: 1;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .action-btn {
+    background: transparent;
+    border: none;
+    color: var(--md-sys-color-inverse-primary, #D0BCFF);
+    font-family: inherit;
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: 500;
+    cursor: pointer;
+    padding: 0 8px;
+    height: 36px;
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+    outline: none;
+  }
+
+  .action-btn:hover {
+    background-color: rgba(208, 188, 255, 0.08);
+  }
+
+  .close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 50%;
+    outline: none;
+  }
+
+  .close-btn:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+`;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (i, r, n, a) => {
+  for (var t = a > 1 ? void 0 : a ? y(r, n) : r, l = i.length - 1, c; l >= 0; l--)
+    (c = i[l]) && (t = (a ? c(r, n, t) : c(t)) || t);
+  return a && t && x(r, n, t), t;
+};
+let e = class extends d {
+  constructor() {
+    super(...arguments), this.open = !1, this.message = "", this.actionText = "", this.closeable = !1, this.timeoutMs = 4e3, this.timerId = null, this.handleAction = () => {
+      this.emitEvent("action"), this.close();
+    }, this.handleClose = () => {
+      this.close();
+    };
+  }
+  updated(i) {
+    super.updated(i), i.has("open") && (this.open ? this.startTimer() : this.clearTimer());
+  }
+  show() {
+    this.open = !0;
+  }
+  close() {
+    this.open = !1, this.emitEvent("close");
+  }
+  startTimer() {
+    this.clearTimer(), this.timeoutMs > 0 && (this.timerId = window.setTimeout(() => {
+      this.close();
+    }, this.timeoutMs));
+  }
+  clearTimer() {
+    this.timerId !== null && (clearTimeout(this.timerId), this.timerId = null);
+  }
+  render() {
+    return p`
+      <div class="snackbar" role="status" aria-live="polite">
+        <div class="message">
+          <slot>${this.message}</slot>
+        </div>
+
+        <div class="actions">
+          ${this.actionText ? p`
+                <button class="action-btn" @click=${this.handleAction}>
+                  ${this.actionText}
+                </button>
+              ` : m}
+
+          ${this.closeable ? p`
+                <button class="close-btn" aria-label="Dismiss" @click=${this.handleClose}>
+                  <md-icon name="close" size="18"></md-icon>
+                </button>
+              ` : m}
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [d.styles, b];
+s([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
+s([
+  o({ type: String })
+], e.prototype, "message", 2);
+s([
+  o({ type: String, attribute: "action-text" })
+], e.prototype, "actionText", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "closeable", 2);
+s([
+  o({ type: Number, attribute: "timeout-ms" })
+], e.prototype, "timeoutMs", 2);
+e = s([
+  u("md-snackbar")
+], e);
+export {
+  e as MdSnackbar
+};
+//# sourceMappingURL=snackbar.js.map

package/dist/components/snackbar/snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.js","sources":["../../../src/components/snackbar/snackbar.css.ts","../../../src/components/snackbar/snackbar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const snackbarStyles = css`\n  :host {\n    display: block;\n    position: fixed;\n    bottom: 24px;\n    left: 50%;\n    transform: translateX(-50%) translateY(100px);\n    opacity: 0;\n    pointer-events: none;\n    z-index: 2000;\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([open]) {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .snackbar {\n    display: flex;\n    align-items: center;\n    min-width: 288px;\n    max-width: 568px;\n    min-height: 48px;\n    padding: 8px 16px;\n    box-sizing: border-box;\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    background-color: var(--md-sys-color-inverse-surface, #313033);\n    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0,0,0,0.30));\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    gap: 12px;\n  }\n\n  .message {\n    flex: 1;\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .action-btn {\n    background: transparent;\n    border: none;\n    color: var(--md-sys-color-inverse-primary, #D0BCFF);\n    font-family: inherit;\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    cursor: pointer;\n    padding: 0 8px;\n    height: 36px;\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    outline: none;\n  }\n\n  .action-btn:hover {\n    background-color: rgba(208, 188, 255, 0.08);\n  }\n\n  .close-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n    cursor: pointer;\n    padding: 4px;\n    border-radius: 50%;\n    outline: none;\n  }\n\n  .close-btn:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\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 { snackbarStyles } from './snackbar.css.js';\n\n@customElement('md-snackbar')\nexport class MdSnackbar extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, snackbarStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String })\n  message = '';\n\n  @property({ type: String, attribute: 'action-text' })\n  actionText = '';\n\n  @property({ type: Boolean, reflect: true })\n  closeable = false;\n\n  @property({ type: Number, attribute: 'timeout-ms' })\n  timeoutMs = 4000;\n\n  private timerId: number | null = null;\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.startTimer();\n      } else {\n        this.clearTimer();\n      }\n    }\n  }\n\n  show() {\n    this.open = true;\n  }\n\n  close() {\n    this.open = false;\n    this.emitEvent('close');\n  }\n\n  private startTimer() {\n    this.clearTimer();\n    if (this.timeoutMs > 0) {\n      this.timerId = window.setTimeout(() => {\n        this.close();\n      }, this.timeoutMs);\n    }\n  }\n\n  private clearTimer() {\n    if (this.timerId !== null) {\n      clearTimeout(this.timerId);\n      this.timerId = null;\n    }\n  }\n\n  private handleAction = () => {\n    this.emitEvent('action');\n    this.close();\n  };\n\n  private handleClose = () => {\n    this.close();\n  };\n\n  override render() {\n    return html`\n      <div class=\"snackbar\" role=\"status\" aria-live=\"polite\">\n        <div class=\"message\">\n          <slot>${this.message}</slot>\n        </div>\n\n        <div class=\"actions\">\n          ${this.actionText\n            ? html`\n                <button class=\"action-btn\" @click=${this.handleAction}>\n                  ${this.actionText}\n                </button>\n              `\n            : nothing}\n\n          ${this.closeable\n            ? html`\n                <button class=\"close-btn\" aria-label=\"Dismiss\" @click=${this.handleClose}>\n                  <md-icon name=\"close\" size=\"18\"></md-icon>\n                </button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-snackbar': MdSnackbar;\n  }\n}\n\n"],"names":["snackbarStyles","css","MdSnackbar","MdBaseElement","changedProperties","html","nothing","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAiBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACKvB,IAAMC,IAAN,cAAyBC,EAAc;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAO,IAGP,KAAA,UAAU,IAGV,KAAA,aAAa,IAGb,KAAA,YAAY,IAGZ,KAAA,YAAY,KAEZ,KAAQ,UAAyB,MAsCjC,KAAQ,eAAe,MAAM;AAC3B,WAAK,UAAU,QAAQ,GACvB,KAAK,MAAA;AAAA,IACP,GAEA,KAAQ,cAAc,MAAM;AAC1B,WAAK,MAAA;AAAA,IACP;AAAA,EAAA;AAAA,EA3CS,QAAQC,GAAyC;AACxD,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACP,KAAK,WAAA,IAEL,KAAK,WAAA;AAAA,EAGX;AAAA,EAEA,OAAO;AACL,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,QAAQ;AACN,SAAK,OAAO,IACZ,KAAK,UAAU,OAAO;AAAA,EACxB;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAA,GACD,KAAK,YAAY,MACnB,KAAK,UAAU,OAAO,WAAW,MAAM;AACrC,WAAK,MAAA;AAAA,IACP,GAAG,KAAK,SAAS;AAAA,EAErB;AAAA,EAEQ,aAAa;AACnB,IAAI,KAAK,YAAY,SACnB,aAAa,KAAK,OAAO,GACzB,KAAK,UAAU;AAAA,EAEnB;AAAA,EAWS,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,kBAGO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,KAAK,aACHA;AAAA,oDACsC,KAAK,YAAY;AAAA,oBACjD,KAAK,UAAU;AAAA;AAAA,kBAGrBC,CAAO;AAAA;AAAA,YAET,KAAK,YACHD;AAAA,wEAC0D,KAAK,WAAW;AAAA;AAAA;AAAA,kBAI1EC,CAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AACF;AA5FaJ,EACK,SAAS,CAACC,EAAc,QAAQH,CAAc;AAG9DO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAH/BN,EAIX,WAAA,QAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfN,EAOX,WAAA,WAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GATzCN,EAUX,WAAA,cAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BN,EAaX,WAAA,aAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAfxCN,EAgBX,WAAA,aAAA,CAAA;AAhBWA,IAANK,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfP,CAAA;"}

package/dist/components/switch/switch.css.d.ts

@@ -0,0 +1,2 @@
+export declare const switchStyles: import('lit').CSSResult;
+//# sourceMappingURL=switch.css.d.ts.map

package/dist/components/switch/switch.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAkGxB,CAAC"}

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,22 @@
+import { MdFormAssociatedElement } from '../../internal/form-associated.js';
+export declare class MdSwitch extends MdFormAssociatedElement {
+    static styles: import('lit').CSSResultGroup[];
+    selected: boolean;
+    icons: boolean;
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private updateFormValue;
+    private handleClick;
+    private handleKeyDown;
+    private toggle;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-switch': MdSwitch;
+    }
+}
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAGzB,qBACa,QAAS,SAAQ,uBAAuB;IACnD,OAAgB,MAAM,iCAAkD;IAGxE,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,KAAK,SAAQ;IAEJ,iBAAiB;IAQjB,oBAAoB;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,iBAAiB;IAK1B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,MAAM;IAOL,MAAM;CAmBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/switch/switch.js

@@ -0,0 +1,171 @@
+import { css as u, html as a } from "lit";
+import { property as d, customElement as p } from "lit/decorators.js";
+import { M as h } from "../../chunks/form-associated-fKbeX_2P.js";
+import "../../internal/ripple/ripple.js";
+import "../../chunks/focus-ring-Dl-XoEKK.js";
+import "../icon/icon.js";
+const m = u`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    cursor: pointer;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    gap: 12px;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-body-large-size, 16px);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+    color: rgba(29, 27, 32, 0.38);
+    pointer-events: none;
+  }
+
+  .switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 52px;
+    height: 32px;
+    box-sizing: border-box;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    border: 2px solid var(--md-sys-color-outline, #79747E);
+    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);
+    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),
+                border-color 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([selected]) .switch {
+    background-color: var(--md-sys-color-primary, #6750A4);
+    border-color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  :host([disabled]) .switch {
+    background-color: rgba(29, 27, 32, 0.12);
+    border-color: rgba(29, 27, 32, 0.12);
+  }
+
+  .thumb-container {
+    position: absolute;
+    left: 4px;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([selected]) .thumb-container {
+    transform: translateX(20px);
+  }
+
+  .thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-outline, #79747E);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: width 200ms cubic-bezier(0.2, 0, 0, 1),
+                height 200ms cubic-bezier(0.2, 0, 0, 1),
+                background-color 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([selected]) .thumb {
+    width: 24px;
+    height: 24px;
+    background-color: var(--md-sys-color-on-primary, #FFFFFF);
+  }
+
+  :host([disabled]) .thumb {
+    background-color: rgba(29, 27, 32, 0.38);
+  }
+
+  .icon {
+    font-size: 16px;
+    color: var(--md-sys-color-on-primary-container, #21005D);
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  :host([selected]) .icon.check {
+    opacity: 1;
+  }
+
+  :host([icons]:not([selected])) .icon.cross {
+    opacity: 1;
+    color: var(--md-sys-color-surface-container-highest, #E6E0E9);
+  }
+`;
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, i, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? y(i, l) : i, c = e.length - 1, n; c >= 0; c--)
+    (n = e[c]) && (t = (o ? n(i, l, t) : n(t)) || t);
+  return o && t && b(i, l, t), t;
+};
+let s = class extends h {
+  constructor() {
+    super(...arguments), this.selected = !1, this.icons = !1, this.value = "on", this.handleClick = (e) => {
+      this.disabled || (e.preventDefault(), this.toggle());
+    }, this.handleKeyDown = (e) => {
+      this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.tabIndex = this.disabled ? -1 : 0, this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this.updateFormValue();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(e) {
+    super.updated(e), (e.has("selected") || e.has("value")) && this.updateFormValue();
+  }
+  formResetCallback() {
+    this.selected = !1, this.updateFormValue();
+  }
+  updateFormValue() {
+    this.setFormValue(this.selected ? this.value : null), this.required && !this.selected ? this.setValidity({ valueMissing: !0 }, "Please toggle this switch") : this.setValidity({});
+  }
+  toggle() {
+    this.selected = !this.selected, this.updateFormValue(), this.emitEvent("change", { selected: this.selected }), this.emitEvent("input", { selected: this.selected });
+  }
+  render() {
+    return a`
+      <div class="switch">
+        <div class="thumb-container">
+          <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>
+          <md-focus-ring></md-focus-ring>
+          <div class="thumb">
+            ${this.icons ? a`
+                  <md-icon class="icon check" size="14">check</md-icon>
+                  <md-icon class="icon cross" size="14">close</md-icon>
+                ` : a`<slot name="icon"></slot>`}
+          </div>
+        </div>
+      </div>
+      <slot></slot>
+    `;
+  }
+};
+s.styles = [h.styles, m];
+r([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "selected", 2);
+r([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "icons", 2);
+r([
+  d({ type: String })
+], s.prototype, "value", 2);
+s = r([
+  p("md-switch")
+], s);
+export {
+  s as MdSwitch
+};
+//# sourceMappingURL=switch.js.map