@universal-material/web 3.0.56 → 3.0.58

package/button/button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwMlB,CAAC"}
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4MlB,CAAC"}

package/button/button.styles.js

@@ -2,16 +2,20 @@ import { css } from 'lit';
 export const styles = css `
   :host,
   * {
+    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);
+    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);
     font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     box-sizing: border-box;
     outline: 0;
   }
 
+  :host(.force-focus-ring) .focus-ring,
   .focus-ring:focus-visible {
     --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
     animation: u-focus-pulse 500ms ease;
     animation-fill-mode: forwards;
-    outline-offset: 2px;
+    border-radius: var(--_focus-ring-border-radius);
+    outline-offset: var(--_focus-ring-outline-offset);
   }
 
   @keyframes u-focus-pulse {

package/button/button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwMzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  :host {\n    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-height: var(--u-common-button-height, 2.5rem);\n    --_common-button-padding: var(--u-common-button-padding, 24px);\n    --_common-button-icon-size: var(--u-common-button-icon-size, 1.125rem);\n    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n    --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);\n    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    height: var(--u-common-button-height, 40px);\n    font-size: var(--u-common-button-font-size);\n    font-weight: var(--u-common-button-font-weight);\n    padding-inline: var(--_common-button-padding);\n    box-sizing: border-box;\n  }\n\n  :host([variant=filled]),\n  :host([variant=filled][color=primary]) {\n    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=secondary]) {\n    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=tertiary]) {\n    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=error]) {\n    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:hover:not(:focus-within):not(:active)),\n    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  :host([variant=text]) {\n    color: var(--u-text-button-text-color, var(--_color-primary));\n  }\n\n  :host([variant=outlined]) {\n    color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n    border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n    color: var(--u-elevated-button-text-color, var(--_color-primary));\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-button-disabled-border-opacity, 0.12))) !important;\n  }\n\n  @media (hover: hover) {\n    :host([variant=elevated]:hover) {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n  :host([has-icon]) {\n    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n  }\n\n  :host(:not([has-icon])) .icon {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_common-button-icon-size);\n    padding-inline-end: var(--_common-button-icon-margin);\n    margin-inline-end: auto;\n  }\n\n  :host([trailing-icon]) .icon {\n    padding-inline: var(--_common-button-icon-margin) 0;\n    margin-inline: auto 0;\n  }\n`;\n"]}
+{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4MzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  :host(.force-focus-ring) .focus-ring,\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    border-radius: var(--_focus-ring-border-radius);\n    outline-offset: var(--_focus-ring-outline-offset);\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  :host {\n    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-height: var(--u-common-button-height, 2.5rem);\n    --_common-button-padding: var(--u-common-button-padding, 24px);\n    --_common-button-icon-size: var(--u-common-button-icon-size, 1.125rem);\n    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n    --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);\n    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    height: var(--u-common-button-height, 40px);\n    font-size: var(--u-common-button-font-size);\n    font-weight: var(--u-common-button-font-weight);\n    padding-inline: var(--_common-button-padding);\n    box-sizing: border-box;\n  }\n\n  :host([variant=filled]),\n  :host([variant=filled][color=primary]) {\n    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=secondary]) {\n    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=tertiary]) {\n    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=error]) {\n    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:hover:not(:focus-within):not(:active)),\n    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  :host([variant=text]) {\n    color: var(--u-text-button-text-color, var(--_color-primary));\n  }\n\n  :host([variant=outlined]) {\n    color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n    border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n    color: var(--u-elevated-button-text-color, var(--_color-primary));\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-button-disabled-border-opacity, 0.12))) !important;\n  }\n\n  @media (hover: hover) {\n    :host([variant=elevated]:hover) {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n  :host([has-icon]) {\n    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n  }\n\n  :host(:not([has-icon])) .icon {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_common-button-icon-size);\n    padding-inline-end: var(--_common-button-icon-margin);\n    margin-inline-end: auto;\n  }\n\n  :host([trailing-icon]) .icon {\n    padding-inline: var(--_common-button-icon-margin) 0;\n    margin-inline: auto 0;\n  }\n`;\n"]}

package/button/fab.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fab.styles.d.ts","sourceRoot":"","sources":["../../src/button/fab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwLlB,CAAC"}
+{"version":3,"file":"fab.styles.d.ts","sourceRoot":"","sources":["../../src/button/fab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4LlB,CAAC"}

package/button/fab.styles.js

@@ -2,16 +2,20 @@ import { css } from 'lit';
 export const styles = css `
   :host,
   * {
+    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);
+    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);
     font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     box-sizing: border-box;
     outline: 0;
   }
 
+  :host(.force-focus-ring) .focus-ring,
   .focus-ring:focus-visible {
     --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
     animation: u-focus-pulse 500ms ease;
     animation-fill-mode: forwards;
-    outline-offset: 2px;
+    border-radius: var(--_focus-ring-border-radius);
+    outline-offset: var(--_focus-ring-outline-offset);
   }
 
   @keyframes u-focus-pulse {

package/button/fab.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.styles.js","sourceRoot":"","sources":["../../src/button/fab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwLzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  :host {\n    aspect-ratio: 1;\n    --u-elevation-level: var(--u-fab-button-elevation-level, 3);\n  }\n\n  :host([lowered]) {\n    --u-elevation-level: var(--u-fab-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n    :host(:hover:not(:focus-within):not(:active)[lowered]) {\n      --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n    }\n  }\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n  }\n  :host([size=small]) {\n    width: var(--u-fab-button-small-size, 40px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([size=large]) {\n    width: var(--u-fab-button-medium-size, 96px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));\n  }\n\n  :host([extended]),\n  :host([size=medium]) {\n    width: var(--u-fab-button-medium-size, 56px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));\n  }\n\n  :host([size=large]) .icon {\n    font-size: var(--u-fab-button-icon-size, 2rem);\n  }\n\n  :host([extended]) .icon,\n  :host([size=small]) .icon,\n  :host([size=medium]) .icon {\n    font-size: var(--u-fab-button-icon-size, 1.5rem);\n  }\n\n  :host([extended]) {\n    width: auto;\n    height: var(--u-extended-fab-button-height, 56px);\n    aspect-ratio: auto;\n    min-width: var(--u-extended-fab-button-min-width, 80px);\n    padding-inline: var(--u-extended-fab-button-padding, 16px 24px);\n  }\n\n  :host([extended]) .icon {\n    margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);\n  }\n\n  :host([color=primary]) {\n    background-color: var(--u-fab-button-primary-background-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n    color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n  }\n\n  :host([color=secondary]) {\n    background-color: var(--u-fab-button-secondary-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([color=tertiary]) {\n    background-color: var(--u-fab-button-tertiary-background-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n    color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n  }\n\n  :host([color=branded]),\n  :host([color=surface]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n    color: var(--u-fab-button-surface-text-color, var(--_color-primary));\n  }\n\n  :host([color=branded][lowered]),\n  :host([color=surface][lowered]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n  }\n`;\n"]}
+{"version":3,"file":"fab.styles.js","sourceRoot":"","sources":["../../src/button/fab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  :host(.force-focus-ring) .focus-ring,\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    border-radius: var(--_focus-ring-border-radius);\n    outline-offset: var(--_focus-ring-outline-offset);\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  :host {\n    aspect-ratio: 1;\n    --u-elevation-level: var(--u-fab-button-elevation-level, 3);\n  }\n\n  :host([lowered]) {\n    --u-elevation-level: var(--u-fab-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n    :host(:hover:not(:focus-within):not(:active)[lowered]) {\n      --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n    }\n  }\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n  }\n  :host([size=small]) {\n    width: var(--u-fab-button-small-size, 40px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([size=large]) {\n    width: var(--u-fab-button-medium-size, 96px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));\n  }\n\n  :host([extended]),\n  :host([size=medium]) {\n    width: var(--u-fab-button-medium-size, 56px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));\n  }\n\n  :host([size=large]) .icon {\n    font-size: var(--u-fab-button-icon-size, 2rem);\n  }\n\n  :host([extended]) .icon,\n  :host([size=small]) .icon,\n  :host([size=medium]) .icon {\n    font-size: var(--u-fab-button-icon-size, 1.5rem);\n  }\n\n  :host([extended]) {\n    width: auto;\n    height: var(--u-extended-fab-button-height, 56px);\n    aspect-ratio: auto;\n    min-width: var(--u-extended-fab-button-min-width, 80px);\n    padding-inline: var(--u-extended-fab-button-padding, 16px 24px);\n  }\n\n  :host([extended]) .icon {\n    margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);\n  }\n\n  :host([color=primary]) {\n    background-color: var(--u-fab-button-primary-background-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n    color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n  }\n\n  :host([color=secondary]) {\n    background-color: var(--u-fab-button-secondary-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([color=tertiary]) {\n    background-color: var(--u-fab-button-tertiary-background-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n    color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n  }\n\n  :host([color=branded]),\n  :host([color=surface]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n    color: var(--u-fab-button-surface-text-color, var(--_color-primary));\n  }\n\n  :host([color=branded][lowered]),\n  :host([color=surface][lowered]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n  }\n`;\n"]}

package/button/icon-button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.styles.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4KlB,CAAC"}
+{"version":3,"file":"icon-button.styles.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgLlB,CAAC"}

package/button/icon-button.styles.js

@@ -2,16 +2,20 @@ import { css } from 'lit';
 export const styles = css `
   :host,
   * {
+    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);
+    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);
     font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     box-sizing: border-box;
     outline: 0;
   }
 
+  :host(.force-focus-ring) .focus-ring,
   .focus-ring:focus-visible {
     --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
     animation: u-focus-pulse 500ms ease;
     animation-fill-mode: forwards;
-    outline-offset: 2px;
+    border-radius: var(--_focus-ring-border-radius);
+    outline-offset: var(--_focus-ring-outline-offset);
   }
 
   @keyframes u-focus-pulse {

package/button/icon-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  :host {\n    --_icon-button-size: var(--u-icon-button-size, 2.5rem);\n    --_color-surface-container-highest: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n    width: var(--_icon-button-size);\n    height: var(--_icon-button-size);\n    border-radius: var(--u-icon-button-shape-corner, 9999px);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--u-icon-button-icon-size, 1.5rem);\n  }\n  .icon.icon-selected {\n    display: none;\n  }\n\n  :host([selected][has-selection-icon]) .icon:not(.icon-selected) {\n    display: none;\n  }\n  :host([selected][has-selection-icon]) .icon.icon-selected {\n    display: inline-block;\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([has-selection-icon])) {\n    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]),\n  :host([variant=tonal]:not([has-selection-icon])) {\n    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=standard]),\n  :host([variant=outlined]) {\n    color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n    color: var(--u-outlined-icon-button-color, var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n    background-color: var(--u-standard-icon-button-selected-background-color, transparent);\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-icon-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-icon-button-disabled-border-opacity, 0.12))) !important;\n  }\n`;\n"]}
+{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  :host(.force-focus-ring) .focus-ring,\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    border-radius: var(--_focus-ring-border-radius);\n    outline-offset: var(--_focus-ring-outline-offset);\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  :host {\n    --_icon-button-size: var(--u-icon-button-size, 2.5rem);\n    --_color-surface-container-highest: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n    width: var(--_icon-button-size);\n    height: var(--_icon-button-size);\n    border-radius: var(--u-icon-button-shape-corner, 9999px);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--u-icon-button-icon-size, 1.5rem);\n  }\n  .icon.icon-selected {\n    display: none;\n  }\n\n  :host([selected][has-selection-icon]) .icon:not(.icon-selected) {\n    display: none;\n  }\n  :host([selected][has-selection-icon]) .icon.icon-selected {\n    display: inline-block;\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([has-selection-icon])) {\n    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]),\n  :host([variant=tonal]:not([has-selection-icon])) {\n    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=standard]),\n  :host([variant=outlined]) {\n    color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n    color: var(--u-outlined-icon-button-color, var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n    background-color: var(--u-standard-icon-button-selected-background-color, transparent);\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-icon-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-icon-button-disabled-border-opacity, 0.12))) !important;\n  }\n`;\n"]}

package/chip/chip.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.styles.d.ts","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsPlB,CAAC"}
+{"version":3,"file":"chip.styles.d.ts","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0PlB,CAAC"}

package/chip/chip.styles.js

@@ -2,16 +2,20 @@ import { css } from 'lit';
 export const styles = css `
   :host,
   * {
+    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);
+    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);
     font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     box-sizing: border-box;
     outline: 0;
   }
 
+  :host(.force-focus-ring) .focus-ring,
   .focus-ring:focus-visible {
     --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
     animation: u-focus-pulse 500ms ease;
     animation-fill-mode: forwards;
-    outline-offset: 2px;
+    border-radius: var(--_focus-ring-border-radius);
+    outline-offset: var(--_focus-ring-outline-offset);
   }
 
   @keyframes u-focus-pulse {

package/chip/chip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsPzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host {\n    --_height: var(--u-chip-height, 32px);\n    --_outline-width: var(--u-chip-outline-width, 1px);\n    --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n    --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));\n    --_gap: var(--u-chip-gap, 8px);\n    --_icon-size: var(--u-chip-icon-size, 1.125rem);\n    --_remove-button-margin: var(--u-chip-remove-button-margin, 2px);\n    --_remove-button-size: calc(var(--_height) - var(--_remove-button-margin) * 2);\n    --_selected-icon-color: var(--u-chip-selected-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n    display: inline-block;\n    height: var(--_height);\n    border-radius: var(--_shape);\n  }\n\n  :host(:not([disabled]):not([elevated]):not([selected])) .outline {\n    border: var(--_outline-width) solid var(--_outline-color);\n  }\n\n  :host([elevated]:not([disabled])) {\n    --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host([elevated]:not([disabled]):hover) {\n      --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);\n    }\n  }\n  .outline {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n    height: 100%;\n    padding-inline: var(--u-chip-padding, 16px);\n    gap: var(--_gap);\n  }\n\n  .icon {\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--_icon-size);\n  }\n\n  .leading {\n    color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  .selected {\n    color: var(--_selected-icon-color);\n  }\n\n  .trailing {\n    color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  .remove-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: var(--_remove-button-size);\n    height: var(--_remove-button-size);\n    cursor: pointer;\n    padding: 0;\n    margin: 0;\n    margin-inline: calc((var(--_remove-button-size) - var(--_icon-size)) * -0.5);\n    background: gray;\n    border: none;\n    border-radius: var(--u-chip-remove-button-border-radius, var(--u-shape-corner-full, 9999px));\n    background: none;\n    appearance: none;\n    outline: 0;\n    outline-offset: 0;\n    z-index: 1;\n  }\n\n  ::slotted([slot=remove-icon]),\n  ::slotted([slot=selected-icon]),\n  ::slotted([slot=leading-icon]),\n  ::slotted([slot=trailing-icon]) {\n    font-size: inherit !important;\n  }\n\n  slot[name=selected-icon] {\n    display: none;\n  }\n\n  :host(:not([clickable]):not([toggle])) .button {\n    cursor: auto;\n  }\n\n  :host([selected]:not([hide-selected-icon])) .leading {\n    display: none;\n  }\n  :host([selected]:not([hide-selected-icon])) slot[name=selected-icon] {\n    display: contents;\n  }\n\n  .default-select-icon {\n    display: contents;\n  }\n\n  :host([has-selected-icon]) .default-select-icon {\n    display: none;\n  }\n\n  :host([selected]:not([disabled])) {\n    background-color: var(--u-chip-selected-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n  }\n  :host([selected]:not([disabled])) .leading {\n    color: var(--u-chip-selected-leading-icon-color, var(--_selected-icon-color));\n  }\n  :host([selected]:not([disabled])) .trailing {\n    color: var(--u-chip-selected-trailing-icon-color, var(--_selected-icon-color));\n  }\n\n  :host([has-leading-icon]) .container,\n  :host([selected]:not([hide-selected-icon])) .container {\n    padding-inline-start: var(--_gap);\n  }\n\n  :host([has-trailing-icon]) .container,\n  :host([removable]) .container {\n    padding-inline-end: var(--_gap);\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host([hide-selected-icon]) .selected,\n  :host(:not([selected])) .selected {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing {\n    display: none;\n  }\n\n  [part=default-selected-icon] {\n    display: contents;\n  }\n`;\n"]}
+{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0PzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  :host(.force-focus-ring) .focus-ring,\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    border-radius: var(--_focus-ring-border-radius);\n    outline-offset: var(--_focus-ring-outline-offset);\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host {\n    --_height: var(--u-chip-height, 32px);\n    --_outline-width: var(--u-chip-outline-width, 1px);\n    --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n    --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));\n    --_gap: var(--u-chip-gap, 8px);\n    --_icon-size: var(--u-chip-icon-size, 1.125rem);\n    --_remove-button-margin: var(--u-chip-remove-button-margin, 2px);\n    --_remove-button-size: calc(var(--_height) - var(--_remove-button-margin) * 2);\n    --_selected-icon-color: var(--u-chip-selected-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n    display: inline-block;\n    height: var(--_height);\n    border-radius: var(--_shape);\n  }\n\n  :host(:not([disabled]):not([elevated]):not([selected])) .outline {\n    border: var(--_outline-width) solid var(--_outline-color);\n  }\n\n  :host([elevated]:not([disabled])) {\n    --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host([elevated]:not([disabled]):hover) {\n      --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);\n    }\n  }\n  .outline {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n    height: 100%;\n    padding-inline: var(--u-chip-padding, 16px);\n    gap: var(--_gap);\n  }\n\n  .icon {\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--_icon-size);\n  }\n\n  .leading {\n    color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  .selected {\n    color: var(--_selected-icon-color);\n  }\n\n  .trailing {\n    color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  .remove-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: var(--_remove-button-size);\n    height: var(--_remove-button-size);\n    cursor: pointer;\n    padding: 0;\n    margin: 0;\n    margin-inline: calc((var(--_remove-button-size) - var(--_icon-size)) * -0.5);\n    background: gray;\n    border: none;\n    border-radius: var(--u-chip-remove-button-border-radius, var(--u-shape-corner-full, 9999px));\n    background: none;\n    appearance: none;\n    outline: 0;\n    outline-offset: 0;\n    z-index: 1;\n  }\n\n  ::slotted([slot=remove-icon]),\n  ::slotted([slot=selected-icon]),\n  ::slotted([slot=leading-icon]),\n  ::slotted([slot=trailing-icon]) {\n    font-size: inherit !important;\n  }\n\n  slot[name=selected-icon] {\n    display: none;\n  }\n\n  :host(:not([clickable]):not([toggle])) .button {\n    cursor: auto;\n  }\n\n  :host([selected]:not([hide-selected-icon])) .leading {\n    display: none;\n  }\n  :host([selected]:not([hide-selected-icon])) slot[name=selected-icon] {\n    display: contents;\n  }\n\n  .default-select-icon {\n    display: contents;\n  }\n\n  :host([has-selected-icon]) .default-select-icon {\n    display: none;\n  }\n\n  :host([selected]:not([disabled])) {\n    background-color: var(--u-chip-selected-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n  }\n  :host([selected]:not([disabled])) .leading {\n    color: var(--u-chip-selected-leading-icon-color, var(--_selected-icon-color));\n  }\n  :host([selected]:not([disabled])) .trailing {\n    color: var(--u-chip-selected-trailing-icon-color, var(--_selected-icon-color));\n  }\n\n  :host([has-leading-icon]) .container,\n  :host([selected]:not([hide-selected-icon])) .container {\n    padding-inline-start: var(--_gap);\n  }\n\n  :host([has-trailing-icon]) .container,\n  :host([removable]) .container {\n    padding-inline-end: var(--_gap);\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host([hide-selected-icon]) .selected,\n  :host(:not([selected])) .selected {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing {\n    display: none;\n  }\n\n  [part=default-selected-icon] {\n    display: contents;\n  }\n`;\n"]}

package/chip-field/chip-field.d.ts

@@ -13,8 +13,7 @@ export declare class UmChipField extends UmTextFieldBase {
     set value(value: any[]);
     private setFormValue;
     focus(): void;
-    get empty(): boolean;
-    protected renderContent(): HTMLTemplateResult;
+    protected renderControl(): HTMLTemplateResult;
     add(value: any): void;
     private getItemLabel;
 }

package/chip-field/chip-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip-field.d.ts","sourceRoot":"","sources":["../../src/chip-field/chip-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAC9C,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAEc,KAAK,EAAG,gBAAgB,CAAC;IAC7B,IAAI,EAAG,MAAM,CAAC;IACC,MAAM,UAAS;IAE1C,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAChD,mBAAmB,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAI1D,IAAI,KAAK,IAAI,GAAG,EAAE,CAEjB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,EAIrB;IAED,OAAO,CAAC,YAAY;IAUX,KAAK;IAId,IACa,KAAK,IAAI,OAAO,CAE5B;cAEkB,aAAa,IAAI,kBAAkB;IAgDtD,GAAG,CAAC,KAAK,EAAE,GAAG;IAoCd,OAAO,CAAC,YAAY;CAKrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"chip-field.d.ts","sourceRoot":"","sources":["../../src/chip-field/chip-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAC9C,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAEc,KAAK,EAAG,gBAAgB,CAAC;IAC7B,IAAI,EAAG,MAAM,CAAC;IACC,MAAM,UAAS;IAE1C,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAChD,mBAAmB,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAI1D,IAAI,KAAK,IAAI,GAAG,EAAE,CAEjB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,EAGrB;IAED,OAAO,CAAC,YAAY;IAUX,KAAK;cAIK,aAAa,IAAI,kBAAkB;IAqDtD,GAAG,CAAC,KAAK,EAAE,GAAG;IA6Cd,OAAO,CAAC,YAAY;CAKrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/chip-field/chip-field.js

@@ -15,10 +15,10 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _UmChipField_instances, _UmChipField_value, _UmChipField_getChips, _UmChipField_handleBlur, _UmChipField_handleKeyDown, _UmChipField_removeChip, _UmChipField_updated, _UmChipField_dispatchRemoveEvent;
+var _UmChipField_instances, _UmChipField_value, _UmChipField_getChips, _UmChipField_handleBlur, _UmChipField_handleInput, _UmChipField_handleKeyDown, _UmChipField_removeChip, _UmChipField_changed, _UmChipField_valueUpdate, _UmChipField_setEmpty, _UmChipField_dispatchRemoveEvent;
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { styles } from './chip-field.styles.js';
 import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
 let UmChipField = class UmChipField extends UmTextFieldBase {
@@ -33,7 +33,7 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
                 return;
             }
             this.value.splice(index, 1);
-            __classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_updated).call(this);
+            __classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_changed).call(this);
         });
     }
     get value() {
@@ -41,8 +41,7 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
     }
     set value(value) {
         __classPrivateFieldSet(this, _UmChipField_value, value, "f");
-        this.setFormValue();
-        this.requestUpdate();
+        __classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_valueUpdate).call(this);
     }
     setFormValue() {
         const formData = new FormData();
@@ -54,10 +53,7 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
     focus() {
         this.input.focus();
     }
-    get empty() {
-        return !this.value?.length && !this.input?.value;
-    }
-    renderContent() {
+    renderControl() {
         return html `
       ${(__classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_getChips).call(this))}
       <input 
@@ -67,11 +63,12 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
         ?disabled=${this.disabled}
         placeholder=${this.placeholder || nothing}
         @blur=${__classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_handleBlur)}
-        @keydown=${__classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_handleKeyDown)}/>`;
+        @keydown=${__classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_handleKeyDown)}
+        @input=${__classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_handleInput)}/>`;
     }
     add(value) {
         this.value.push(value);
-        __classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_updated).call(this);
+        __classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_changed).call(this);
     }
     getItemLabel(item) {
         return this.formatter
@@ -100,6 +97,9 @@ _UmChipField_getChips = function _UmChipField_getChips() {
 _UmChipField_handleBlur = function _UmChipField_handleBlur() {
     this.requestUpdate();
 };
+_UmChipField_handleInput = function _UmChipField_handleInput() {
+    __classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_setEmpty).call(this);
+};
 _UmChipField_handleKeyDown = function _UmChipField_handleKeyDown(e) {
     if (!this.manual && e.key === 'Enter') {
         this.add(this.input.value);
@@ -111,10 +111,17 @@ _UmChipField_handleKeyDown = function _UmChipField_handleKeyDown(e) {
         return;
     }
 };
-_UmChipField_updated = function _UmChipField_updated() {
+_UmChipField_changed = function _UmChipField_changed() {
+    __classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_valueUpdate).call(this);
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+};
+_UmChipField_valueUpdate = function _UmChipField_valueUpdate() {
+    __classPrivateFieldGet(this, _UmChipField_instances, "m", _UmChipField_setEmpty).call(this);
     this.setFormValue();
     this.requestUpdate();
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+};
+_UmChipField_setEmpty = function _UmChipField_setEmpty() {
+    this.empty = !this.value?.length && !this.input.value;
 };
 _UmChipField_dispatchRemoveEvent = function _UmChipField_dispatchRemoveEvent(index) {
     const item = this.value[index];
@@ -138,9 +145,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UmChipField.prototype, "manual", void 0);
-__decorate([
-    state()
-], UmChipField.prototype, "empty", null);
 UmChipField = __decorate([
     customElement('u-chip-field')
 ], UmChipField);

package/chip-field/chip-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip-field.js","sourceRoot":"","sources":["../../src/chip-field/chip-field.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1E,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;;QAQsB,WAAM,GAAG,KAAK,CAAC;QAK1C,6BAAgB,EAAE,EAAC;QAmFnB,kCAAc,CAAC,KAAa,EAAE,EAAE,CAC9B,GAAG,EAAE;YACH,MAAM,gBAAgB,GAAG,uBAAA,IAAI,gEAAqB,MAAzB,IAAI,EAAsB,KAAK,CAAC,CAAC;YAE1D,IAAI,gBAAgB,EAAE,CAAC;gBACrB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAC5B,uBAAA,IAAI,oDAAS,MAAb,IAAI,CAAW,CAAC;QAClB,CAAC,EAAA;IA0BL,CAAC;IArHC,IAAI,KAAK;QACP,OAAO,uBAAA,IAAI,0BAAO,CAAC;IACrB,CAAC;IACD,IAAI,KAAK,CAAC,KAAY;QACpB,uBAAA,IAAI,sBAAU,KAAK,MAAA,CAAC;QACpB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,YAAY;QAClB,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;QAEhC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;QACtD,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC/C,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAGD,IAAa,KAAK;QAChB,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC;IACnD,CAAC;IAEkB,aAAa;QAE9B,OAAO,IAAI,CAAA;QACP,CAAC,uBAAA,IAAI,qDAAU,MAAd,IAAI,CAAY,CAAC;;;aAGb,IAAI,CAAC,EAAE,IAAI,OAAO;;oBAEX,IAAI,CAAC,QAAQ;sBACX,IAAI,CAAC,WAAW,IAAI,OAAO;gBACjC,uBAAA,IAAI,uDAAY;mBACb,uBAAA,IAAI,0DAAe,IAAI,CAAA;IACxC,CAAC;IAoCD,GAAG,CAAC,KAAU;QACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvB,uBAAA,IAAI,oDAAS,MAAb,IAAI,CAAW,CAAC;IAClB,CAAC;IAiCO,YAAY,CAAC,IAAS;QAC5B,OAAO,IAAI,CAAC,SAAS;YACnB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YACtB,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;IACtB,CAAC;;;;;;IAzEC,OAAO,IAAI,CAAC,KAAK;QACf,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QACpB,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB;YAC1C,CAAC,CAAC,IAAI,CAAA,6BAA6B,UAAU,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,SAAS;YACtF,CAAC,CAAC,OAAO,CAAA;QAEX,OAAO,IAAI,CAAA;;;sBAGG,uBAAA,IAAI,+BAAY,MAAhB,IAAI,EAAa,KAAK,CAAC;cAC/B,WAAW;cACX,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBACjB,CAAC;IACf,CAAC,CAAC,CAAC;AACP,CAAC;;IAGC,IAAI,CAAC,aAAa,EAAE,CAAC;AACvB,CAAC;iEAEc,CAAgB;IAC7B,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;QACtC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACtB,OAAO;IACT,CAAC;IAED,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;QAC9F,uBAAA,IAAI,+BAAY,MAAhB,IAAI,EAAa,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;QAC1C,OAAO;IACT,CAAC;AACH,CAAC;;IAoBC,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;AAC3D,CAAC;6EAEoB,KAAa;IAChC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE/B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;QACtC,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,IAAI;KACb,CAAC,CAAC;IAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE1B,OAAO,KAAK,CAAC,gBAAgB,CAAC;AAChC,CAAC;AA5He,kBAAM,GAAmB;IACvC,eAAe,CAAC,MAAM;IACtB,MAAM;CACP,AAHqB,CAGpB;AAEc;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAC7B;IAAX,QAAQ,EAAE;yCAAe;AACC;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;2CAAgB;AA+B1C;IADC,KAAK,EAAE;wCAGP;AAzCU,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoIvB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\n\nimport { styles } from './chip-field.styles.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\n@customElement('u-chip-field')\nexport class UmChipField extends UmTextFieldBase {\n  static override styles: CSSResultGroup = [\n    UmTextFieldBase.styles,\n    styles\n  ];\n\n  @query('input') input!: HTMLInputElement;\n  @property() name!: string;\n  @property({type: Boolean}) manual = false;\n\n  formatter: ((value: any) => string) | undefined;\n  leadingIconTemplate: ((value: any) => string) | undefined;\n\n  #value: any[] = [];\n\n  get value(): any[] {\n    return this.#value;\n  }\n  set value(value: any[]) {\n    this.#value = value;\n    this.setFormValue();\n    this.requestUpdate();\n  }\n\n  private setFormValue() {\n    const formData = new FormData();\n\n    for (const item of this.value) {\n      formData.append(this.name, this.getItemLabel(item));\n    }\n\n    this.elementInternals.setFormValue(formData);\n  }\n\n  override focus() {\n    this.input.focus();\n  }\n\n  @state()\n  override get empty(): boolean {\n    return !this.value?.length && !this.input?.value;\n  }\n\n  protected override renderContent(): HTMLTemplateResult {\n\n    return html`\n      ${(this.#getChips())}\n      <input \n        part=\"input\"\n        id=${this.id || nothing}\n        aria-labelledby=\"label\"\n        ?disabled=${this.disabled}\n        placeholder=${this.placeholder || nothing}\n        @blur=${this.#handleBlur}\n        @keydown=${this.#handleKeyDown}/>`\n  }\n\n  #getChips() {\n    return this.value\n      ?.map((item, index) => {\n        const leadingIcon = this.leadingIconTemplate\n          ? html`<span slot=\"leading-icon\">${unsafeHTML(this.leadingIconTemplate(item))}</span>`\n          : nothing\n\n        return html`\n          <u-chip\n            removable\n            @remove=${this.#removeChip(index)}>\n            ${leadingIcon}\n            ${this.getItemLabel(item)}\n          </u-chip>`;\n      });\n  }\n\n  #handleBlur() {\n    this.requestUpdate();\n  }\n\n  #handleKeyDown(e: KeyboardEvent) {\n    if (!this.manual && e.key === 'Enter') {\n      this.add(this.input.value);\n      this.input.value = '';\n      return;\n    }\n\n    if (e.key === 'Backspace' && this.input.selectionStart === 0 && this.input.selectionEnd === 0) {\n      this.#removeChip(this.value.length - 1)();\n      return;\n    }\n  }\n\n  add(value: any) {\n    this.value.push(value);\n    this.#updated();\n  }\n\n  #removeChip = (index: number) =>\n    () => {\n      const defaultPrevented = this.#dispatchRemoveEvent(index);\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.value.splice(index, 1);\n      this.#updated();\n    }\n\n  #updated() {\n    this.setFormValue();\n    this.requestUpdate();\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n\n  #dispatchRemoveEvent(index: number): boolean {\n    const item = this.value[index];\n\n    const event = new CustomEvent('remove', {\n      cancelable: true,\n      detail: item\n    });\n\n    this.dispatchEvent(event);\n\n    return event.defaultPrevented;\n  }\n\n  private getItemLabel(item: any) {\n    return this.formatter\n      ? this.formatter(item)\n      : item.toString();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-chip-field': UmChipField;\n  }\n}\n"]}
+{"version":3,"file":"chip-field.js","sourceRoot":"","sources":["../../src/chip-field/chip-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles } from './chip-field.styles.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\n@customElement('u-chip-field')\nexport class UmChipField extends UmTextFieldBase {\n  static override styles: CSSResultGroup = [\n    UmTextFieldBase.styles,\n    styles\n  ];\n\n  @query('input') input!: HTMLInputElement;\n  @property() name!: string;\n  @property({type: Boolean}) manual = false;\n\n  formatter: ((value: any) => string) | undefined;\n  leadingIconTemplate: ((value: any) => string) | undefined;\n\n  #value: any[] = [];\n\n  get value(): any[] {\n    return this.#value;\n  }\n  set value(value: any[]) {\n    this.#value = value;\n    this.#valueUpdate();\n  }\n\n  private setFormValue() {\n    const formData = new FormData();\n\n    for (const item of this.value) {\n      formData.append(this.name, this.getItemLabel(item));\n    }\n\n    this.elementInternals.setFormValue(formData);\n  }\n\n  override focus() {\n    this.input.focus();\n  }\n\n  protected override renderControl(): HTMLTemplateResult {\n\n    return html`\n      ${(this.#getChips())}\n      <input \n        part=\"input\"\n        id=${this.id || nothing}\n        aria-labelledby=\"label\"\n        ?disabled=${this.disabled}\n        placeholder=${this.placeholder || nothing}\n        @blur=${this.#handleBlur}\n        @keydown=${this.#handleKeyDown}\n        @input=${this.#handleInput}/>`\n  }\n\n  #getChips() {\n    return this.value\n      ?.map((item, index) => {\n        const leadingIcon = this.leadingIconTemplate\n          ? html`<span slot=\"leading-icon\">${unsafeHTML(this.leadingIconTemplate(item))}</span>`\n          : nothing\n\n        return html`\n          <u-chip\n            removable\n            @remove=${this.#removeChip(index)}>\n            ${leadingIcon}\n            ${this.getItemLabel(item)}\n          </u-chip>`;\n      });\n  }\n\n  #handleBlur() {\n    this.requestUpdate();\n  }\n\n  #handleInput() {\n    this.#setEmpty();\n  }\n\n  #handleKeyDown(e: KeyboardEvent) {\n    if (!this.manual && e.key === 'Enter') {\n      this.add(this.input.value);\n      this.input.value = '';\n      return;\n    }\n\n    if (e.key === 'Backspace' && this.input.selectionStart === 0 && this.input.selectionEnd === 0) {\n      this.#removeChip(this.value.length - 1)();\n      return;\n    }\n  }\n\n  add(value: any) {\n    this.value.push(value);\n    this.#changed();\n  }\n\n  #removeChip = (index: number) =>\n    () => {\n      const defaultPrevented = this.#dispatchRemoveEvent(index);\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.value.splice(index, 1);\n      this.#changed();\n    }\n\n  #changed() {\n    this.#valueUpdate();\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n\n  #valueUpdate() {\n    this.#setEmpty();\n    this.setFormValue();\n    this.requestUpdate();\n  }\n\n  #setEmpty() {\n    this.empty = !this.value?.length && !this.input.value;\n  }\n\n  #dispatchRemoveEvent(index: number): boolean {\n    const item = this.value[index];\n\n    const event = new CustomEvent('remove', {\n      cancelable: true,\n      detail: item\n    });\n\n    this.dispatchEvent(event);\n\n    return event.defaultPrevented;\n  }\n\n  private getItemLabel(item: any) {\n    return this.formatter\n      ? this.formatter(item)\n      : item.toString();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-chip-field': UmChipField;\n  }\n}\n"]}

package/chip-field/chip-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip-field.styles.d.ts","sourceRoot":"","sources":["../../src/chip-field/chip-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkBlB,CAAC"}
+{"version":3,"file":"chip-field.styles.d.ts","sourceRoot":"","sources":["../../src/chip-field/chip-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmBlB,CAAC"}

package/chip-field/chip-field.styles.js

@@ -1,21 +1,22 @@
 import { css } from 'lit';
 export const styles = css `
-  input {
-    appearance: none;
-    padding: 4px 0;
-  }
-
   u-chip {
     flex-basis: 0;
   }
 
-  ::part(wrapper) {
-    gap: 8px;
+  .input {
+    display: flex;
+    gap: var(--u-chip-field-chips-gap, var(--u-spacing-extra-small, 4px));
     flex-wrap: wrap;
   }
-
-  input {
+  .input:has(u-chip) {
+    margin-top: var(--u-chip-field-chips-margin, var(--u-spacing-extra-small, 4px));
+  }
+  .input input {
+    width: auto;
     flex-basis: 200px;
+    padding: 4px 0;
+    margin-block: -4px;
   }
 `;
 //# sourceMappingURL=chip-field.styles.js.map

package/chip-field/chip-field.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip-field.styles.js","sourceRoot":"","sources":["../../src/chip-field/chip-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;CAkBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  input {\n    appearance: none;\n    padding: 4px 0;\n  }\n\n  u-chip {\n    flex-basis: 0;\n  }\n\n  ::part(wrapper) {\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n\n  input {\n    flex-basis: 200px;\n  }\n`;\n"]}
+{"version":3,"file":"chip-field.styles.js","sourceRoot":"","sources":["../../src/chip-field/chip-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;CAmBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  u-chip {\n    flex-basis: 0;\n  }\n\n  .input {\n    display: flex;\n    gap: var(--u-chip-field-chips-gap, var(--u-spacing-extra-small, 4px));\n    flex-wrap: wrap;\n  }\n  .input:has(u-chip) {\n    margin-top: var(--u-chip-field-chips-margin, var(--u-spacing-extra-small, 4px));\n  }\n  .input input {\n    width: auto;\n    flex-basis: 200px;\n    padding: 4px 0;\n    margin-block: -4px;\n  }\n`;\n"]}