@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{fab-menu.css-3pu930sZ.js.map → fab-menu.css-BdVg1k4c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fab-menu.css-3pu930sZ.js","names":[],"sources":["../../src/components/fab-menu/fab-menu.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const fabMenuStyles = css`\n  :host {\n    display: inline-flex;\n    position: relative;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n    box-sizing: border-box;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  /* --- Scrim Overlay for Modal Mode --- */\n  .scrim {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    background-color: var(--md-sys-color-scrim, rgba(0, 0, 0, 0.32));\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    z-index: 99;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([modal][open]) .scrim {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  /* --- Main Container & Stacking --- */\n  .container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 100;\n  }\n\n  /* --- Trigger FAB Button --- */\n  .trigger-btn {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    background-color: var(--md-sys-color-primary-container, #EADDFF);\n    color: var(--md-sys-color-on-primary-container, #21005D);\n    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                transform 250ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n    z-index: 2;\n  }\n\n  .trigger-btn:hover {\n    box-shadow: var(--md-sys-elevation-level4, 0px 2px 3px 0px rgba(0, 0, 0, 0.30));\n  }\n\n  :host([lowered]) .trigger-btn {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  :host([lowered]) .trigger-btn:hover {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Trigger Sizes --- */\n  :host(:not([size])) .trigger-btn,\n  :host([size=\"medium\"]) .trigger-btn {\n    width: 56px;\n    height: 56px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n  }\n\n  :host([size=\"small\"]) .trigger-btn {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n  }\n\n  :host([size=\"large\"]) .trigger-btn {\n    width: 96px;\n    height: 96px;\n    border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n  }\n\n  :host([size=\"large\"]) md-icon {\n    --md-icon-size: 36px;\n  }\n\n  /* --- Extended Trigger FAB --- */\n  :host([extended]) .trigger-btn {\n    width: auto;\n    min-width: 80px;\n    height: 56px;\n    padding: 0 20px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n    gap: 12px;\n  }\n\n  .trigger-content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .trigger-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([open]:not([open-icon])) .trigger-icon.rotate {\n    transform: rotate(45deg);\n  }\n\n  .trigger-label {\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    white-space: nowrap;\n  }\n\n  /* --- Sub-FAB Items Stack Container --- */\n  .items {\n    position: absolute;\n    display: flex;\n    gap: 14px;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1),\n                transform 250ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 1;\n  }\n\n  :host([open]) .items {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n    transform: none !important;\n  }\n\n  /* Directions */\n  :host(:not([direction])) .items,\n  :host([direction=\"up\"]) .items {\n    flex-direction: column-reverse;\n    bottom: calc(100% + 14px);\n    right: 0;\n    align-items: flex-end;\n    transform: translateY(16px) scale(0.9);\n  }\n\n  :host([direction=\"down\"]) .items {\n    flex-direction: column;\n    top: calc(100% + 14px);\n    right: 0;\n    align-items: flex-end;\n    transform: translateY(-16px) scale(0.9);\n  }\n\n  :host([direction=\"left\"]) .items {\n    flex-direction: row-reverse;\n    right: calc(100% + 14px);\n    top: 50%;\n    transform: translateY(-50%) translateX(16px) scale(0.9);\n    align-items: center;\n  }\n\n  :host([direction=\"left\"][open]) .items {\n    transform: translateY(-50%) !important;\n  }\n\n  :host([direction=\"right\"]) .items {\n    flex-direction: row;\n    left: calc(100% + 14px);\n    top: 50%;\n    transform: translateY(-50%) translateX(-16px) scale(0.9);\n    align-items: center;\n  }\n\n  :host([direction=\"right\"][open]) .items {\n    transform: translateY(-50%) !important;\n  }\n`;\n\nexport const fabMenuItemStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n    box-sizing: border-box;\n    user-select: none;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .item-container {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    cursor: pointer;\n  }\n\n  :host([label-placement=\"end\"]) .item-container {\n    flex-direction: row-reverse;\n  }\n\n  :host([label-placement=\"top\"]) .item-container {\n    flex-direction: column-reverse;\n    gap: 6px;\n  }\n\n  :host([label-placement=\"bottom\"]) .item-container {\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  /* --- Item Label Pill --- */\n  .label-pill {\n    display: inline-flex;\n    align-items: center;\n    padding: 6px 12px;\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\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    white-space: nowrap;\n    transition: background-color 150ms ease, box-shadow 150ms ease;\n  }\n\n  .item-container:hover .label-pill {\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Sub-FAB Mini Button --- */\n  .mini-fab {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    outline: none;\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n    box-shadow: var(--md-sys-elevation-level2, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  .item-container:hover .mini-fab {\n    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));\n  }\n\n  :host(:not([size])) .mini-fab,\n  :host([size=\"small\"]) .mini-fab {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n  }\n\n  :host([size=\"medium\"]) .mini-fab {\n    width: 56px;\n    height: 56px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n  }\n\n  :host([lowered]) .mini-fab {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  .icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\n  }\n`;\n"],"mappings":";AAEA,IAAa,IAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgNhB,IAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"fab-menu.css-BdVg1k4c.js","names":[],"sources":["../../src/components/fab-menu/fab-menu.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const fabMenuStyles = css`\n  :host {\n    display: inline-flex;\n    position: relative;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n    box-sizing: border-box;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  /* --- Scrim Overlay for Modal Mode --- */\n  .scrim {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    background-color: var(--md-sys-color-scrim, rgba(0, 0, 0, 0.32));\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    z-index: 99;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([modal][open]) .scrim {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  /* --- Main Container & Stacking --- */\n  .container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 100;\n  }\n\n  /* --- Trigger FAB Button --- */\n  .trigger-btn {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    background-color: var(--md-sys-color-primary-container, #EADDFF);\n    color: var(--md-sys-color-on-primary-container, #21005D);\n    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                transform 250ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n    z-index: 2;\n  }\n\n  .trigger-btn:hover {\n    box-shadow: var(--md-sys-elevation-level4, 0px 2px 3px 0px rgba(0, 0, 0, 0.30));\n  }\n\n  :host([lowered]) .trigger-btn {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  :host([lowered]) .trigger-btn:hover {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Trigger Sizes --- */\n  :host(:not([size])) .trigger-btn,\n  :host([size=\"medium\"]) .trigger-btn {\n    width: 56px;\n    height: 56px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n  }\n\n  :host([size=\"small\"]) .trigger-btn {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n  }\n\n  :host([size=\"large\"]) .trigger-btn {\n    width: 96px;\n    height: 96px;\n    border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n  }\n\n  :host([size=\"large\"]) md-icon {\n    --md-icon-size: 36px;\n  }\n\n  /* --- Extended Trigger FAB --- */\n  :host([extended]) .trigger-btn {\n    width: auto;\n    min-width: 80px;\n    height: 56px;\n    padding: 0 20px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n    gap: 12px;\n  }\n\n  .trigger-content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .trigger-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([open]:not([open-icon])) .trigger-icon.rotate {\n    transform: rotate(45deg);\n  }\n\n  .trigger-label {\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    white-space: nowrap;\n  }\n\n  /* --- Sub-FAB Items Stack Container --- */\n  .items {\n    position: absolute;\n    display: flex;\n    gap: 14px;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1),\n                transform 250ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 1;\n  }\n\n  :host([open]) .items {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n    transform: none !important;\n  }\n\n  /* Directions */\n  :host(:not([direction])) .items,\n  :host([direction=\"up\"]) .items {\n    flex-direction: column-reverse;\n    bottom: calc(100% + 14px);\n    right: 0;\n    align-items: flex-end;\n    transform: translateY(16px) scale(0.9);\n  }\n\n  :host([direction=\"down\"]) .items {\n    flex-direction: column;\n    top: calc(100% + 14px);\n    right: 0;\n    align-items: flex-end;\n    transform: translateY(-16px) scale(0.9);\n  }\n\n  :host([direction=\"left\"]) .items {\n    flex-direction: row-reverse;\n    right: calc(100% + 14px);\n    top: 50%;\n    transform: translateY(-50%) translateX(16px) scale(0.9);\n    align-items: center;\n  }\n\n  :host([direction=\"left\"][open]) .items {\n    transform: translateY(-50%) !important;\n  }\n\n  :host([direction=\"right\"]) .items {\n    flex-direction: row;\n    left: calc(100% + 14px);\n    top: 50%;\n    transform: translateY(-50%) translateX(-16px) scale(0.9);\n    align-items: center;\n  }\n\n  :host([direction=\"right\"][open]) .items {\n    transform: translateY(-50%) !important;\n  }\n`;\n\nexport const fabMenuItemStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n    box-sizing: border-box;\n    user-select: none;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .item-container {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    cursor: pointer;\n  }\n\n  :host([label-placement=\"end\"]) .item-container {\n    flex-direction: row-reverse;\n  }\n\n  :host([label-placement=\"top\"]) .item-container {\n    flex-direction: column-reverse;\n    gap: 6px;\n  }\n\n  :host([label-placement=\"bottom\"]) .item-container {\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  /* --- Item Label Pill --- */\n  .label-pill {\n    display: inline-flex;\n    align-items: center;\n    padding: 6px 12px;\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\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    white-space: nowrap;\n    transition: background-color 150ms ease, box-shadow 150ms ease;\n  }\n\n  .item-container:hover .label-pill {\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  /* --- Sub-FAB Mini Button --- */\n  .mini-fab {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    outline: none;\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n    box-shadow: var(--md-sys-elevation-level2, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  .item-container:hover .mini-fab {\n    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));\n  }\n\n  :host(:not([size])) .mini-fab,\n  :host([size=\"small\"]) .mini-fab {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n  }\n\n  :host([size=\"medium\"]) .mini-fab {\n    width: 56px;\n    height: 56px;\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n  }\n\n  :host([lowered]) .mini-fab {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  .icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\n  }\n`;\n"],"mappings":";;AAEA,IAAa,IAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgNnB,IAAoB,CAAG"}

package/dist/chunks/focus-ring-K6SY_mIm.js

@@ -0,0 +1,69 @@
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import { css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/internal/focus-ring/focus-ring.css.ts
+var o = n`
+  :host {
+    display: none;
+    position: absolute;
+    inset: -4px;
+    border: 3px solid var(--md-sys-color-secondary, #625B71);
+    border-radius: inherit;
+    pointer-events: none;
+    box-sizing: border-box;
+  }
+
+  :host([visible]) {
+    display: block;
+    animation: md-focus-ring-in 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([inward]) {
+    inset: 0px;
+  }
+
+  @keyframes md-focus-ring-in {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`, s = class extends e {
+	constructor(...e) {
+		super(...e), this.visible = !1, this.inward = !1, this.control = null, this.handleFocusIn = () => {
+			let e = this.getRootNode()?.host;
+			(this.control?.matches(":focus-visible") || this.control?.querySelector(":focus-visible") || e?.matches(":focus-visible")) && (this.visible = !0);
+		}, this.handleFocusOut = () => {
+			this.visible = !1;
+		};
+	}
+	static {
+		this.styles = [e.styles, o];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let e = this.parentElement, t = this.getRootNode()?.host;
+		this.control = e || t, this.control && (this.control.addEventListener("focusin", this.handleFocusIn), this.control.addEventListener("focusout", this.handleFocusOut));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.control && (this.control.removeEventListener("focusin", this.handleFocusIn), this.control.removeEventListener("focusout", this.handleFocusOut));
+	}
+	render() {
+		return r``;
+	}
+};
+t([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "visible", void 0), t([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "inward", void 0), s = t([i("md-focus-ring")], s);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=focus-ring-K6SY_mIm.js.map

package/dist/chunks/{focus-ring-CuiJuM-y.js.map → focus-ring-K6SY_mIm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"focus-ring-CuiJuM-y.js","names":[],"sources":["../../src/internal/focus-ring/focus-ring.css.ts","../../src/internal/focus-ring/focus-ring.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const focusRingStyles = css`\n  :host {\n    display: none;\n    position: absolute;\n    inset: -4px;\n    border: 3px solid var(--md-sys-color-secondary, #625B71);\n    border-radius: inherit;\n    pointer-events: none;\n    box-sizing: border-box;\n  }\n\n  :host([visible]) {\n    display: block;\n    animation: md-focus-ring-in 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([inward]) {\n    inset: 0px;\n  }\n\n  @keyframes md-focus-ring-in {\n    from {\n      opacity: 0;\n      transform: scale(0.96);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../base-component.js';\nimport { focusRingStyles } from './focus-ring.css.js';\n\n@customElement('md-focus-ring')\nexport class MdFocusRing extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, focusRingStyles];\n\n  @property({ type: Boolean, reflect: true })\n  visible = false;\n\n  @property({ type: Boolean, reflect: true })\n  inward = false;\n\n  private control: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    const parent = this.parentElement;\n    const host = (this.getRootNode() as ShadowRoot)?.host as HTMLElement | null;\n    this.control = parent || host;\n    if (this.control) {\n      this.control.addEventListener('focusin', this.handleFocusIn);\n      this.control.addEventListener('focusout', this.handleFocusOut);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.control) {\n      this.control.removeEventListener('focusin', this.handleFocusIn);\n      this.control.removeEventListener('focusout', this.handleFocusOut);\n    }\n  }\n\n  private handleFocusIn = (): void => {\n    const host = (this.getRootNode() as ShadowRoot)?.host as HTMLElement | null;\n    if (\n      this.control?.matches(':focus-visible') ||\n      this.control?.querySelector(':focus-visible') ||\n      host?.matches(':focus-visible')\n    ) {\n      this.visible = true;\n    }\n  };\n\n  private handleFocusOut = (): void => {\n    this.visible = false;\n  };\n\n  override render() {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-focus-ring': MdFocusRing;\n  }\n}\n\n"],"mappings":";;;AAEA,IAAa,IAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCIlB,IAAN,cAA0B,EAAc;AAAA;iBAInC,KAAA,UAAA,IAGD,KAAA,SAAA,IAE6B,KAAA,UAAA,MAqBF,KAAA,gBAAA,MAAA;AAClC,YAAM,IAAQ,KAAK,YAAY,GAAkB;AACjD,OACE,KAAK,SAAS,QAAQ,gBAAgB,KACtC,KAAK,SAAS,cAAc,gBAAgB,KAC5C,GAAM,QAAQ,gBAAgB,OAE9B,KAAK,UAAU;AAAA,IAEnB,GAEqC,KAAA,iBAAA,MAAA;AACnC,WAAK,UAAU;AAAA,IACjB;AAAA;;AA1CyB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAe;AAAA;EAU/D,oBAAmC;AACjC,UAAM,kBAAkB;AACxB,UAAM,IAAS,KAAK,eACd,IAAQ,KAAK,YAAY,GAAkB;AACjD,SAAK,UAAU,KAAU,GACrB,KAAK,YACP,KAAK,QAAQ,iBAAiB,WAAW,KAAK,aAAa,GAC3D,KAAK,QAAQ,iBAAiB,YAAY,KAAK,cAAc;AAAA,EAEjE;AAAA,EAEA,uBAAsC;AACpC,UAAM,qBAAqB,GACvB,KAAK,YACP,KAAK,QAAQ,oBAAoB,WAAW,KAAK,aAAa,GAC9D,KAAK,QAAQ,oBAAoB,YAAY,KAAK,cAAc;AAAA,EAEpE;AAAA,EAiBA,SAAkB;AAChB,WAAO;AAAA,EACT;AACF;AA7CG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAP3C,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"focus-ring-K6SY_mIm.js","names":[],"sources":["../../src/internal/focus-ring/focus-ring.css.ts","../../src/internal/focus-ring/focus-ring.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const focusRingStyles = css`\n  :host {\n    display: none;\n    position: absolute;\n    inset: -4px;\n    border: 3px solid var(--md-sys-color-secondary, #625B71);\n    border-radius: inherit;\n    pointer-events: none;\n    box-sizing: border-box;\n  }\n\n  :host([visible]) {\n    display: block;\n    animation: md-focus-ring-in 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([inward]) {\n    inset: 0px;\n  }\n\n  @keyframes md-focus-ring-in {\n    from {\n      opacity: 0;\n      transform: scale(0.96);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../base-component.js';\nimport { focusRingStyles } from './focus-ring.css.js';\n\n@customElement('md-focus-ring')\nexport class MdFocusRing extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, focusRingStyles];\n\n  @property({ type: Boolean, reflect: true })\n  visible = false;\n\n  @property({ type: Boolean, reflect: true })\n  inward = false;\n\n  private control: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    const parent = this.parentElement;\n    const host = (this.getRootNode() as ShadowRoot)?.host as HTMLElement | null;\n    this.control = parent || host;\n    if (this.control) {\n      this.control.addEventListener('focusin', this.handleFocusIn);\n      this.control.addEventListener('focusout', this.handleFocusOut);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.control) {\n      this.control.removeEventListener('focusin', this.handleFocusIn);\n      this.control.removeEventListener('focusout', this.handleFocusOut);\n    }\n  }\n\n  private handleFocusIn = (): void => {\n    const host = (this.getRootNode() as ShadowRoot)?.host as HTMLElement | null;\n    if (\n      this.control?.matches(':focus-visible') ||\n      this.control?.querySelector(':focus-visible') ||\n      host?.matches(':focus-visible')\n    ) {\n      this.visible = true;\n    }\n  };\n\n  private handleFocusOut = (): void => {\n    this.visible = false;\n  };\n\n  override render() {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-focus-ring': MdFocusRing;\n  }\n}\n\n"],"mappings":";;;;AAEA,IAAa,IAAkB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCIrB,IAAN,cAA0B,EAAc;;EAyCR,aArC3B,KAAA,UAAA,IAGD,KAAA,SAAA,IAE6B,KAAA,UAAA,MAqBF,KAAA,sBAAA;GAClC,IAAM,IAAQ,KAAK,YAAY,CAAC,EAAiB;GACjD,CACE,KAAK,SAAS,QAAQ,gBAAgB,KACtC,KAAK,SAAS,cAAc,gBAAgB,KAC5C,GAAM,QAAQ,gBAAgB,OAE9B,KAAK,UAAU;EAEnB,GAEqC,KAAA,uBAAA;GACnC,KAAK,UAAU;EACjB;;;EA1CyB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAe;;CAU/D,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,IAAM,IAAS,KAAK,eACd,IAAQ,KAAK,YAAY,CAAC,EAAiB;EAEjD,AADA,KAAK,UAAU,KAAU,GACrB,KAAK,YACP,KAAK,QAAQ,iBAAiB,WAAW,KAAK,aAAa,GAC3D,KAAK,QAAQ,iBAAiB,YAAY,KAAK,cAAc;CAEjE;CAEA,uBAAsC;EAEpC,AADA,MAAM,qBAAqB,GACvB,KAAK,YACP,KAAK,QAAQ,oBAAoB,WAAW,KAAK,aAAa,GAC9D,KAAK,QAAQ,oBAAoB,YAAY,KAAK,cAAc;CAEpE;CAiBA,SAAkB;EAChB,OAAO,CAAI;CACb;AACF;AA7CG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAP3C,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}

package/dist/chunks/form-associated-Do5uXckv.js

@@ -0,0 +1,69 @@
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import { property as n } from "lit/decorators.js";
+//#region src/internal/form-associated.ts
+var r = class extends e {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this.name = "", this.disabled = !1, this.required = !1, this._customValidityMessage = "", this._valid = !0, typeof this.attachInternals == "function" && (this.internals = this.attachInternals());
+	}
+	get form() {
+		return this.internals?.form ?? this.closest("form");
+	}
+	get validity() {
+		return this.internals?.validity ?? {
+			valid: this._valid,
+			valueMissing: !this._valid,
+			customError: !!this._customValidityMessage,
+			badInput: !1,
+			patternMismatch: !1,
+			rangeOverflow: !1,
+			rangeUnderflow: !1,
+			stepMismatch: !1,
+			tooLong: !1,
+			tooShort: !1,
+			typeMismatch: !1
+		};
+	}
+	get validationMessage() {
+		return this.internals?.validationMessage ?? this._customValidityMessage;
+	}
+	get willValidate() {
+		return this.internals?.willValidate ?? !this.disabled;
+	}
+	checkValidity() {
+		return this.internals?.checkValidity ? this.internals.checkValidity() : this._valid;
+	}
+	reportValidity() {
+		return this.internals?.reportValidity ? this.internals.reportValidity() : this._valid;
+	}
+	setFormValue(e) {
+		this.internals?.setFormValue(e);
+	}
+	setValidity(e, t, n) {
+		if (e) {
+			let n = Object.values(e).some(Boolean);
+			this._valid = !n, this._customValidityMessage = t || "";
+		} else this._valid = !0, this._customValidityMessage = "";
+		this.internals?.setValidity && this.internals.setValidity(e, t, n);
+	}
+	formResetCallback() {}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+};
+t([n({
+	type: String,
+	reflect: !0
+})], r.prototype, "name", void 0), t([n({
+	type: Boolean,
+	reflect: !0
+})], r.prototype, "disabled", void 0), t([n({
+	type: Boolean,
+	reflect: !0
+})], r.prototype, "required", void 0);
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=form-associated-Do5uXckv.js.map

package/dist/chunks/{form-associated-Cty_ZaS9.js.map → form-associated-Do5uXckv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-associated-Cty_ZaS9.js","names":[],"sources":["../../src/internal/form-associated.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { MdBaseElement } from './base-component.js';\n\n/**\n * Base element class for Form-Associated Custom Elements (FACE).\n * Provides seamless integration with native HTML <form> elements.\n */\nexport class MdFormAssociatedElement extends MdBaseElement {\n  static formAssociated = true;\n\n  protected internals?: ElementInternals;\n\n  @property({ type: String, reflect: true })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  private _customValidityMessage = '';\n  private _valid = true;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this.internals = this.attachInternals();\n    }\n  }\n\n  get form(): HTMLFormElement | null {\n    return this.internals?.form ?? (this.closest('form') as HTMLFormElement | null);\n  }\n\n  get validity(): ValidityState {\n    return this.internals?.validity ?? ({\n      valid: this._valid,\n      valueMissing: !this._valid,\n      customError: Boolean(this._customValidityMessage),\n      badInput: false,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n    } as ValidityState);\n  }\n\n  get validationMessage(): string {\n    return this.internals?.validationMessage ?? this._customValidityMessage;\n  }\n\n  get willValidate(): boolean {\n    return this.internals?.willValidate ?? !this.disabled;\n  }\n\n  checkValidity(): boolean {\n    if (this.internals?.checkValidity) {\n      return this.internals.checkValidity();\n    }\n    return this._valid;\n  }\n\n  reportValidity(): boolean {\n    if (this.internals?.reportValidity) {\n      return this.internals.reportValidity();\n    }\n    return this._valid;\n  }\n\n  protected setFormValue(value: string | File | FormData | null): void {\n    this.internals?.setFormValue(value);\n  }\n\n  protected setValidity(\n    flags?: ValidityStateFlags,\n    message?: string,\n    anchor?: HTMLElement\n  ): void {\n    if (flags) {\n      const hasErrors = Object.values(flags).some(Boolean);\n      this._valid = !hasErrors;\n      this._customValidityMessage = message || '';\n    } else {\n      this._valid = true;\n      this._customValidityMessage = '';\n    }\n\n    if (this.internals?.setValidity) {\n      this.internals.setValidity(flags, message, anchor);\n    }\n  }\n\n  formResetCallback(): void {\n    // Override in child class to reset internal values\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n}\n\n"],"mappings":";;AAOA,IAAa,IAAb,cAA6C,EAAc;AAAA;AACjC,SAAA,iBAAA;AAAA;EAgBxB,cAAc;AACZ,UAAM,GAZD,KAAA,OAAA,IAGI,KAAA,WAAA,IAGA,KAAA,WAAA,IAEsB,KAAA,yBAAA,IAChB,KAAA,SAAA,IAIX,OAAO,KAAK,mBAAoB,eAClC,KAAK,YAAY,KAAK,gBAAgB;AAAA,EAE1C;AAAA,EAEA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW,QAAS,KAAK,QAAQ,MAAM;AAAA,EACrD;AAAA,EAEA,IAAI,WAA0B;AAC5B,WAAO,KAAK,WAAW,YAAa;AAAA,MAClC,OAAO,KAAK;AAAA,MACZ,cAAc,CAAC,KAAK;AAAA,MACpB,aAAa,EAAQ,KAAK;AAAA,MAC1B,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EAEA,IAAI,oBAA4B;AAC9B,WAAO,KAAK,WAAW,qBAAqB,KAAK;AAAA,EACnD;AAAA,EAEA,IAAI,eAAwB;AAC1B,WAAO,KAAK,WAAW,gBAAgB,CAAC,KAAK;AAAA,EAC/C;AAAA,EAEA,gBAAyB;AACvB,WAAI,KAAK,WAAW,gBACX,KAAK,UAAU,cAAc,IAE/B,KAAK;AAAA,EACd;AAAA,EAEA,iBAA0B;AACxB,WAAI,KAAK,WAAW,iBACX,KAAK,UAAU,eAAe,IAEhC,KAAK;AAAA,EACd;AAAA,EAEA,aAAuB,GAA8C;AACnE,SAAK,WAAW,aAAa,CAAK;AAAA,EACpC;AAAA,EAEA,YACE,GACA,GACA,GACM;AACN,QAAI,GAAO;AACT,YAAM,IAAY,OAAO,OAAO,CAAK,EAAE,KAAK,OAAO;AACnD,WAAK,SAAS,CAAC,GACf,KAAK,yBAAyB,KAAW;AAAA,IAC3C;AACE,WAAK,SAAS,IACd,KAAK,yBAAyB;AAGhC,IAAI,KAAK,WAAW,eAClB,KAAK,UAAU,YAAY,GAAO,GAAS,CAAM;AAAA,EAErD;AAAA,EAEA,oBAA0B;AAAA,EAE1B;AAAA,EAEA,qBAAqB,GAAyB;AAC5C,SAAK,WAAW;AAAA,EAClB;AACF;AA3FG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA"}
+{"version":3,"file":"form-associated-Do5uXckv.js","names":[],"sources":["../../src/internal/form-associated.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { MdBaseElement } from './base-component.js';\n\n/**\n * Base element class for Form-Associated Custom Elements (FACE).\n * Provides seamless integration with native HTML <form> elements.\n */\nexport class MdFormAssociatedElement extends MdBaseElement {\n  static formAssociated = true;\n\n  protected internals?: ElementInternals;\n\n  @property({ type: String, reflect: true })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  private _customValidityMessage = '';\n  private _valid = true;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this.internals = this.attachInternals();\n    }\n  }\n\n  get form(): HTMLFormElement | null {\n    return this.internals?.form ?? (this.closest('form') as HTMLFormElement | null);\n  }\n\n  get validity(): ValidityState {\n    return this.internals?.validity ?? ({\n      valid: this._valid,\n      valueMissing: !this._valid,\n      customError: Boolean(this._customValidityMessage),\n      badInput: false,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n    } as ValidityState);\n  }\n\n  get validationMessage(): string {\n    return this.internals?.validationMessage ?? this._customValidityMessage;\n  }\n\n  get willValidate(): boolean {\n    return this.internals?.willValidate ?? !this.disabled;\n  }\n\n  checkValidity(): boolean {\n    if (this.internals?.checkValidity) {\n      return this.internals.checkValidity();\n    }\n    return this._valid;\n  }\n\n  reportValidity(): boolean {\n    if (this.internals?.reportValidity) {\n      return this.internals.reportValidity();\n    }\n    return this._valid;\n  }\n\n  protected setFormValue(value: string | File | FormData | null): void {\n    this.internals?.setFormValue(value);\n  }\n\n  protected setValidity(\n    flags?: ValidityStateFlags,\n    message?: string,\n    anchor?: HTMLElement\n  ): void {\n    if (flags) {\n      const hasErrors = Object.values(flags).some(Boolean);\n      this._valid = !hasErrors;\n      this._customValidityMessage = message || '';\n    } else {\n      this._valid = true;\n      this._customValidityMessage = '';\n    }\n\n    if (this.internals?.setValidity) {\n      this.internals.setValidity(flags, message, anchor);\n    }\n  }\n\n  formResetCallback(): void {\n    // Override in child class to reset internal values\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  formAssociatedCallback?(form: HTMLFormElement | null): void;\n\n  formStateRestoreCallback?(state: unknown, mode: 'restore' | 'autocomplete'): void;\n}\n\n"],"mappings":";;;AAOA,IAAa,IAAb,cAA6C,EAAc;;EACjC,KAAA,iBAAA;;CAgBxB,cAAc;EAEZ,AADA,MAAM,GAZD,KAAA,OAAA,IAGI,KAAA,WAAA,IAGA,KAAA,WAAA,IAEsB,KAAA,yBAAA,IAChB,KAAA,SAAA,IAIX,OAAO,KAAK,mBAAoB,eAClC,KAAK,YAAY,KAAK,gBAAgB;CAE1C;CAEA,IAAI,OAA+B;EACjC,OAAO,KAAK,WAAW,QAAS,KAAK,QAAQ,MAAM;CACrD;CAEA,IAAI,WAA0B;EAC5B,OAAO,KAAK,WAAW,YAAa;GAClC,OAAO,KAAK;GACZ,cAAc,CAAC,KAAK;GACpB,aAAa,EAAQ,KAAK;GAC1B,UAAU;GACV,iBAAiB;GACjB,eAAe;GACf,gBAAgB;GAChB,cAAc;GACd,SAAS;GACT,UAAU;GACV,cAAc;EAChB;CACF;CAEA,IAAI,oBAA4B;EAC9B,OAAO,KAAK,WAAW,qBAAqB,KAAK;CACnD;CAEA,IAAI,eAAwB;EAC1B,OAAO,KAAK,WAAW,gBAAgB,CAAC,KAAK;CAC/C;CAEA,gBAAyB;EAIvB,OAHI,KAAK,WAAW,gBACX,KAAK,UAAU,cAAc,IAE/B,KAAK;CACd;CAEA,iBAA0B;EAIxB,OAHI,KAAK,WAAW,iBACX,KAAK,UAAU,eAAe,IAEhC,KAAK;CACd;CAEA,aAAuB,GAA8C;EACnE,KAAK,WAAW,aAAa,CAAK;CACpC;CAEA,YACE,GACA,GACA,GACM;EACN,IAAI,GAAO;GACT,IAAM,IAAY,OAAO,OAAO,CAAK,CAAC,CAAC,KAAK,OAAO;GAEnD,AADA,KAAK,SAAS,CAAC,GACf,KAAK,yBAAyB,KAAW;EAC3C,OAEE,AADA,KAAK,SAAS,IACd,KAAK,yBAAyB;EAGhC,AAAI,KAAK,WAAW,eAClB,KAAK,UAAU,YAAY,GAAO,GAAS,CAAM;CAErD;CAEA,oBAA0B,CAE1B;CAEA,qBAAqB,GAAyB;EAC5C,KAAK,WAAW;CAClB;AAKF;AA/FG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA"}

package/dist/chunks/icon-FvKeXi61.js

@@ -0,0 +1,59 @@
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import { css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/components/icon/icon.css.ts
+var o = n`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    width: var(--md-icon-size, 24px);
+    height: var(--md-icon-size, 24px);
+    font-size: var(--md-icon-size, 24px);
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    user-select: none;
+    flex-shrink: 0;
+    color: inherit;
+  }
+
+  :host([filled]) {
+    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  }
+
+  ::slotted(svg) {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+`, s = class extends e {
+	constructor(...e) {
+		super(...e), this.name = "", this.filled = !1, this.size = "";
+	}
+	static {
+		this.styles = [e.styles, o];
+	}
+	updated(e) {
+		super.updated(e), e.has("size") && (this.size ? this.style.setProperty("--md-icon-size", isNaN(Number(this.size)) ? this.size : `${this.size}px`) : this.style.removeProperty("--md-icon-size"));
+	}
+	render() {
+		return r`<slot>${this.name}</slot>`;
+	}
+};
+t([a({ type: String })], s.prototype, "name", void 0), t([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "filled", void 0), t([a({ type: String })], s.prototype, "size", void 0), s = t([i("md-icon")], s);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=icon-FvKeXi61.js.map

package/dist/chunks/{icon-DrNqcNEL.js.map → icon-FvKeXi61.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-DrNqcNEL.js","names":[],"sources":["../../src/components/icon/icon.css.ts","../../src/components/icon/icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    width: var(--md-icon-size, 24px);\n    height: var(--md-icon-size, 24px);\n    font-size: var(--md-icon-size, 24px);\n    line-height: 1;\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    word-wrap: normal;\n    direction: ltr;\n    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;\n    font-weight: normal;\n    font-style: normal;\n    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n    user-select: none;\n    flex-shrink: 0;\n    color: inherit;\n  }\n\n  :host([filled]) {\n    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  }\n\n  ::slotted(svg) {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { iconStyles } from './icon.css.js';\n\n@customElement('md-icon')\nexport class MdIcon extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, iconStyles];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  filled = false;\n\n  @property({ type: String })\n  size = '';\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('size')) {\n      if (this.size) {\n        this.style.setProperty('--md-icon-size', isNaN(Number(this.size)) ? this.size : `${this.size}px`);\n      } else {\n        this.style.removeProperty('--md-icon-size');\n      }\n    }\n  }\n\n  override render() {\n    return html`<slot>${this.name}</slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon': MdIcon;\n  }\n}\n\n"],"mappings":";;;AAEA,IAAa,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCIb,IAAN,cAAqB,EAAc;AAAA;iBAIjC,KAAA,OAAA,IAGE,KAAA,SAAA,IAGF,KAAA,OAAA;AAAA;;AATkB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAU;AAAA;EAW1D,QAAiB,GAAyC;AACxD,UAAM,QAAQ,CAAiB,GAC3B,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACP,KAAK,MAAM,YAAY,kBAAkB,MAAM,OAAO,KAAK,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,KAAK,IAAA,IAAQ,IAEhG,KAAK,MAAM,eAAe,gBAAgB;AAAA,EAGhD;AAAA,EAEA,SAAkB;AAChB,WAAO,UAAa,KAAK,IAAA;AAAA,EAC3B;AACF;AAvBG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAV3B,IAAA,EAAA,CAAA,EAAc,SAAS,CAAA,GAAA,CAAA"}
+{"version":3,"file":"icon-FvKeXi61.js","names":[],"sources":["../../src/components/icon/icon.css.ts","../../src/components/icon/icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    width: var(--md-icon-size, 24px);\n    height: var(--md-icon-size, 24px);\n    font-size: var(--md-icon-size, 24px);\n    line-height: 1;\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    word-wrap: normal;\n    direction: ltr;\n    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;\n    font-weight: normal;\n    font-style: normal;\n    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n    user-select: none;\n    flex-shrink: 0;\n    color: inherit;\n  }\n\n  :host([filled]) {\n    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  }\n\n  ::slotted(svg) {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { iconStyles } from './icon.css.js';\n\n@customElement('md-icon')\nexport class MdIcon extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, iconStyles];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  filled = false;\n\n  @property({ type: String })\n  size = '';\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('size')) {\n      if (this.size) {\n        this.style.setProperty('--md-icon-size', isNaN(Number(this.size)) ? this.size : `${this.size}px`);\n      } else {\n        this.style.removeProperty('--md-icon-size');\n      }\n    }\n  }\n\n  override render() {\n    return html`<slot>${this.name}</slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon': MdIcon;\n  }\n}\n\n"],"mappings":";;;;AAEA,IAAa,IAAa,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCIhB,IAAN,cAAqB,EAAc;;EAUjC,aANA,KAAA,OAAA,IAGE,KAAA,SAAA,IAGF,KAAA,OAAA;;;EATkB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAU;;CAW1D,QAAiB,GAAyC;EAExD,AADA,MAAM,QAAQ,CAAiB,GAC3B,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACP,KAAK,MAAM,YAAY,kBAAkB,MAAM,OAAO,KAAK,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,KAAK,KAAK,GAAG,IAEhG,KAAK,MAAM,eAAe,gBAAgB;CAGhD;CAEA,SAAkB;EAChB,OAAO,CAAI,SAAS,KAAK,KAAK;CAChC;AACF;AAvBG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAV3B,IAAA,EAAA,CAAA,EAAc,SAAS,CAAA,GAAA,CAAA"}

package/dist/chunks/{icon-button-BQz73GLa.js → icon-button-CulnCZpZ.js}

@@ -1,10 +1,11 @@
-import { n, t as e } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import { css as l, html as s, nothing as r } from "lit";
-import { customElement as d, property as o } from "lit/decorators.js";
-var c = l`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import "./icon-FvKeXi61.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/icon-button/icon-button.css.ts
+var s = n`
   :host {
     display: inline-flex;
     outline: none;
@@ -106,83 +107,73 @@ var c = l`
     position: relative;
     z-index: 1;
   }
-`, t = class extends n {
-  constructor(...i) {
-    super(...i), this.variant = "standard", this.disabled = !1, this.toggle = !1, this.selected = !1, this.icon = "", this.selectedIcon = "", this.ariaLabelText = "", this.href = "", this.target = "", this.handleClick = (a) => {
-      if (this.disabled) {
-        a.preventDefault(), a.stopImmediatePropagation();
-        return;
-      }
-      this.toggle && (this.selected = !this.selected, this.emitEvent("change", { selected: this.selected }));
-    };
-  }
-  static {
-    this.styles = [n.styles, c];
-  }
-  render() {
-    const i = this.selected && this.selectedIcon ? this.selectedIcon : this.icon, a = s`
+`, c = class extends e {
+	constructor(...e) {
+		super(...e), this.variant = "standard", this.disabled = !1, this.toggle = !1, this.selected = !1, this.icon = "", this.selectedIcon = "", this.ariaLabelText = "", this.href = "", this.target = "", this.handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			this.toggle && (this.selected = !this.selected, this.emitEvent("change", { selected: this.selected }));
+		};
+	}
+	static {
+		this.styles = [e.styles, s];
+	}
+	render() {
+		let e = this.selected && this.selectedIcon ? this.selectedIcon : this.icon, t = r`
       <md-ripple ?disabled=${this.disabled}></md-ripple>
       <md-focus-ring></md-focus-ring>
       <span class="content">
         <slot>
-          ${i ? s`<md-icon name=${i} ?filled=${this.selected}></md-icon>` : r}
+          ${e ? r`<md-icon name=${e} ?filled=${this.selected}></md-icon>` : i}
         </slot>
       </span>
     `;
-    return this.href ? s`
+		return this.href ? r`
         <a
-          href=${this.disabled ? r : this.href}
-          target=${this.target || r}
-          aria-label=${this.ariaLabelText || r}
-          aria-pressed=${this.toggle ? this.selected ? "true" : "false" : r}
-          aria-disabled=${this.disabled ? "true" : r}
+          href=${this.disabled ? i : this.href}
+          target=${this.target || i}
+          aria-label=${this.ariaLabelText || i}
+          aria-pressed=${this.toggle ? this.selected ? "true" : "false" : i}
+          aria-disabled=${this.disabled ? "true" : i}
           tabindex=${this.disabled ? "-1" : "0"}
           @click=${this.handleClick}
         >
-          ${a}
+          ${t}
         </a>
-      ` : s`
+      ` : r`
       <button
-        aria-label=${this.ariaLabelText || r}
-        aria-pressed=${this.toggle ? this.selected ? "true" : "false" : r}
+        aria-label=${this.ariaLabelText || i}
+        aria-pressed=${this.toggle ? this.selected ? "true" : "false" : i}
         ?disabled=${this.disabled}
         @click=${this.handleClick}
       >
-        ${a}
+        ${t}
       </button>
     `;
-  }
-};
-e([o({
-  type: String,
-  reflect: !0
-})], t.prototype, "variant", void 0);
-e([o({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "disabled", void 0);
-e([o({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "toggle", void 0);
-e([o({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "selected", void 0);
-e([o({ type: String })], t.prototype, "icon", void 0);
-e([o({
-  type: String,
-  attribute: "selected-icon"
-})], t.prototype, "selectedIcon", void 0);
-e([o({
-  type: String,
-  attribute: "aria-label"
-})], t.prototype, "ariaLabelText", void 0);
-e([o({ type: String })], t.prototype, "href", void 0);
-e([o({ type: String })], t.prototype, "target", void 0);
-t = e([d("md-icon-button")], t);
-export {
-  t
+	}
 };
+t([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "toggle", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "selected", void 0), t([o({ type: String })], c.prototype, "icon", void 0), t([o({
+	type: String,
+	attribute: "selected-icon"
+})], c.prototype, "selectedIcon", void 0), t([o({
+	type: String,
+	attribute: "aria-label"
+})], c.prototype, "ariaLabelText", void 0), t([o({ type: String })], c.prototype, "href", void 0), t([o({ type: String })], c.prototype, "target", void 0), c = t([a("md-icon-button")], c);
+//#endregion
+export { c as t };
 
-//# sourceMappingURL=icon-button-BQz73GLa.js.map
+//# sourceMappingURL=icon-button-CulnCZpZ.js.map

package/dist/chunks/{icon-button-BQz73GLa.js.map → icon-button-CulnCZpZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-button-BQz73GLa.js","names":[],"sources":["../../src/components/icon-button/icon-button.css.ts","../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconButtonStyles = 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  }\n\n  button, a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-icon-button-border-radius, var(--md-button-border-radius, var(--md-sys-shape-corner-full, 50%)));\n    overflow: hidden;\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    text-decoration: none;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Filled --- */\n  :host([variant=\"filled\"]) button,\n  :host([variant=\"filled\"]) a {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  :host([variant=\"filled\"][selected]) button,\n  :host([variant=\"filled\"][selected]) a {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  /* --- Tonal --- */\n  :host([variant=\"tonal\"]) button,\n  :host([variant=\"tonal\"]) a {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) button,\n  :host([variant=\"outlined\"]) a {\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host([variant=\"outlined\"][selected]) button,\n  :host([variant=\"outlined\"][selected]) a {\n    background-color: var(--md-sys-color-inverse-surface, #313033);\n    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n    border: none;\n  }\n\n  /* --- Toggle / Selected for Standard --- */\n  :host(:not([variant])[selected]) button,\n  :host(:not([variant])[selected]) a,\n  :host([variant=\"standard\"][selected]) button,\n  :host([variant=\"standard\"][selected]) a {\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  /* --- Disabled --- */\n  :host([disabled]) button,\n  :host([disabled]) a {\n    cursor: not-allowed;\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"filled\"]) button,\n  :host([disabled][variant=\"filled\"]) a,\n  :host([disabled][variant=\"tonal\"]) button,\n  :host([disabled][variant=\"tonal\"]) a {\n    background-color: rgba(29, 27, 32, 0.12);\n  }\n\n  :host([disabled][variant=\"outlined\"]) button,\n  :host([disabled][variant=\"outlined\"]) a {\n    border-color: rgba(29, 27, 32, 0.12);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\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 { iconButtonStyles } from './icon-button.css.js';\n\nexport type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';\n\n@customElement('md-icon-button')\nexport class MdIconButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, iconButtonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: IconButtonVariant = 'standard';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  toggle = false;\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'selected-icon' })\n  selectedIcon = '';\n\n  @property({ type: String, attribute: 'aria-label' })\n  ariaLabelText = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    if (this.toggle) {\n      this.selected = !this.selected;\n      this.emitEvent('change', { selected: this.selected });\n    }\n  };\n\n  override render() {\n    const iconName = (this.selected && this.selectedIcon) ? this.selectedIcon : this.icon;\n\n    const content = html`\n      <md-ripple ?disabled=${this.disabled}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n      <span class=\"content\">\n        <slot>\n          ${iconName ? html`<md-icon name=${iconName} ?filled=${this.selected}></md-icon>` : nothing}\n        </slot>\n      </span>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-label=${this.ariaLabelText || nothing}\n          aria-pressed=${this.toggle ? (this.selected ? 'true' : 'false') : nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${content}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        aria-label=${this.ariaLabelText || nothing}\n        aria-pressed=${this.toggle ? (this.selected ? 'true' : 'false') : nothing}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon-button': MdIconButton;\n  }\n}\n\n"],"mappings":";;;;;;AAEA,IAAa,IAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCSnB,IAAN,cAA2B,EAAc;AAAA;iBAIjB,KAAA,UAAA,YAGlB,KAAA,WAAA,IAGF,KAAA,SAAA,IAGE,KAAA,WAAA,IAGJ,KAAA,OAAA,IAGQ,KAAA,eAAA,IAGC,KAAA,gBAAA,IAGT,KAAA,OAAA,IAGE,KAAA,SAAA,IAEc,KAAA,cAAA,CAAA,MAA4B;AACjD,UAAI,KAAK,UAAU;AACjB,QAAA,EAAM,eAAe,GACrB,EAAM,yBAAyB;AAC/B;AAAA,MACF;AAEA,MAAI,KAAK,WACP,KAAK,WAAW,CAAC,KAAK,UACtB,KAAK,UAAU,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC;AAAA,IAExD;AAAA;;AAxCyB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAgB;AAAA;EA0ChE,SAAkB;AAChB,UAAM,IAAY,KAAK,YAAY,KAAK,eAAgB,KAAK,eAAe,KAAK,MAE3E,IAAU;AAAA,6BACS,KAAK,QAAA;AAAA;AAAA;AAAA;AAAA,YAItB,IAAW,kBAAqB,CAAA,YAAoB,KAAK,QAAA,gBAAwB,CAAA;AAAA;AAAA;AAAA;AAKzF,WAAI,KAAK,OACA;AAAA;AAAA,iBAEI,KAAK,WAAW,IAAU,KAAK,IAAA;AAAA,mBAC7B,KAAK,UAAU,CAAA;AAAA,uBACX,KAAK,iBAAiB,CAAA;AAAA,yBACpB,KAAK,SAAU,KAAK,WAAW,SAAS,UAAW,CAAA;AAAA,0BAClD,KAAK,WAAW,SAAS,CAAA;AAAA,qBAC9B,KAAK,WAAW,OAAO,GAAA;AAAA,mBACzB,KAAK,WAAA;AAAA;AAAA,YAEZ,CAAA;AAAA;AAAA,UAKD;AAAA;AAAA,qBAEU,KAAK,iBAAiB,CAAA;AAAA,uBACpB,KAAK,SAAU,KAAK,WAAW,SAAS,UAAW,CAAA;AAAA,oBACtD,KAAK,QAAA;AAAA,iBACR,KAAK,WAAA;AAAA;AAAA,UAEZ,CAAA;AAAA;AAAA;AAAA,EAGR;AACF;AAhFG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,MAAA;AAGrD,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,MAAA;AAGlD,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AA5B3B,IAAA,EAAA,CAAA,EAAc,gBAAgB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"icon-button-CulnCZpZ.js","names":[],"sources":["../../src/components/icon-button/icon-button.css.ts","../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconButtonStyles = 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  }\n\n  button, a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-icon-button-border-radius, var(--md-button-border-radius, var(--md-sys-shape-corner-full, 50%)));\n    overflow: hidden;\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    text-decoration: none;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Filled --- */\n  :host([variant=\"filled\"]) button,\n  :host([variant=\"filled\"]) a {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  :host([variant=\"filled\"][selected]) button,\n  :host([variant=\"filled\"][selected]) a {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  /* --- Tonal --- */\n  :host([variant=\"tonal\"]) button,\n  :host([variant=\"tonal\"]) a {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) button,\n  :host([variant=\"outlined\"]) a {\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host([variant=\"outlined\"][selected]) button,\n  :host([variant=\"outlined\"][selected]) a {\n    background-color: var(--md-sys-color-inverse-surface, #313033);\n    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n    border: none;\n  }\n\n  /* --- Toggle / Selected for Standard --- */\n  :host(:not([variant])[selected]) button,\n  :host(:not([variant])[selected]) a,\n  :host([variant=\"standard\"][selected]) button,\n  :host([variant=\"standard\"][selected]) a {\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  /* --- Disabled --- */\n  :host([disabled]) button,\n  :host([disabled]) a {\n    cursor: not-allowed;\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"filled\"]) button,\n  :host([disabled][variant=\"filled\"]) a,\n  :host([disabled][variant=\"tonal\"]) button,\n  :host([disabled][variant=\"tonal\"]) a {\n    background-color: rgba(29, 27, 32, 0.12);\n  }\n\n  :host([disabled][variant=\"outlined\"]) button,\n  :host([disabled][variant=\"outlined\"]) a {\n    border-color: rgba(29, 27, 32, 0.12);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\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 { iconButtonStyles } from './icon-button.css.js';\n\nexport type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';\n\n@customElement('md-icon-button')\nexport class MdIconButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, iconButtonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: IconButtonVariant = 'standard';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  toggle = false;\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'selected-icon' })\n  selectedIcon = '';\n\n  @property({ type: String, attribute: 'aria-label' })\n  ariaLabelText = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    if (this.toggle) {\n      this.selected = !this.selected;\n      this.emitEvent('change', { selected: this.selected });\n    }\n  };\n\n  override render() {\n    const iconName = (this.selected && this.selectedIcon) ? this.selectedIcon : this.icon;\n\n    const content = html`\n      <md-ripple ?disabled=${this.disabled}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n      <span class=\"content\">\n        <slot>\n          ${iconName ? html`<md-icon name=${iconName} ?filled=${this.selected}></md-icon>` : nothing}\n        </slot>\n      </span>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-label=${this.ariaLabelText || nothing}\n          aria-pressed=${this.toggle ? (this.selected ? 'true' : 'false') : nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${content}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        aria-label=${this.ariaLabelText || nothing}\n        aria-pressed=${this.toggle ? (this.selected ? 'true' : 'false') : nothing}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon-button': MdIconButton;\n  }\n}\n\n"],"mappings":";;;;;;;AAEA,IAAa,IAAmB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCStB,IAAN,cAA2B,EAAc;;EA8BvB,aA1BM,KAAA,UAAA,YAGlB,KAAA,WAAA,IAGF,KAAA,SAAA,IAGE,KAAA,WAAA,IAGJ,KAAA,OAAA,IAGQ,KAAA,eAAA,IAGC,KAAA,gBAAA,IAGT,KAAA,OAAA,IAGE,KAAA,SAAA,IAEc,KAAA,eAAA,MAA4B;GACjD,IAAI,KAAK,UAAU;IAEjB,AADA,EAAM,eAAe,GACrB,EAAM,yBAAyB;IAC/B;GACF;GAEA,AAAI,KAAK,WACP,KAAK,WAAW,CAAC,KAAK,UACtB,KAAK,UAAU,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC;EAExD;;;EAxCyB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAgB;;CA0ChE,SAAkB;EAChB,IAAM,IAAY,KAAK,YAAY,KAAK,eAAgB,KAAK,eAAe,KAAK,MAE3E,IAAU,CAAI;6BACK,KAAK,SAAS;;;;YAI/B,IAAW,CAAI,iBAAiB,EAAS,WAAW,KAAK,SAAS,eAAe,EAAQ;;;;EAqBjG,OAhBI,KAAK,OACA,CAAI;;iBAEA,KAAK,WAAW,IAAU,KAAK,KAAK;mBAClC,KAAK,UAAU,EAAQ;uBACnB,KAAK,iBAAiB,EAAQ;yBAC5B,KAAK,SAAU,KAAK,WAAW,SAAS,UAAW,EAAQ;0BAC1D,KAAK,WAAW,SAAS,EAAQ;qBACtC,KAAK,WAAW,OAAO,IAAI;mBAC7B,KAAK,YAAY;;YAExB,EAAQ;;UAKT,CAAI;;qBAEM,KAAK,iBAAiB,EAAQ;uBAC5B,KAAK,SAAU,KAAK,WAAW,SAAS,UAAW,EAAQ;oBAC9D,KAAK,SAAS;iBACjB,KAAK,YAAY;;UAExB,EAAQ;;;CAGhB;AACF;AAhFG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAGrD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GAGlD,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GA5B3B,IAAA,EAAA,CAAA,EAAc,gBAAgB,CAAA,GAAA,CAAA"}