@francofantomius/material-components 0.1.0 → 1.0.0

package/dist/chunks/checkbox-BqlboAHd.js

@@ -0,0 +1,194 @@
+import { t as i } from "./decorate-DXuynaiA.js";
+import { t as s } from "./form-associated-Cty_ZaS9.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import { css as a, html as n } from "lit";
+import { customElement as d, property as o, query as l } from "lit/decorators.js";
+var c = a`
+  :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;
+    opacity: 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);
+  }
+
+  .box md-ripple {
+    inset: -2px;
+  }
+
+  :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: var(--md-sys-color-on-surface, #1D1B20);
+  }
+
+  :host([disabled][checked]) .box,
+  :host([disabled][indeterminate]) .box {
+    background-color: var(--md-sys-color-on-surface, #1D1B20);
+    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;
+    z-index: 1;
+  }
+
+  :host([checked]) .mark.check {
+    opacity: 1;
+  }
+
+  :host([indeterminate]) .mark.dash {
+    opacity: 1;
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+`, e = class extends s {
+  constructor(...t) {
+    super(...t), this.checked = !1, this.indeterminate = !1, this.error = !1, this.value = "on", this.handleClick = (r) => {
+      this.disabled || (r.preventDefault(), this.toggle());
+    }, this.handleKeyDown = (r) => {
+      this.disabled || (r.key === " " || r.key === "Enter") && (r.preventDefault(), this.toggle());
+    };
+  }
+  static {
+    this.styles = [s.styles, c];
+  }
+  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(t) {
+    super.updated(t), (t.has("checked") || t.has("indeterminate") || t.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 n`
+      <div class="container">
+        <div class="box">
+          <md-ripple ?disabled=${this.disabled}></md-ripple>
+          <md-focus-ring></md-focus-ring>
+          <!-- 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>
+    `;
+  }
+};
+i([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "checked", void 0);
+i([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "indeterminate", void 0);
+i([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "error", void 0);
+i([o({ type: String })], e.prototype, "value", void 0);
+i([l("input")], e.prototype, "inputElement", void 0);
+e = i([d("md-checkbox")], e);
+export {
+  e as t
+};
+
+//# sourceMappingURL=checkbox-BqlboAHd.js.map

package/dist/chunks/checkbox-BqlboAHd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-BqlboAHd.js","names":[],"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    opacity: 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  .box md-ripple {\n    inset: -2px;\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: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled][checked]) .box,\n  :host([disabled][indeterminate]) .box {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\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    z-index: 1;\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        <div class=\"box\">\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\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"],"mappings":"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"}

package/dist/chunks/chip-CI1ZINnr.js

@@ -0,0 +1,169 @@
+import { n as r, t } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import { css as l, html as i, nothing as n } from "lit";
+import { customElement as c, property as o } from "lit/decorators.js";
+var h = l`
+  :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);
+  }
+`, m = l`
+  :host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+`, e = class extends r {
+  constructor(...p) {
+    super(...p), 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");
+    };
+  }
+  static {
+    this.styles = [r.styles, h];
+  }
+  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>` : n}
+                </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>
+            ` : n}
+      </div>
+    `;
+  }
+};
+t([o({
+  type: String,
+  reflect: !0
+})], e.prototype, "variant", void 0);
+t([o({ type: String })], e.prototype, "label", void 0);
+t([o({ type: String })], e.prototype, "icon", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "selected", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "removable", void 0);
+t([o({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "disabled", void 0);
+e = t([c("md-chip")], e);
+var a = class extends r {
+  static {
+    this.styles = [r.styles, m];
+  }
+  render() {
+    return i`<slot></slot>`;
+  }
+};
+a = t([c("md-chip-set")], a);
+export {
+  a as n,
+  e as t
+};
+
+//# sourceMappingURL=chip-CI1ZINnr.js.map

package/dist/chunks/chip-CI1ZINnr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-CI1ZINnr.js","names":[],"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"],"mappings":"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"}