@francofantomius/material-components 0.1.0

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,188 @@
+import { css as h, html as p } from "lit";
+import { property as n, query as m, customElement as u } from "lit/decorators.js";
+import { M as c } from "../../chunks/form-associated-fKbeX_2P.js";
+import "../../internal/ripple/ripple.js";
+import "../../chunks/focus-ring-Dl-XoEKK.js";
+const b = 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%;
+  }
+
+  .box {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+    border: 2px solid var(--md-sys-color-on-surface-variant, #49454F);
+    border-radius: var(--md-sys-shape-corner-extra-small, 2px);
+    background-color: transparent;
+    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                border-color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([checked]) .box,
+  :host([indeterminate]) .box {
+    background-color: var(--md-sys-color-primary, #6750A4);
+    border-color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  :host([error]) .box {
+    border-color: var(--md-sys-color-error, #B3261E);
+  }
+
+  :host([error][checked]) .box,
+  :host([error][indeterminate]) .box {
+    background-color: var(--md-sys-color-error, #B3261E);
+    border-color: var(--md-sys-color-error, #B3261E);
+  }
+
+  :host([disabled]) .box {
+    border-color: rgba(29, 27, 32, 0.38);
+  }
+
+  :host([disabled][checked]) .box,
+  :host([disabled][indeterminate]) .box {
+    background-color: rgba(29, 27, 32, 0.38);
+    border-color: transparent;
+  }
+
+  .mark {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    fill: none;
+    stroke: var(--md-sys-color-on-primary, #FFFFFF);
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  :host([checked]) .mark.check {
+    opacity: 1;
+  }
+
+  :host([indeterminate]) .mark.dash {
+    opacity: 1;
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+`;
+var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, o, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? k(o, a) : o, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (r = (s ? d(o, a, r) : d(r)) || r);
+  return s && r && y(o, a, r), r;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.error = !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("checked") || e.has("indeterminate") || e.has("value")) && this.updateFormValue();
+  }
+  formResetCallback() {
+    this.checked = !1, this.indeterminate = !1, this.updateFormValue();
+  }
+  updateFormValue() {
+    this.setFormValue(this.checked ? this.value : null), this.required && !this.checked ? this.setValidity({ valueMissing: !0 }, "Please check this box if you want to proceed") : this.setValidity({});
+  }
+  toggle() {
+    this.indeterminate ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.checked, this.updateFormValue(), this.emitEvent("change", { checked: this.checked, indeterminate: this.indeterminate }), this.emitEvent("input", { checked: this.checked, indeterminate: this.indeterminate });
+  }
+  render() {
+    return p`
+      <div class="container">
+        <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>
+        <md-focus-ring></md-focus-ring>
+        <div class="box">
+          <!-- Checkmark SVG -->
+          <svg class="mark check" viewBox="0 0 18 18">
+            <polyline points="3.5,9.5 7,13 14.5,5.5"></polyline>
+          </svg>
+          <!-- Indeterminate Dash SVG -->
+          <svg class="mark dash" viewBox="0 0 18 18">
+            <line x1="3.5" y1="9" x2="14.5" y2="9"></line>
+          </svg>
+        </div>
+        <input
+          type="checkbox"
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          tabindex="-1"
+          aria-hidden="true"
+        />
+      </div>
+      <slot></slot>
+    `;
+  }
+};
+t.styles = [c.styles, b];
+i([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "checked", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "indeterminate", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "error", 2);
+i([
+  n({ type: String })
+], t.prototype, "value", 2);
+i([
+  m("input")
+], t.prototype, "inputElement", 2);
+t = i([
+  u("md-checkbox")
+], t);
+export {
+  t as MdCheckbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.css.ts","../../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const checkboxStyles = 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  .box {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    box-sizing: border-box;\n    border: 2px solid var(--md-sys-color-on-surface-variant, #49454F);\n    border-radius: var(--md-sys-shape-corner-extra-small, 2px);\n    background-color: transparent;\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  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([error]) .box {\n    border-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  :host([error][checked]) .box,\n  :host([error][indeterminate]) .box {\n    background-color: var(--md-sys-color-error, #B3261E);\n    border-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  :host([disabled]) .box {\n    border-color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][checked]) .box,\n  :host([disabled][indeterminate]) .box {\n    background-color: rgba(29, 27, 32, 0.38);\n    border-color: transparent;\n  }\n\n  .mark {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    fill: none;\n    stroke: var(--md-sys-color-on-primary, #FFFFFF);\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    opacity: 0;\n    transition: opacity 150ms ease;\n  }\n\n  :host([checked]) .mark.check {\n    opacity: 1;\n  }\n\n  :host([indeterminate]) .mark.dash {\n    opacity: 1;\n  }\n\n  input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n    pointer-events: none;\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property, query } 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 { checkboxStyles } from './checkbox.css.js';\n\n@customElement('md-checkbox')\nexport class MdCheckbox extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, checkboxStyles];\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String })\n  value = 'on';\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.tabIndex = this.disabled ? -1 : 0;\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('indeterminate') || changedProperties.has('value')) {\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.checked = false;\n    this.indeterminate = 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 check this box if you want to proceed');\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.toggle();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private toggle() {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n      this.checked = true;\n    } else {\n      this.checked = !this.checked;\n    }\n    this.updateFormValue();\n    this.emitEvent('change', { checked: this.checked, indeterminate: this.indeterminate });\n    this.emitEvent('input', { checked: this.checked, indeterminate: this.indeterminate });\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=\"box\">\n          <!-- Checkmark SVG -->\n          <svg class=\"mark check\" viewBox=\"0 0 18 18\">\n            <polyline points=\"3.5,9.5 7,13 14.5,5.5\"></polyline>\n          </svg>\n          <!-- Indeterminate Dash SVG -->\n          <svg class=\"mark dash\" viewBox=\"0 0 18 18\">\n            <line x1=\"3.5\" y1=\"9\" x2=\"14.5\" y2=\"9\"></line>\n          </svg>\n        </div>\n        <input\n          type=\"checkbox\"\n          .checked=${this.checked}\n          .indeterminate=${this.indeterminate}\n          ?disabled=${this.disabled}\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n        />\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-checkbox': MdCheckbox;\n  }\n}\n"],"names":["checkboxStyles","css","MdCheckbox","MdFormAssociatedElement","event","changedProperties","html","__decorateClass","property","query","customElement"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export declare const chipStyles: import('lit').CSSResult;
+export declare const chipSetStyles: import('lit').CSSResult;
+//# sourceMappingURL=chip.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.css.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBA2EtB,CAAC;AAEF,eAAO,MAAM,aAAa,yBAOzB,CAAC"}

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,27 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export type ChipVariant = 'assist' | 'filter' | 'input' | 'suggestion';
+export declare class MdChip extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    variant: ChipVariant;
+    label: string;
+    icon: string;
+    selected: boolean;
+    removable: boolean;
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClick;
+    private handleRemove;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export declare class MdChipSet extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-chip': MdChip;
+        'md-chip-set': MdChipSet;
+    }
+}
+//# sourceMappingURL=chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAGzB,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAEvE,qBACa,MAAO,SAAQ,aAAa;IACvC,OAAgB,MAAM,iCAAsC;IAG5D,OAAO,EAAE,WAAW,CAAY;IAGhC,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAER,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,WAAW,CAOjB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEO,MAAM;CAiChB;AAED,qBACa,SAAU,SAAQ,aAAa;IAC1C,OAAgB,MAAM,iCAAyC;IAEtD,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;QAClB,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/components/chip/chip.js

@@ -0,0 +1,174 @@
+import { css as b, nothing as m, html as i } from "lit";
+import { property as o, customElement as v } from "lit/decorators.js";
+import { M as a } from "../../chunks/base-component-DQTjlEVL.js";
+import "../../internal/ripple/ripple.js";
+import "../../chunks/focus-ring-Dl-XoEKK.js";
+import "../icon/icon.js";
+const y = b`
+  :host {
+    display: inline-flex;
+    outline: none;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .chip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: var(--md-sys-shape-corner-small, 8px);
+    border: 1px solid var(--md-sys-color-outline, #79747E);
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    gap: 8px;
+    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                border-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
+    overflow: hidden;
+  }
+
+  :host([selected]) .chip {
+    background-color: var(--md-sys-color-secondary-container, #E8DEF8);
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+    border-color: transparent;
+  }
+
+  :host([variant="elevated"]) .chip {
+    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);
+    border: none;
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  .remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    cursor: pointer;
+    margin-left: 2px;
+  }
+
+  .remove-btn:hover {
+    background-color: rgba(29, 27, 32, 0.12);
+  }
+`, u = b`
+  :host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+`;
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (s, n, c, l) => {
+  for (var r = l > 1 ? void 0 : l ? g(n, c) : n, d = s.length - 1, p; d >= 0; d--)
+    (p = s[d]) && (r = (l ? p(n, c, r) : p(r)) || r);
+  return l && r && f(n, c, r), r;
+};
+let e = class extends a {
+  constructor() {
+    super(...arguments), this.variant = "assist", this.label = "", this.icon = "", this.selected = !1, this.removable = !1, this.disabled = !1, this.handleClick = (s) => {
+      this.disabled || this.variant === "filter" && (this.selected = !this.selected, this.emitEvent("change", { selected: this.selected }));
+    }, this.handleRemove = (s) => {
+      s.stopPropagation(), this.emitEvent("remove");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", this.handleClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick);
+  }
+  render() {
+    return i`
+      <div class="chip" tabindex=${this.disabled ? "-1" : "0"}>
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring></md-focus-ring>
+
+        <span class="icon">
+          ${this.variant === "filter" && this.selected ? i`<md-icon name="check" size="18"></md-icon>` : i`
+                <slot name="icon">
+                  ${this.icon ? i`<md-icon name=${this.icon} size="18"></md-icon>` : m}
+                </slot>
+              `}
+        </span>
+
+        <slot>${this.label}</slot>
+
+        ${this.removable || this.variant === "input" ? i`
+              <button
+                class="remove-btn"
+                aria-label="Remove"
+                @click=${this.handleRemove}
+                tabindex="-1"
+              >
+                <md-icon name="close" size="16"></md-icon>
+              </button>
+            ` : m}
+      </div>
+    `;
+  }
+};
+e.styles = [a.styles, y];
+t([
+  o({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+t([
+  o({ type: String })
+], e.prototype, "label", 2);
+t([
+  o({ type: String })
+], e.prototype, "icon", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "selected", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "removable", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+e = t([
+  v("md-chip")
+], e);
+let h = class extends a {
+  render() {
+    return i`<slot></slot>`;
+  }
+};
+h.styles = [a.styles, u];
+h = t([
+  v("md-chip-set")
+], h);
+export {
+  e as MdChip,
+  h as MdChipSet
+};
+//# sourceMappingURL=chip.js.map

package/dist/components/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sources":["../../../src/components/chip/chip.css.ts","../../../src/components/chip/chip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const chipStyles = css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .chip {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 12px;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    border: 1px solid var(--md-sys-color-outline, #79747E);\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    gap: 8px;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  :host([selected]) .chip {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n    border-color: transparent;\n  }\n\n  :host([variant=\"elevated\"]) .chip {\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    border: none;\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  .remove-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    margin-left: 2px;\n  }\n\n  .remove-btn:hover {\n    background-color: rgba(29, 27, 32, 0.12);\n  }\n`;\n\nexport const chipSetStyles = css`\n  :host {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 8px;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } 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 { chipStyles, chipSetStyles } from './chip.css.js';\n\nexport type ChipVariant = 'assist' | 'filter' | 'input' | 'suggestion';\n\n@customElement('md-chip')\nexport class MdChip extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, chipStyles];\n\n  @property({ type: String, reflect: true })\n  variant: ChipVariant = 'assist';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  removable = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n\n    if (this.variant === 'filter') {\n      this.selected = !this.selected;\n      this.emitEvent('change', { selected: this.selected });\n    }\n  };\n\n  private handleRemove = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.emitEvent('remove');\n  };\n\n  override render() {\n    return html`\n      <div class=\"chip\" tabindex=${this.disabled ? '-1' : '0'}>\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n\n        <span class=\"icon\">\n          ${this.variant === 'filter' && this.selected\n            ? html`<md-icon name=\"check\" size=\"18\"></md-icon>`\n            : html`\n                <slot name=\"icon\">\n                  ${this.icon ? html`<md-icon name=${this.icon} size=\"18\"></md-icon>` : nothing}\n                </slot>\n              `}\n        </span>\n\n        <slot>${this.label}</slot>\n\n        ${this.removable || this.variant === 'input'\n          ? html`\n              <button\n                class=\"remove-btn\"\n                aria-label=\"Remove\"\n                @click=${this.handleRemove}\n                tabindex=\"-1\"\n              >\n                <md-icon name=\"close\" size=\"16\"></md-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n@customElement('md-chip-set')\nexport class MdChipSet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, chipSetStyles];\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-chip': MdChip;\n    'md-chip-set': MdChipSet;\n  }\n}\n\n"],"names":["chipStyles","css","chipSetStyles","MdChip","MdBaseElement","event","html","nothing","__decorateClass","property","customElement","MdChipSet"],"mappings":"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"}

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

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

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

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

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,22 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export declare class MdDialog extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    open: boolean;
+    headline: string;
+    icon: string;
+    returnValue: string;
+    private dialogElement?;
+    updated(changedProperties: Map<string, unknown>): void;
+    showModal(): void;
+    show(): void;
+    close(returnValue?: string): void;
+    private handleCancel;
+    private handleBackdropClick;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-dialog': MdDialog;
+    }
+}
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iBAAiB,CAAC;AAGzB,qBACa,QAAS,SAAQ,aAAa;IACzC,OAAgB,MAAM,iCAAwC;IAG9D,IAAI,UAAS;IAGb,QAAQ,SAAM;IAGd,IAAI,SAAM;IAGV,WAAW,SAAM;IAGjB,OAAO,CAAC,aAAa,CAAC,CAAoB;IAEjC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAexD,SAAS;IAIT,IAAI;IAIJ,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM;IAQ1B,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,mBAAmB,CAazB;IAEO,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,167 @@
+import { css as m, nothing as p, html as c } from "lit";
+import { property as n, query as f, customElement as g } from "lit/decorators.js";
+import { M as h } from "../../chunks/base-component-DQTjlEVL.js";
+import "../icon/icon.js";
+const u = m`
+  :host {
+    display: contents;
+  }
+
+  dialog {
+    box-sizing: border-box;
+    min-width: 280px;
+    max-width: 560px;
+    padding: 24px;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    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);
+    position: fixed;
+    inset: 0;
+    margin: auto;
+    overflow: auto;
+    z-index: 1000;
+  }
+
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.32);
+    backdrop-filter: blur(2px);
+    animation: md-fade-in 150ms ease-out forwards;
+  }
+
+  dialog[open] {
+    animation: md-dialog-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;
+  }
+
+  @keyframes md-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes md-dialog-in {
+    from {
+      opacity: 0;
+      transform: scale(0.92);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .dialog-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .icon {
+    display: flex;
+    justify-content: center;
+    color: var(--md-sys-color-secondary, #625B71);
+  }
+
+  .headline {
+    font-size: var(--md-sys-typescale-headline-small-size, 24px);
+    line-height: 32px;
+    font-weight: 400;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    margin: 0;
+  }
+
+  .content {
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    line-height: 20px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 8px;
+  }
+`;
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (e, o, a, l) => {
+  for (var i = l > 1 ? void 0 : l ? x(o, a) : o, r = e.length - 1, d; r >= 0; r--)
+    (d = e[r]) && (i = (l ? d(o, a, i) : d(i)) || i);
+  return l && i && y(o, a, i), i;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.open = !1, this.headline = "", this.icon = "", this.returnValue = "", this.handleCancel = (e) => {
+      e.preventDefault(), this.close("cancel");
+    }, this.handleBackdropClick = (e) => {
+      if (e.target === this.dialogElement) {
+        const o = this.dialogElement.getBoundingClientRect();
+        o.top <= e.clientY && e.clientY <= o.top + o.height && o.left <= e.clientX && e.clientX <= o.left + o.width || this.close("backdrop");
+      }
+    };
+  }
+  updated(e) {
+    super.updated(e), e.has("open") && (this.open ? this.dialogElement && !this.dialogElement.open && this.dialogElement.showModal() : this.dialogElement && this.dialogElement.open && this.dialogElement.close());
+  }
+  showModal() {
+    this.open = !0;
+  }
+  show() {
+    this.open = !0;
+  }
+  close(e) {
+    e !== void 0 && (this.returnValue = e), this.open = !1, this.emitEvent("close", { returnValue: this.returnValue });
+  }
+  render() {
+    return c`
+      <dialog
+        @cancel=${this.handleCancel}
+        @click=${this.handleBackdropClick}
+      >
+        <div class="dialog-container">
+          <div class="icon">
+            <slot name="icon">
+              ${this.icon ? c`<md-icon name=${this.icon} size="32"></md-icon>` : p}
+            </slot>
+          </div>
+
+          <slot name="headline">
+            ${this.headline ? c`<h2 class="headline">${this.headline}</h2>` : p}
+          </slot>
+
+          <div class="content">
+            <slot></slot>
+          </div>
+
+          <div class="actions">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
+  }
+};
+t.styles = [h.styles, u];
+s([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+s([
+  n({ type: String })
+], t.prototype, "headline", 2);
+s([
+  n({ type: String })
+], t.prototype, "icon", 2);
+s([
+  n({ type: String, attribute: "return-value" })
+], t.prototype, "returnValue", 2);
+s([
+  f("dialog")
+], t.prototype, "dialogElement", 2);
+t = s([
+  g("md-dialog")
+], t);
+export {
+  t as MdDialog
+};
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.css.ts","../../../src/components/dialog/dialog.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const dialogStyles = css`\n  :host {\n    display: contents;\n  }\n\n  dialog {\n    box-sizing: border-box;\n    min-width: 280px;\n    max-width: 560px;\n    padding: 24px;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n    color: var(--md-sys-color-on-surface, #1D1B20);\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    position: fixed;\n    inset: 0;\n    margin: auto;\n    overflow: auto;\n    z-index: 1000;\n  }\n\n  dialog::backdrop {\n    background-color: rgba(0, 0, 0, 0.32);\n    backdrop-filter: blur(2px);\n    animation: md-fade-in 150ms ease-out forwards;\n  }\n\n  dialog[open] {\n    animation: md-dialog-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n  }\n\n  @keyframes md-fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes md-dialog-in {\n    from {\n      opacity: 0;\n      transform: scale(0.92);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  .dialog-container {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    color: var(--md-sys-color-secondary, #625B71);\n  }\n\n  .headline {\n    font-size: var(--md-sys-typescale-headline-small-size, 24px);\n    line-height: 32px;\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    margin: 0;\n  }\n\n  .content {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    padding-top: 8px;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../icon/icon.js';\nimport { dialogStyles } from './dialog.css.js';\n\n@customElement('md-dialog')\nexport class MdDialog extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, dialogStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'return-value' })\n  returnValue = '';\n\n  @query('dialog')\n  private dialogElement?: HTMLDialogElement;\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        if (this.dialogElement && !this.dialogElement.open) {\n          this.dialogElement.showModal();\n        }\n      } else {\n        if (this.dialogElement && this.dialogElement.open) {\n          this.dialogElement.close();\n        }\n      }\n    }\n  }\n\n  showModal() {\n    this.open = true;\n  }\n\n  show() {\n    this.open = true;\n  }\n\n  close(returnValue?: string) {\n    if (returnValue !== undefined) {\n      this.returnValue = returnValue;\n    }\n    this.open = false;\n    this.emitEvent('close', { returnValue: this.returnValue });\n  }\n\n  private handleCancel = (event: Event) => {\n    event.preventDefault();\n    this.close('cancel');\n  };\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    if (event.target === this.dialogElement) {\n      const rect = this.dialogElement.getBoundingClientRect();\n      const isInDialog = (\n        rect.top <= event.clientY &&\n        event.clientY <= rect.top + rect.height &&\n        rect.left <= event.clientX &&\n        event.clientX <= rect.left + rect.width\n      );\n      if (!isInDialog) {\n        this.close('backdrop');\n      }\n    }\n  };\n\n  override render() {\n    return html`\n      <dialog\n        @cancel=${this.handleCancel}\n        @click=${this.handleBackdropClick}\n      >\n        <div class=\"dialog-container\">\n          <div class=\"icon\">\n            <slot name=\"icon\">\n              ${this.icon ? html`<md-icon name=${this.icon} size=\"32\"></md-icon>` : nothing}\n            </slot>\n          </div>\n\n          <slot name=\"headline\">\n            ${this.headline ? html`<h2 class=\"headline\">${this.headline}</h2>` : nothing}\n          </slot>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n\n          <div class=\"actions\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-dialog': MdDialog;\n  }\n}\n\n"],"names":["dialogStyles","css","MdDialog","MdBaseElement","event","rect","changedProperties","returnValue","html","nothing","__decorateClass","property","query","customElement"],"mappings":"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"}

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

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

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

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