@universal-material/web 3.0.32 → 3.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/custom-elements.json +332 -332
  2. package/field/field.styles.js +3 -3
  3. package/field/field.styles.js.map +1 -1
  4. package/package.json +1 -1
  5. package/shared/button-wrapper.d.ts.map +1 -1
  6. package/shared/button-wrapper.js +0 -1
  7. package/shared/button-wrapper.js.map +1 -1
  8. package/shared/selection-control/selection-control.d.ts.map +1 -1
  9. package/shared/selection-control/selection-control.js +0 -1
  10. package/shared/selection-control/selection-control.js.map +1 -1
package/custom-elements.json CHANGED
@@ -3520,7 +3520,7 @@
3520
3520
  {
3521
3521
  "kind": "variable",
3522
3522
  "name": "styles",
3523
- "default": "css `\n :host {\n --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n --_label-line-height: var(--u-field-label-line-height, 1rem);\n --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n --_field-control-padding: var(--u-field-control-padding, 16px);\n --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n --_field-min-height: var(--u-field-min-height, 56px);\n --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-field-disabled-opacity, .38)));\n --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n --_active-indicator-opacity: 1;\n --_vertical-padding: var(--u-field-vertical-padding, 8px);\n --_icon-size: var(--u-field-icon-size, 1.5rem);\n --_icon-padding: var(--u-field-icon-padding, 12px);\n --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n --_field-control-leading-padding: var(--_field-control-inline-padding);\n --_field-control-trailing-padding: var(--_field-control-inline-padding);\n --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n --u-label-input-start: auto;\n --u-label-input-span-leading-offset: 0;\n --u-label-input-span-trailing-offset: 0;\n --u-text-field-horizontal-padding: 12px;\n }\n\n .field {\n display: block;\n position: relative;\n }\n .field::before, .field::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n pointer-events: none;\n }\n .field::before {\n background: var(--u-color-on-surface, rgb(29, 27, 32));\n transition: opacity 150ms;\n opacity: 0;\n }\n .field::after {\n border-width: var(--u-field-border-width, 1px);\n border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {\n opacity: var(--u-state-hover-opacity, 0.08);\n }\n :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {\n border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n }\n .icon {\n position: absolute;\n width: var(--_icon-size);\n height: 100%;\n top: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--_icon-color);\n font-size: var(--_icon-size);\n line-height: var(--_icon-size);\n }\n .icon::slotted(*) {\n flex-shrink: 0;\n }\n\n .leading-icon {\n inset-inline-start: var(--_icon-padding);\n }\n\n .trailing-icon {\n inset-inline-end: var(--_icon-padding);\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-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n display: block;\n position: absolute;\n inset-inline-start: var(--_field-control-leading-padding);\n margin-bottom: 0;\n line-height: var(--_label-line-height);\n color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n transition: inset 200ms, font-size 200ms;\n }\n\n .input {\n display: block;\n color: var(--u-on-surface-color);\n }\n .input:focus {\n outline: 0;\n }\n .input::slotted(*) {\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-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n width: 100%;\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n min-height: var(--_field-min-height);\n line-height: var(--_control-line-height);\n padding-block: 0;\n padding-inline: var(--_field-control-leading-padding) var(--_field-control-trailing-padding);\n appearance: none;\n background: transparent;\n border: none;\n outline: 0 !important;\n }\n .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {\n transition: color 150ms 100ms;\n }\n .input::slotted(:is(input, textarea))::placeholder {\n color: var(--_field-placeholder-color);\n }\n\n .supporting-text {\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-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n display: flex;\n color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n padding-inline: 16px;\n gap: 16px;\n }\n .supporting-text .supporting-text-slot {\n display: block;\n }\n .supporting-text ::slotted(*) {\n display: inline-block;\n margin-top: 4px;\n }\n\n .error-text {\n display: none;\n }\n\n .counter {\n display: none;\n margin-inline-start: auto;\n }\n\n :host([has-counter]) .counter {\n display: block;\n }\n\n :host([has-leading-icon]) {\n --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host([has-trailing-icon]) {\n --_field-control-trailing-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host(:focus-within) {\n --u-field-border-width: var(--_focus-border-width);\n }\n :host(:focus-within) .field::after {\n border-color: var(--u-field-focused-border-color, var(--_color-primary));\n }\n :host(:focus-within) .label {\n color: var(--u-field-label-focused-color, var(--_color-primary));\n }\n\n :host([invalid]) .field::after {\n border-color: var(--u-field-error-border-color, var(--_color-error));\n }\n :host([invalid]) .label {\n color: var(--u-field-label-error-color, var(--_color-error));\n }\n :host([invalid]) .supporting-text {\n color: var(--u-field-supporting-text-error-color, var(--_color-error));\n }\n :host([invalid]) .trailing-icon {\n --u-standard-icon-button-color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n }\n :host([invalid]) .leading-icon {\n --u-standard-icon-button-color: var(--u-field-leading-icon-error-color, var(--_color-error));\n color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n }\n\n :host([invalid][has-error-text]) .error-text {\n display: block;\n }\n :host([invalid][has-error-text]) .supporting-text-slot {\n display: none;\n }\n\n :host([disabled]) .field::after {\n border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n }\n :host([disabled]) .supporting-text {\n color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .label {\n color: var(--u-field-label-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(*) {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .trailing-icon {\n color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .leading-icon {\n color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n }\n\n :host([variant=filled]) .field {\n border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n background-color: var(--u-color-on-surface-variant, rgb(73, 69, 79));\n }\n :host([variant=filled]) .field::after {\n border-bottom-style: solid;\n }\n :host([variant=filled]) .label {\n top: var(--_vertical-padding);\n }\n :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {\n display: block;\n border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;\n border-bottom: var(--_vertical-padding) solid transparent;\n }\n\n :host([variant=filled][disabled]) .field {\n background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, 0.12)));\n }\n\n :host([variant=outlined]) .field::after {\n --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n border-style: solid;\n clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n transition: clip-path 100ms;\n }\n :host([variant=outlined]) .label {\n top: calc(var(--_label-line-height) / -2);\n }\n\n :host([variant=outlined]:focus-within) .field::after,\n :host([variant=outlined]:not([empty])) .field::after {\n --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n }\n :host([variant=outlined]:focus-within) .label,\n :host([variant=outlined]:not([empty])) .label {\n inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n }\n\n :host([empty]) ::slotted(select) {\n color: var(--_field-placeholder-color);\n }\n\n :host([empty]:not(:focus-within)) .label {\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n pointer-events: none;\n top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n }\n :host([empty]:not(:focus-within)) .input,\n :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n :host([empty]:not(:focus-within)) ::slotted(select) {\n color: transparent;\n transition: color 150ms;\n }\n`"
3523
+ "default": "css `\n :host {\n --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n --_label-line-height: var(--u-field-label-line-height, 1rem);\n --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n --_field-control-padding: var(--u-field-control-padding, 16px);\n --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n --_field-min-height: var(--u-field-min-height, 56px);\n --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n --_active-indicator-opacity: 1;\n --_vertical-padding: var(--u-field-vertical-padding, 8px);\n --_icon-size: var(--u-field-icon-size, 1.5rem);\n --_icon-padding: var(--u-field-icon-padding, 12px);\n --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n --_field-control-leading-padding: var(--_field-control-inline-padding);\n --_field-control-trailing-padding: var(--_field-control-inline-padding);\n --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n --u-label-input-start: auto;\n --u-label-input-span-leading-offset: 0;\n --u-label-input-span-trailing-offset: 0;\n --u-text-field-horizontal-padding: 12px;\n }\n\n .field {\n display: block;\n position: relative;\n }\n .field::before, .field::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n pointer-events: none;\n }\n .field::before {\n background: var(--u-color-on-surface, rgb(29, 27, 32));\n transition: opacity 150ms;\n opacity: 0;\n }\n .field::after {\n border-width: var(--u-field-border-width, 1px);\n border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {\n opacity: var(--u-state-hover-opacity, 0.08);\n }\n :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {\n border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n }\n .icon {\n position: absolute;\n width: var(--_icon-size);\n height: 100%;\n top: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--_icon-color);\n font-size: var(--_icon-size);\n line-height: var(--_icon-size);\n }\n .icon::slotted(*) {\n flex-shrink: 0;\n }\n\n .leading-icon {\n inset-inline-start: var(--_icon-padding);\n }\n\n .trailing-icon {\n inset-inline-end: var(--_icon-padding);\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-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n display: block;\n position: absolute;\n inset-inline-start: var(--_field-control-leading-padding);\n margin-bottom: 0;\n line-height: var(--_label-line-height);\n color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n transition: inset 200ms, font-size 200ms;\n }\n\n .input {\n display: block;\n color: var(--u-on-surface-color);\n }\n .input:focus {\n outline: 0;\n }\n .input::slotted(*) {\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-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n width: 100%;\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n min-height: var(--_field-min-height);\n line-height: var(--_control-line-height);\n padding-block: 0;\n padding-inline: var(--_field-control-leading-padding) var(--_field-control-trailing-padding);\n appearance: none;\n background: transparent;\n border: none;\n outline: 0 !important;\n }\n .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {\n transition: color 150ms 100ms;\n }\n .input::slotted(:is(input, textarea))::placeholder {\n color: var(--_field-placeholder-color);\n }\n\n .supporting-text {\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-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n display: flex;\n color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n padding-inline: 16px;\n gap: 16px;\n }\n .supporting-text .supporting-text-slot {\n display: block;\n }\n .supporting-text ::slotted(*) {\n display: inline-block;\n margin-top: 4px;\n }\n\n .error-text {\n display: none;\n }\n\n .counter {\n display: none;\n margin-inline-start: auto;\n }\n\n :host([has-counter]) .counter {\n display: block;\n }\n\n :host([has-leading-icon]) {\n --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host([has-trailing-icon]) {\n --_field-control-trailing-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host(:focus-within) {\n --u-field-border-width: var(--_focus-border-width);\n }\n :host(:focus-within) .field::after {\n border-color: var(--u-field-focused-border-color, var(--_color-primary));\n }\n :host(:focus-within) .label {\n color: var(--u-field-label-focused-color, var(--_color-primary));\n }\n\n :host([invalid]) .field::after {\n border-color: var(--u-field-error-border-color, var(--_color-error));\n }\n :host([invalid]) .label {\n color: var(--u-field-label-error-color, var(--_color-error));\n }\n :host([invalid]) .supporting-text {\n color: var(--u-field-supporting-text-error-color, var(--_color-error));\n }\n :host([invalid]) .trailing-icon {\n --u-standard-icon-button-color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n }\n :host([invalid]) .leading-icon {\n --u-standard-icon-button-color: var(--u-field-leading-icon-error-color, var(--_color-error));\n color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n }\n\n :host([invalid][has-error-text]) .error-text {\n display: block;\n }\n :host([invalid][has-error-text]) .supporting-text-slot {\n display: none;\n }\n\n :host([disabled]) .field::after {\n border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n }\n :host([disabled]) .supporting-text {\n color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .label {\n color: var(--u-field-label-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(*) {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .trailing-icon {\n color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .leading-icon {\n color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n }\n\n :host([variant=filled]) .field {\n border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n }\n :host([variant=filled]) .field::after {\n border-bottom-style: solid;\n }\n :host([variant=filled]) .label {\n top: var(--_vertical-padding);\n }\n :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {\n display: block;\n border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;\n border-bottom: var(--_vertical-padding) solid transparent;\n }\n\n :host([variant=filled][disabled]) .field {\n background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n }\n\n :host([variant=outlined]) .field::after {\n --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n border-style: solid;\n clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n transition: clip-path 100ms;\n }\n :host([variant=outlined]) .label {\n top: calc(var(--_label-line-height) / -2);\n }\n\n :host([variant=outlined]:focus-within) .field::after,\n :host([variant=outlined]:not([empty])) .field::after {\n --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n }\n :host([variant=outlined]:focus-within) .label,\n :host([variant=outlined]:not([empty])) .label {\n inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n }\n\n :host([empty]) ::slotted(select) {\n color: var(--_field-placeholder-color);\n }\n\n :host([empty]:not(:focus-within)) .label {\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n pointer-events: none;\n top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n }\n :host([empty]:not(:focus-within)) .input,\n :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n :host([empty]:not(:focus-within)) ::slotted(select) {\n color: transparent;\n transition: color 150ms;\n }\n`"
3524
3524
  }
3525
3525
  ],
3526
3526
  "exports": [
@@ -6522,277 +6522,6 @@
6522
6522
  }
6523
6523
  ]
6524
6524
  },
6525
- {
6526
- "kind": "javascript-module",
6527
- "path": "src/snackbar/snackbar.styles.ts",
6528
- "declarations": [
6529
- {
6530
- "kind": "variable",
6531
- "name": "styles",
6532
- "default": "css `\n :host {\n --u-elevation-level: var(--u-snackbar-elevation-level, 3);\n --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));\n position: fixed;\n inset-inline: 0;\n inset-block-end: 0;\n padding: var(--_snackbar-margin);\n z-index: var(--u-snackbar-z-index, 1070);\n display: flex;\n justify-content: center;\n }\n\n .snackbar {\n display: flex;\n align-items: center;\n min-height: var(--u-snackbar-height, 48px);\n color: var(--u-snackbar-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n background-color: var(--u-snackbar-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));\n animation-name: snackbar-fade-in;\n animation-duration: 450ms;\n animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n animation-fill-mode: forwards;\n min-width: var(--u-snackbar-min-width, 100%);\n max-width: var(--u-snackbar-max-width, 100%);\n }\n .snackbar.dismiss {\n animation-name: snackbar-fade-out;\n }\n\n u-button {\n color: var(--u-color-inverse-primary, );\n margin-inline: var(--u-snackbar-text-button-margin, var(--u-spacing-small, 8px));\n }\n\n u-icon-button {\n color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));\n margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));\n }\n\n .label {\n flex: 1;\n overflow: hidden;\n color: var(--u-on-inverse-surface-color);\n padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));\n line-height: 18px;\n }\n\n @media (min-width: 840px) {\n :host {\n --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));\n }\n .snackbar {\n min-width: var(--u-snackbar-min-width, 288px);\n max-width: var(--u-snackbar-max-width, 568px);\n }\n }\n @keyframes snackbar-fade-in {\n 0% {\n opacity: 0;\n transform: scale3d(0.5, 0.5, 1);\n }\n 100% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n }\n @keyframes snackbar-fade-out {\n 0% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n 100% {\n opacity: 0;\n transform: scale3d(0.5, 0.5, 1);\n }\n }\n`"
6533
- }
6534
- ],
6535
- "exports": [
6536
- {
6537
- "kind": "js",
6538
- "name": "styles",
6539
- "declaration": {
6540
- "name": "styles",
6541
- "module": "src/snackbar/snackbar.styles.ts"
6542
- }
6543
- }
6544
- ]
6545
- },
6546
- {
6547
- "kind": "javascript-module",
6548
- "path": "src/snackbar/snackbar.ts",
6549
- "declarations": [
6550
- {
6551
- "kind": "class",
6552
- "description": "",
6553
- "name": "UmSnackbar",
6554
- "members": [
6555
- {
6556
- "kind": "field",
6557
- "name": "label",
6558
- "type": {
6559
- "text": "string"
6560
- },
6561
- "default": "''",
6562
- "attribute": "label",
6563
- "reflects": true
6564
- },
6565
- {
6566
- "kind": "field",
6567
- "name": "buttonLabel",
6568
- "type": {
6569
- "text": "string"
6570
- },
6571
- "default": "''",
6572
- "attribute": "buttonLabel",
6573
- "reflects": true
6574
- },
6575
- {
6576
- "kind": "field",
6577
- "name": "showClose",
6578
- "type": {
6579
- "text": "boolean"
6580
- },
6581
- "default": "false",
6582
- "attribute": "show-close",
6583
- "reflects": true
6584
- },
6585
- {
6586
- "kind": "field",
6587
- "name": "dismissed",
6588
- "type": {
6589
- "text": "boolean"
6590
- },
6591
- "default": "false",
6592
- "attribute": "dismissed",
6593
- "reflects": true
6594
- },
6595
- {
6596
- "kind": "field",
6597
- "name": "duration",
6598
- "type": {
6599
- "text": "SnackbarDuration"
6600
- },
6601
- "privacy": "private"
6602
- },
6603
- {
6604
- "kind": "field",
6605
- "name": "snackbar",
6606
- "type": {
6607
- "text": "HTMLElement"
6608
- },
6609
- "privacy": "private"
6610
- },
6611
- {
6612
- "kind": "method",
6613
- "name": "renderButton",
6614
- "privacy": "private"
6615
- },
6616
- {
6617
- "kind": "method",
6618
- "name": "renderCloseButton",
6619
- "privacy": "private"
6620
- },
6621
- {
6622
- "kind": "method",
6623
- "name": "dismiss",
6624
- "return": {
6625
- "type": {
6626
- "text": "void"
6627
- }
6628
- }
6629
- },
6630
- {
6631
- "kind": "field",
6632
- "name": "_queue",
6633
- "type": {
6634
- "text": "UmSnackbar[]"
6635
- },
6636
- "privacy": "private",
6637
- "static": true,
6638
- "default": "[]"
6639
- },
6640
- {
6641
- "kind": "field",
6642
- "name": "_consuming",
6643
- "type": {
6644
- "text": "boolean"
6645
- },
6646
- "privacy": "private",
6647
- "static": true
6648
- },
6649
- {
6650
- "kind": "method",
6651
- "name": "show",
6652
- "static": true,
6653
- "return": {
6654
- "type": {
6655
- "text": "UmSnackbar"
6656
- }
6657
- },
6658
- "parameters": [
6659
- {
6660
- "name": "label",
6661
- "type": {
6662
- "text": "string"
6663
- }
6664
- }
6665
- ]
6666
- },
6667
- {
6668
- "kind": "method",
6669
- "name": "show",
6670
- "static": true,
6671
- "return": {
6672
- "type": {
6673
- "text": "UmSnackbar"
6674
- }
6675
- },
6676
- "parameters": [
6677
- {
6678
- "name": "config",
6679
- "type": {
6680
- "text": "SnackbarConfig"
6681
- }
6682
- }
6683
- ]
6684
- },
6685
- {
6686
- "kind": "method",
6687
- "name": "show",
6688
- "static": true,
6689
- "return": {
6690
- "type": {
6691
- "text": "UmSnackbar"
6692
- }
6693
- },
6694
- "parameters": [
6695
- {
6696
- "name": "configOrLabel",
6697
- "type": {
6698
- "text": "SnackbarConfig | string"
6699
- }
6700
- }
6701
- ]
6702
- },
6703
- {
6704
- "kind": "method",
6705
- "name": "consumeQueue",
6706
- "privacy": "private",
6707
- "static": true
6708
- },
6709
- {
6710
- "kind": "method",
6711
- "name": "showNext",
6712
- "privacy": "private",
6713
- "static": true
6714
- },
6715
- {
6716
- "kind": "method",
6717
- "name": "createSnackbar",
6718
- "privacy": "private",
6719
- "static": true,
6720
- "return": {
6721
- "type": {
6722
- "text": "UmSnackbar"
6723
- }
6724
- },
6725
- "parameters": [
6726
- {
6727
- "name": "config",
6728
- "type": {
6729
- "text": "SnackbarConfig"
6730
- }
6731
- }
6732
- ]
6733
- }
6734
- ],
6735
- "attributes": [
6736
- {
6737
- "name": "label",
6738
- "type": {
6739
- "text": "string"
6740
- },
6741
- "default": "''",
6742
- "fieldName": "label"
6743
- },
6744
- {
6745
- "name": "buttonLabel",
6746
- "type": {
6747
- "text": "string"
6748
- },
6749
- "default": "''",
6750
- "fieldName": "buttonLabel"
6751
- },
6752
- {
6753
- "name": "show-close",
6754
- "type": {
6755
- "text": "boolean"
6756
- },
6757
- "default": "false",
6758
- "fieldName": "showClose"
6759
- },
6760
- {
6761
- "name": "dismissed",
6762
- "type": {
6763
- "text": "boolean"
6764
- },
6765
- "default": "false",
6766
- "fieldName": "dismissed"
6767
- }
6768
- ],
6769
- "superclass": {
6770
- "name": "LitElement",
6771
- "package": "lit"
6772
- },
6773
- "tagName": "u-snackbar",
6774
- "customElement": true
6775
- }
6776
- ],
6777
- "exports": [
6778
- {
6779
- "kind": "js",
6780
- "name": "UmSnackbar",
6781
- "declaration": {
6782
- "name": "UmSnackbar",
6783
- "module": "src/snackbar/snackbar.ts"
6784
- }
6785
- },
6786
- {
6787
- "kind": "custom-element-definition",
6788
- "name": "u-snackbar",
6789
- "declaration": {
6790
- "name": "UmSnackbar",
6791
- "module": "src/snackbar/snackbar.ts"
6792
- }
6793
- }
6794
- ]
6795
- },
6796
6525
  {
6797
6526
  "kind": "javascript-module",
6798
6527
  "path": "src/switch/switch-list-item.ts",
@@ -7356,12 +7085,12 @@
7356
7085
  },
7357
7086
  {
7358
7087
  "kind": "javascript-module",
7359
- "path": "src/text-field/text-field.styles.ts",
7088
+ "path": "src/snackbar/snackbar.styles.ts",
7360
7089
  "declarations": [
7361
7090
  {
7362
7091
  "kind": "variable",
7363
7092
  "name": "styles",
7364
- "default": "css `\n\n`"
7093
+ "default": "css `\n :host {\n --u-elevation-level: var(--u-snackbar-elevation-level, 3);\n --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));\n position: fixed;\n inset-inline: 0;\n inset-block-end: 0;\n padding: var(--_snackbar-margin);\n z-index: var(--u-snackbar-z-index, 1070);\n display: flex;\n justify-content: center;\n }\n\n .snackbar {\n display: flex;\n align-items: center;\n min-height: var(--u-snackbar-height, 48px);\n color: var(--u-snackbar-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n background-color: var(--u-snackbar-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));\n animation-name: snackbar-fade-in;\n animation-duration: 450ms;\n animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n animation-fill-mode: forwards;\n min-width: var(--u-snackbar-min-width, 100%);\n max-width: var(--u-snackbar-max-width, 100%);\n }\n .snackbar.dismiss {\n animation-name: snackbar-fade-out;\n }\n\n u-button {\n color: var(--u-color-inverse-primary, );\n margin-inline: var(--u-snackbar-text-button-margin, var(--u-spacing-small, 8px));\n }\n\n u-icon-button {\n color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));\n margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));\n }\n\n .label {\n flex: 1;\n overflow: hidden;\n color: var(--u-on-inverse-surface-color);\n padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));\n line-height: 18px;\n }\n\n @media (min-width: 840px) {\n :host {\n --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));\n }\n .snackbar {\n min-width: var(--u-snackbar-min-width, 288px);\n max-width: var(--u-snackbar-max-width, 568px);\n }\n }\n @keyframes snackbar-fade-in {\n 0% {\n opacity: 0;\n transform: scale3d(0.5, 0.5, 1);\n }\n 100% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n }\n @keyframes snackbar-fade-out {\n 0% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n 100% {\n opacity: 0;\n transform: scale3d(0.5, 0.5, 1);\n }\n }\n`"
7365
7094
  }
7366
7095
  ],
7367
7096
  "exports": [
@@ -7370,159 +7099,257 @@
7370
7099
  "name": "styles",
7371
7100
  "declaration": {
7372
7101
  "name": "styles",
7373
- "module": "src/text-field/text-field.styles.ts"
7102
+ "module": "src/snackbar/snackbar.styles.ts"
7374
7103
  }
7375
7104
  }
7376
7105
  ]
7377
7106
  },
7378
7107
  {
7379
7108
  "kind": "javascript-module",
7380
- "path": "src/text-field/text-field.ts",
7109
+ "path": "src/snackbar/snackbar.ts",
7381
7110
  "declarations": [
7382
7111
  {
7383
7112
  "kind": "class",
7384
7113
  "description": "",
7385
- "name": "UmTextField",
7114
+ "name": "UmSnackbar",
7386
7115
  "members": [
7387
7116
  {
7388
7117
  "kind": "field",
7389
- "name": "formAssociated",
7118
+ "name": "label",
7390
7119
  "type": {
7391
- "text": "boolean"
7120
+ "text": "string"
7392
7121
  },
7393
- "static": true,
7394
- "default": "true"
7395
- },
7396
- {
7397
- "kind": "field",
7398
- "name": "variant",
7399
- "attribute": "variant"
7122
+ "default": "''",
7123
+ "attribute": "label",
7124
+ "reflects": true
7400
7125
  },
7401
7126
  {
7402
7127
  "kind": "field",
7403
- "name": "label",
7128
+ "name": "buttonLabel",
7404
7129
  "type": {
7405
- "text": "string | undefined"
7130
+ "text": "string"
7406
7131
  },
7407
- "attribute": "label"
7132
+ "default": "''",
7133
+ "attribute": "buttonLabel",
7134
+ "reflects": true
7408
7135
  },
7409
7136
  {
7410
7137
  "kind": "field",
7411
- "name": "disabled",
7138
+ "name": "showClose",
7412
7139
  "type": {
7413
7140
  "text": "boolean"
7414
7141
  },
7415
7142
  "default": "false",
7416
- "attribute": "disabled",
7143
+ "attribute": "show-close",
7417
7144
  "reflects": true
7418
7145
  },
7419
7146
  {
7420
7147
  "kind": "field",
7421
- "name": "invalid",
7148
+ "name": "dismissed",
7422
7149
  "type": {
7423
7150
  "text": "boolean"
7424
7151
  },
7425
7152
  "default": "false",
7426
- "attribute": "invalid",
7153
+ "attribute": "dismissed",
7427
7154
  "reflects": true
7428
7155
  },
7429
7156
  {
7430
7157
  "kind": "field",
7431
- "name": "#value",
7432
- "privacy": "private",
7158
+ "name": "duration",
7433
7159
  "type": {
7434
- "text": "string"
7160
+ "text": "SnackbarDuration"
7435
7161
  },
7436
- "default": "''"
7162
+ "privacy": "private"
7437
7163
  },
7438
7164
  {
7439
7165
  "kind": "field",
7440
- "name": "form",
7166
+ "name": "snackbar",
7441
7167
  "type": {
7442
- "text": "HTMLFormElement | null"
7168
+ "text": "HTMLElement"
7169
+ },
7170
+ "privacy": "private"
7171
+ },
7172
+ {
7173
+ "kind": "method",
7174
+ "name": "renderButton",
7175
+ "privacy": "private"
7176
+ },
7177
+ {
7178
+ "kind": "method",
7179
+ "name": "renderCloseButton",
7180
+ "privacy": "private"
7181
+ },
7182
+ {
7183
+ "kind": "method",
7184
+ "name": "dismiss",
7185
+ "return": {
7186
+ "type": {
7187
+ "text": "void"
7188
+ }
7443
7189
  }
7444
7190
  },
7445
7191
  {
7446
7192
  "kind": "field",
7447
- "name": "value",
7448
- "attribute": "value"
7193
+ "name": "_queue",
7194
+ "type": {
7195
+ "text": "UmSnackbar[]"
7196
+ },
7197
+ "privacy": "private",
7198
+ "static": true,
7199
+ "default": "[]"
7200
+ },
7201
+ {
7202
+ "kind": "field",
7203
+ "name": "_consuming",
7204
+ "type": {
7205
+ "text": "boolean"
7206
+ },
7207
+ "privacy": "private",
7208
+ "static": true
7209
+ },
7210
+ {
7211
+ "kind": "method",
7212
+ "name": "show",
7213
+ "static": true,
7214
+ "return": {
7215
+ "type": {
7216
+ "text": "UmSnackbar"
7217
+ }
7218
+ },
7219
+ "parameters": [
7220
+ {
7221
+ "name": "label",
7222
+ "type": {
7223
+ "text": "string"
7224
+ }
7225
+ }
7226
+ ]
7227
+ },
7228
+ {
7229
+ "kind": "method",
7230
+ "name": "show",
7231
+ "static": true,
7232
+ "return": {
7233
+ "type": {
7234
+ "text": "UmSnackbar"
7235
+ }
7236
+ },
7237
+ "parameters": [
7238
+ {
7239
+ "name": "config",
7240
+ "type": {
7241
+ "text": "SnackbarConfig"
7242
+ }
7243
+ }
7244
+ ]
7245
+ },
7246
+ {
7247
+ "kind": "method",
7248
+ "name": "show",
7249
+ "static": true,
7250
+ "return": {
7251
+ "type": {
7252
+ "text": "UmSnackbar"
7253
+ }
7254
+ },
7255
+ "parameters": [
7256
+ {
7257
+ "name": "configOrLabel",
7258
+ "type": {
7259
+ "text": "SnackbarConfig | string"
7260
+ }
7261
+ }
7262
+ ]
7449
7263
  },
7450
7264
  {
7451
- "kind": "field",
7452
- "name": "#elementInternals",
7265
+ "kind": "method",
7266
+ "name": "consumeQueue",
7453
7267
  "privacy": "private",
7454
- "type": {
7455
- "text": "ElementInternals"
7456
- }
7268
+ "static": true
7457
7269
  },
7458
7270
  {
7459
- "kind": "field",
7460
- "name": "input",
7461
- "type": {
7462
- "text": "HTMLInputElement"
7463
- }
7271
+ "kind": "method",
7272
+ "name": "showNext",
7273
+ "privacy": "private",
7274
+ "static": true
7464
7275
  },
7465
7276
  {
7466
7277
  "kind": "method",
7467
- "name": "#handleInput"
7278
+ "name": "createSnackbar",
7279
+ "privacy": "private",
7280
+ "static": true,
7281
+ "return": {
7282
+ "type": {
7283
+ "text": "UmSnackbar"
7284
+ }
7285
+ },
7286
+ "parameters": [
7287
+ {
7288
+ "name": "config",
7289
+ "type": {
7290
+ "text": "SnackbarConfig"
7291
+ }
7292
+ }
7293
+ ]
7468
7294
  }
7469
7295
  ],
7470
7296
  "attributes": [
7471
- {
7472
- "name": "variant",
7473
- "fieldName": "variant"
7474
- },
7475
7297
  {
7476
7298
  "name": "label",
7477
7299
  "type": {
7478
- "text": "string | undefined"
7300
+ "text": "string"
7479
7301
  },
7302
+ "default": "''",
7480
7303
  "fieldName": "label"
7481
7304
  },
7482
7305
  {
7483
- "name": "disabled",
7306
+ "name": "buttonLabel",
7484
7307
  "type": {
7485
- "text": "boolean"
7308
+ "text": "string"
7486
7309
  },
7487
- "default": "false",
7488
- "fieldName": "disabled"
7310
+ "default": "''",
7311
+ "fieldName": "buttonLabel"
7489
7312
  },
7490
7313
  {
7491
- "name": "invalid",
7314
+ "name": "show-close",
7492
7315
  "type": {
7493
7316
  "text": "boolean"
7494
7317
  },
7495
7318
  "default": "false",
7496
- "fieldName": "invalid"
7319
+ "fieldName": "showClose"
7497
7320
  },
7498
7321
  {
7499
- "name": "value",
7500
- "fieldName": "value"
7322
+ "name": "dismissed",
7323
+ "type": {
7324
+ "text": "boolean"
7325
+ },
7326
+ "default": "false",
7327
+ "fieldName": "dismissed"
7501
7328
  }
7502
7329
  ],
7503
7330
  "superclass": {
7504
7331
  "name": "LitElement",
7505
7332
  "package": "lit"
7506
7333
  },
7507
- "tagName": "u-text-field",
7334
+ "tagName": "u-snackbar",
7508
7335
  "customElement": true
7509
7336
  }
7510
7337
  ],
7511
7338
  "exports": [
7512
7339
  {
7513
7340
  "kind": "js",
7514
- "name": "UmTextField",
7341
+ "name": "UmSnackbar",
7515
7342
  "declaration": {
7516
- "name": "UmTextField",
7517
- "module": "src/text-field/text-field.ts"
7343
+ "name": "UmSnackbar",
7344
+ "module": "src/snackbar/snackbar.ts"
7518
7345
  }
7519
7346
  },
7520
7347
  {
7521
7348
  "kind": "custom-element-definition",
7522
- "name": "u-text-field",
7349
+ "name": "u-snackbar",
7523
7350
  "declaration": {
7524
- "name": "UmTextField",
7525
- "module": "src/text-field/text-field.ts"
7351
+ "name": "UmSnackbar",
7352
+ "module": "src/snackbar/snackbar.ts"
7526
7353
  }
7527
7354
  }
7528
7355
  ]
@@ -8114,6 +7941,179 @@
8114
7941
  "declarations": [],
8115
7942
  "exports": []
8116
7943
  },
7944
+ {
7945
+ "kind": "javascript-module",
7946
+ "path": "src/text-field/text-field.styles.ts",
7947
+ "declarations": [
7948
+ {
7949
+ "kind": "variable",
7950
+ "name": "styles",
7951
+ "default": "css `\n\n`"
7952
+ }
7953
+ ],
7954
+ "exports": [
7955
+ {
7956
+ "kind": "js",
7957
+ "name": "styles",
7958
+ "declaration": {
7959
+ "name": "styles",
7960
+ "module": "src/text-field/text-field.styles.ts"
7961
+ }
7962
+ }
7963
+ ]
7964
+ },
7965
+ {
7966
+ "kind": "javascript-module",
7967
+ "path": "src/text-field/text-field.ts",
7968
+ "declarations": [
7969
+ {
7970
+ "kind": "class",
7971
+ "description": "",
7972
+ "name": "UmTextField",
7973
+ "members": [
7974
+ {
7975
+ "kind": "field",
7976
+ "name": "formAssociated",
7977
+ "type": {
7978
+ "text": "boolean"
7979
+ },
7980
+ "static": true,
7981
+ "default": "true"
7982
+ },
7983
+ {
7984
+ "kind": "field",
7985
+ "name": "variant",
7986
+ "attribute": "variant"
7987
+ },
7988
+ {
7989
+ "kind": "field",
7990
+ "name": "label",
7991
+ "type": {
7992
+ "text": "string | undefined"
7993
+ },
7994
+ "attribute": "label"
7995
+ },
7996
+ {
7997
+ "kind": "field",
7998
+ "name": "disabled",
7999
+ "type": {
8000
+ "text": "boolean"
8001
+ },
8002
+ "default": "false",
8003
+ "attribute": "disabled",
8004
+ "reflects": true
8005
+ },
8006
+ {
8007
+ "kind": "field",
8008
+ "name": "invalid",
8009
+ "type": {
8010
+ "text": "boolean"
8011
+ },
8012
+ "default": "false",
8013
+ "attribute": "invalid",
8014
+ "reflects": true
8015
+ },
8016
+ {
8017
+ "kind": "field",
8018
+ "name": "#value",
8019
+ "privacy": "private",
8020
+ "type": {
8021
+ "text": "string"
8022
+ },
8023
+ "default": "''"
8024
+ },
8025
+ {
8026
+ "kind": "field",
8027
+ "name": "form",
8028
+ "type": {
8029
+ "text": "HTMLFormElement | null"
8030
+ }
8031
+ },
8032
+ {
8033
+ "kind": "field",
8034
+ "name": "value",
8035
+ "attribute": "value"
8036
+ },
8037
+ {
8038
+ "kind": "field",
8039
+ "name": "#elementInternals",
8040
+ "privacy": "private",
8041
+ "type": {
8042
+ "text": "ElementInternals"
8043
+ }
8044
+ },
8045
+ {
8046
+ "kind": "field",
8047
+ "name": "input",
8048
+ "type": {
8049
+ "text": "HTMLInputElement"
8050
+ }
8051
+ },
8052
+ {
8053
+ "kind": "method",
8054
+ "name": "#handleInput"
8055
+ }
8056
+ ],
8057
+ "attributes": [
8058
+ {
8059
+ "name": "variant",
8060
+ "fieldName": "variant"
8061
+ },
8062
+ {
8063
+ "name": "label",
8064
+ "type": {
8065
+ "text": "string | undefined"
8066
+ },
8067
+ "fieldName": "label"
8068
+ },
8069
+ {
8070
+ "name": "disabled",
8071
+ "type": {
8072
+ "text": "boolean"
8073
+ },
8074
+ "default": "false",
8075
+ "fieldName": "disabled"
8076
+ },
8077
+ {
8078
+ "name": "invalid",
8079
+ "type": {
8080
+ "text": "boolean"
8081
+ },
8082
+ "default": "false",
8083
+ "fieldName": "invalid"
8084
+ },
8085
+ {
8086
+ "name": "value",
8087
+ "fieldName": "value"
8088
+ }
8089
+ ],
8090
+ "superclass": {
8091
+ "name": "LitElement",
8092
+ "package": "lit"
8093
+ },
8094
+ "tagName": "u-text-field",
8095
+ "customElement": true
8096
+ }
8097
+ ],
8098
+ "exports": [
8099
+ {
8100
+ "kind": "js",
8101
+ "name": "UmTextField",
8102
+ "declaration": {
8103
+ "name": "UmTextField",
8104
+ "module": "src/text-field/text-field.ts"
8105
+ }
8106
+ },
8107
+ {
8108
+ "kind": "custom-element-definition",
8109
+ "name": "u-text-field",
8110
+ "declaration": {
8111
+ "name": "UmTextField",
8112
+ "module": "src/text-field/text-field.ts"
8113
+ }
8114
+ }
8115
+ ]
8116
+ },
8117
8117
  {
8118
8118
  "kind": "javascript-module",
8119
8119
  "path": "src/shared/selection-control/selection-control-list-item.ts",
package/field/field.styles.js CHANGED
@@ -9,7 +9,7 @@ export const styles = css `
9
9
  --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));
10
10
  --_field-min-height: var(--u-field-min-height, 56px);
11
11
  --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
12
- --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-field-disabled-opacity, .38)));
12
+ --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));
13
13
  --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));
14
14
  --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
15
15
  --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));
@@ -231,7 +231,7 @@ export const styles = css `
231
231
 
232
232
  :host([variant=filled]) .field {
233
233
  border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);
234
- background-color: var(--u-color-on-surface-variant, rgb(73, 69, 79));
234
+ background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));
235
235
  }
236
236
  :host([variant=filled]) .field::after {
237
237
  border-bottom-style: solid;
@@ -246,7 +246,7 @@ export const styles = css `
246
246
  }
247
247
 
248
248
  :host([variant=filled][disabled]) .field {
249
- background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, 0.12)));
249
+ background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));
250
250
  }
251
251
 
252
252
  :host([variant=outlined]) .field::after {
package/field/field.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../src/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8RzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n --_label-line-height: var(--u-field-label-line-height, 1rem);\n --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n --_field-control-padding: var(--u-field-control-padding, 16px);\n --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n --_field-min-height: var(--u-field-min-height, 56px);\n --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-field-disabled-opacity, .38)));\n --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n --_active-indicator-opacity: 1;\n --_vertical-padding: var(--u-field-vertical-padding, 8px);\n --_icon-size: var(--u-field-icon-size, 1.5rem);\n --_icon-padding: var(--u-field-icon-padding, 12px);\n --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n --_field-control-leading-padding: var(--_field-control-inline-padding);\n --_field-control-trailing-padding: var(--_field-control-inline-padding);\n --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n --u-label-input-start: auto;\n --u-label-input-span-leading-offset: 0;\n --u-label-input-span-trailing-offset: 0;\n --u-text-field-horizontal-padding: 12px;\n }\n\n .field {\n display: block;\n position: relative;\n }\n .field::before, .field::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n pointer-events: none;\n }\n .field::before {\n background: var(--u-color-on-surface, rgb(29, 27, 32));\n transition: opacity 150ms;\n opacity: 0;\n }\n .field::after {\n border-width: var(--u-field-border-width, 1px);\n border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {\n opacity: var(--u-state-hover-opacity, 0.08);\n }\n :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {\n border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n }\n .icon {\n position: absolute;\n width: var(--_icon-size);\n height: 100%;\n top: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--_icon-color);\n font-size: var(--_icon-size);\n line-height: var(--_icon-size);\n }\n .icon::slotted(*) {\n flex-shrink: 0;\n }\n\n .leading-icon {\n inset-inline-start: var(--_icon-padding);\n }\n\n .trailing-icon {\n inset-inline-end: var(--_icon-padding);\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-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n display: block;\n position: absolute;\n inset-inline-start: var(--_field-control-leading-padding);\n margin-bottom: 0;\n line-height: var(--_label-line-height);\n color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n transition: inset 200ms, font-size 200ms;\n }\n\n .input {\n display: block;\n color: var(--u-on-surface-color);\n }\n .input:focus {\n outline: 0;\n }\n .input::slotted(*) {\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-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n width: 100%;\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n min-height: var(--_field-min-height);\n line-height: var(--_control-line-height);\n padding-block: 0;\n padding-inline: var(--_field-control-leading-padding) var(--_field-control-trailing-padding);\n appearance: none;\n background: transparent;\n border: none;\n outline: 0 !important;\n }\n .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {\n transition: color 150ms 100ms;\n }\n .input::slotted(:is(input, textarea))::placeholder {\n color: var(--_field-placeholder-color);\n }\n\n .supporting-text {\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-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n display: flex;\n color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n padding-inline: 16px;\n gap: 16px;\n }\n .supporting-text .supporting-text-slot {\n display: block;\n }\n .supporting-text ::slotted(*) {\n display: inline-block;\n margin-top: 4px;\n }\n\n .error-text {\n display: none;\n }\n\n .counter {\n display: none;\n margin-inline-start: auto;\n }\n\n :host([has-counter]) .counter {\n display: block;\n }\n\n :host([has-leading-icon]) {\n --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host([has-trailing-icon]) {\n --_field-control-trailing-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host(:focus-within) {\n --u-field-border-width: var(--_focus-border-width);\n }\n :host(:focus-within) .field::after {\n border-color: var(--u-field-focused-border-color, var(--_color-primary));\n }\n :host(:focus-within) .label {\n color: var(--u-field-label-focused-color, var(--_color-primary));\n }\n\n :host([invalid]) .field::after {\n border-color: var(--u-field-error-border-color, var(--_color-error));\n }\n :host([invalid]) .label {\n color: var(--u-field-label-error-color, var(--_color-error));\n }\n :host([invalid]) .supporting-text {\n color: var(--u-field-supporting-text-error-color, var(--_color-error));\n }\n :host([invalid]) .trailing-icon {\n --u-standard-icon-button-color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n }\n :host([invalid]) .leading-icon {\n --u-standard-icon-button-color: var(--u-field-leading-icon-error-color, var(--_color-error));\n color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n }\n\n :host([invalid][has-error-text]) .error-text {\n display: block;\n }\n :host([invalid][has-error-text]) .supporting-text-slot {\n display: none;\n }\n\n :host([disabled]) .field::after {\n border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n }\n :host([disabled]) .supporting-text {\n color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .label {\n color: var(--u-field-label-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(*) {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .trailing-icon {\n color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .leading-icon {\n color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n }\n\n :host([variant=filled]) .field {\n border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n background-color: var(--u-color-on-surface-variant, rgb(73, 69, 79));\n }\n :host([variant=filled]) .field::after {\n border-bottom-style: solid;\n }\n :host([variant=filled]) .label {\n top: var(--_vertical-padding);\n }\n :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {\n display: block;\n border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;\n border-bottom: var(--_vertical-padding) solid transparent;\n }\n\n :host([variant=filled][disabled]) .field {\n background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, 0.12)));\n }\n\n :host([variant=outlined]) .field::after {\n --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n border-style: solid;\n clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n transition: clip-path 100ms;\n }\n :host([variant=outlined]) .label {\n top: calc(var(--_label-line-height) / -2);\n }\n\n :host([variant=outlined]:focus-within) .field::after,\n :host([variant=outlined]:not([empty])) .field::after {\n --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n }\n :host([variant=outlined]:focus-within) .label,\n :host([variant=outlined]:not([empty])) .label {\n inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n }\n\n :host([empty]) ::slotted(select) {\n color: var(--_field-placeholder-color);\n }\n\n :host([empty]:not(:focus-within)) .label {\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n pointer-events: none;\n top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n }\n :host([empty]:not(:focus-within)) .input,\n :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n :host([empty]:not(:focus-within)) ::slotted(select) {\n color: transparent;\n transition: color 150ms;\n }\n`;\n"]}
1
+ {"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../src/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8RzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n --_label-line-height: var(--u-field-label-line-height, 1rem);\n --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n --_field-control-padding: var(--u-field-control-padding, 16px);\n --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n --_field-min-height: var(--u-field-min-height, 56px);\n --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n --_active-indicator-opacity: 1;\n --_vertical-padding: var(--u-field-vertical-padding, 8px);\n --_icon-size: var(--u-field-icon-size, 1.5rem);\n --_icon-padding: var(--u-field-icon-padding, 12px);\n --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n --_field-control-leading-padding: var(--_field-control-inline-padding);\n --_field-control-trailing-padding: var(--_field-control-inline-padding);\n --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n --u-label-input-start: auto;\n --u-label-input-span-leading-offset: 0;\n --u-label-input-span-trailing-offset: 0;\n --u-text-field-horizontal-padding: 12px;\n }\n\n .field {\n display: block;\n position: relative;\n }\n .field::before, .field::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n pointer-events: none;\n }\n .field::before {\n background: var(--u-color-on-surface, rgb(29, 27, 32));\n transition: opacity 150ms;\n opacity: 0;\n }\n .field::after {\n border-width: var(--u-field-border-width, 1px);\n border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {\n opacity: var(--u-state-hover-opacity, 0.08);\n }\n :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {\n border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n }\n .icon {\n position: absolute;\n width: var(--_icon-size);\n height: 100%;\n top: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--_icon-color);\n font-size: var(--_icon-size);\n line-height: var(--_icon-size);\n }\n .icon::slotted(*) {\n flex-shrink: 0;\n }\n\n .leading-icon {\n inset-inline-start: var(--_icon-padding);\n }\n\n .trailing-icon {\n inset-inline-end: var(--_icon-padding);\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-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n display: block;\n position: absolute;\n inset-inline-start: var(--_field-control-leading-padding);\n margin-bottom: 0;\n line-height: var(--_label-line-height);\n color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n transition: inset 200ms, font-size 200ms;\n }\n\n .input {\n display: block;\n color: var(--u-on-surface-color);\n }\n .input:focus {\n outline: 0;\n }\n .input::slotted(*) {\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-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n width: 100%;\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n min-height: var(--_field-min-height);\n line-height: var(--_control-line-height);\n padding-block: 0;\n padding-inline: var(--_field-control-leading-padding) var(--_field-control-trailing-padding);\n appearance: none;\n background: transparent;\n border: none;\n outline: 0 !important;\n }\n .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {\n transition: color 150ms 100ms;\n }\n .input::slotted(:is(input, textarea))::placeholder {\n color: var(--_field-placeholder-color);\n }\n\n .supporting-text {\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-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n display: flex;\n color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n padding-inline: 16px;\n gap: 16px;\n }\n .supporting-text .supporting-text-slot {\n display: block;\n }\n .supporting-text ::slotted(*) {\n display: inline-block;\n margin-top: 4px;\n }\n\n .error-text {\n display: none;\n }\n\n .counter {\n display: none;\n margin-inline-start: auto;\n }\n\n :host([has-counter]) .counter {\n display: block;\n }\n\n :host([has-leading-icon]) {\n --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host([has-trailing-icon]) {\n --_field-control-trailing-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host(:focus-within) {\n --u-field-border-width: var(--_focus-border-width);\n }\n :host(:focus-within) .field::after {\n border-color: var(--u-field-focused-border-color, var(--_color-primary));\n }\n :host(:focus-within) .label {\n color: var(--u-field-label-focused-color, var(--_color-primary));\n }\n\n :host([invalid]) .field::after {\n border-color: var(--u-field-error-border-color, var(--_color-error));\n }\n :host([invalid]) .label {\n color: var(--u-field-label-error-color, var(--_color-error));\n }\n :host([invalid]) .supporting-text {\n color: var(--u-field-supporting-text-error-color, var(--_color-error));\n }\n :host([invalid]) .trailing-icon {\n --u-standard-icon-button-color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n }\n :host([invalid]) .leading-icon {\n --u-standard-icon-button-color: var(--u-field-leading-icon-error-color, var(--_color-error));\n color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n }\n\n :host([invalid][has-error-text]) .error-text {\n display: block;\n }\n :host([invalid][has-error-text]) .supporting-text-slot {\n display: none;\n }\n\n :host([disabled]) .field::after {\n border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n }\n :host([disabled]) .supporting-text {\n color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .label {\n color: var(--u-field-label-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(*) {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .trailing-icon {\n color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .leading-icon {\n color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n }\n\n :host([variant=filled]) .field {\n border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n }\n :host([variant=filled]) .field::after {\n border-bottom-style: solid;\n }\n :host([variant=filled]) .label {\n top: var(--_vertical-padding);\n }\n :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {\n display: block;\n border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;\n border-bottom: var(--_vertical-padding) solid transparent;\n }\n\n :host([variant=filled][disabled]) .field {\n background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n }\n\n :host([variant=outlined]) .field::after {\n --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n border-style: solid;\n clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n transition: clip-path 100ms;\n }\n :host([variant=outlined]) .label {\n top: calc(var(--_label-line-height) / -2);\n }\n\n :host([variant=outlined]:focus-within) .field::after,\n :host([variant=outlined]:not([empty])) .field::after {\n --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n }\n :host([variant=outlined]:focus-within) .label,\n :host([variant=outlined]:not([empty])) .label {\n inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n }\n\n :host([empty]) ::slotted(select) {\n color: var(--_field-placeholder-color);\n }\n\n :host([empty]:not(:focus-within)) .label {\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n pointer-events: none;\n top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n }\n :host([empty]:not(:focus-within)) .input,\n :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n :host([empty]:not(:focus-within)) ::slotted(select) {\n color: transparent;\n transition: color 150ms;\n }\n`;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-material/web",
3
- "version": "3.0.32",
3
+ "version": "3.0.34",
4
4
  "description": "Material web components",
5
5
  "type": "module",
6
6
  "keywords": [
package/shared/button-wrapper.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAG7B,8BAAsB,eAAgB,SAAQ,UAAU;IAEtD;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAC5C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAM/C,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,UAAU;IAgBlB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAOjB,oBAAoB;IAOpB,KAAK;IAIL,IAAI;IAKb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAKxD,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,iBAAiB;IAazB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}
1
+ {"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAG7B,8BAAsB,eAAgB,SAAQ,UAAU;IAEtD;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAC5C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAM/C,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,UAAU;IAgBlB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAOjB,oBAAoB;IAOpB,KAAK;IAIL,IAAI;IAKb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAIxD,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,iBAAiB;IAazB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}
package/shared/button-wrapper.js CHANGED
@@ -72,7 +72,6 @@ export class UmButtonWrapper extends LitElement {
72
72
  this.buttonElement?.blur();
73
73
  }
74
74
  getAriaLabel() {
75
- console.log(this.ariaLabel);
76
75
  return this.ariaLabel || nothing;
77
76
  }
78
77
  innerFocusHandler() {
package/shared/button-wrapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\nimport { UmRipple } from '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n\n /**\n * Whether the button is disabled or not.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href: string | undefined;\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: string | undefined;\n\n @property() name: string | undefined;\n\n @query('.button') private readonly buttonElement!: HTMLElement;\n @query('u-ripple') private readonly ripple!: UmRipple;\n\n protected innerRole: string | null = null;\n\n get pathname(): string {\n return (<HTMLAnchorElement>this.buttonElement)?.pathname\n }\n\n protected override render(): HTMLTemplateResult {\n return typeof this.href === 'string'\n ? this.renderLink()\n : this.renderButton();\n }\n\n private renderButton() {\n return html`\n <button\n id=\"button\"\n class=\"button\"\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel || nothing}\n aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n .role=${this.innerRole}\n type=\"button\">\n <u-ripple ?disabled=${this.disabled}></u-ripple>\n <u-elevation></u-elevation>\n </button>\n <div class=\"content\">${this.renderContent()}</div>`;\n\n }\n\n private renderLink() {\n return html`<a\n id=\"link\"\n class=\"button\"\n href=${this.disabled ? nothing : this.href}\n aria-disabled=${this.disabled || nothing}\n aria-label=${this.ariaLabel || nothing}\n aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n .role=${this.innerRole}\n target=${this.target || nothing}>\n <u-elevation></u-elevation>\n <u-ripple ?disabled=${this.disabled}></u-ripple>\n </a>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n protected abstract renderContent(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('click', this.innerClickHandler);\n this.addEventListener('focus', this.innerFocusHandler)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('click', this.innerClickHandler);\n this.removeEventListener('focus', this.innerFocusHandler);\n }\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n\n this.buttonElement?.blur();\n }\n\n protected getAriaLabel(): string | null | typeof nothing {\n console.log(this.ariaLabel);\n return this.ariaLabel || nothing;\n }\n\n private innerFocusHandler(): void {\n const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n if (tabIndexAttributeValue !== \"0\") {\n return;\n }\n \n this.removeAttribute('tabindex');\n setTimeout(() => this.buttonElement?.focus());\n }\n\n private innerClickHandler(event: MouseEvent): void {\n\n if (this.disabled) {\n return;\n }\n\n if (!(<PointerEvent>event).pointerType) {\n this.ripple.createRipple();\n }\n\n this.handleClick(event);\n }\n\n protected handleClick(_: UIEvent): void {\n\n }\n}\n"]}
1
+ {"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\nimport { UmRipple } from '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n\n /**\n * Whether the button is disabled or not.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href: string | undefined;\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: string | undefined;\n\n @property() name: string | undefined;\n\n @query('.button') private readonly buttonElement!: HTMLElement;\n @query('u-ripple') private readonly ripple!: UmRipple;\n\n protected innerRole: string | null = null;\n\n get pathname(): string {\n return (<HTMLAnchorElement>this.buttonElement)?.pathname\n }\n\n protected override render(): HTMLTemplateResult {\n return typeof this.href === 'string'\n ? this.renderLink()\n : this.renderButton();\n }\n\n private renderButton() {\n return html`\n <button\n id=\"button\"\n class=\"button\"\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel || nothing}\n aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n .role=${this.innerRole}\n type=\"button\">\n <u-ripple ?disabled=${this.disabled}></u-ripple>\n <u-elevation></u-elevation>\n </button>\n <div class=\"content\">${this.renderContent()}</div>`;\n\n }\n\n private renderLink() {\n return html`<a\n id=\"link\"\n class=\"button\"\n href=${this.disabled ? nothing : this.href}\n aria-disabled=${this.disabled || nothing}\n aria-label=${this.ariaLabel || nothing}\n aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n .role=${this.innerRole}\n target=${this.target || nothing}>\n <u-elevation></u-elevation>\n <u-ripple ?disabled=${this.disabled}></u-ripple>\n </a>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n protected abstract renderContent(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('click', this.innerClickHandler);\n this.addEventListener('focus', this.innerFocusHandler)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('click', this.innerClickHandler);\n this.removeEventListener('focus', this.innerFocusHandler);\n }\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n\n this.buttonElement?.blur();\n }\n\n protected getAriaLabel(): string | null | typeof nothing {\n return this.ariaLabel || nothing;\n }\n\n private innerFocusHandler(): void {\n const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n if (tabIndexAttributeValue !== \"0\") {\n return;\n }\n \n this.removeAttribute('tabindex');\n setTimeout(() => this.buttonElement?.focus());\n }\n\n private innerClickHandler(event: MouseEvent): void {\n\n if (this.disabled) {\n return;\n }\n\n if (!(<PointerEvent>event).pointerType) {\n this.ripple.createRipple();\n }\n\n this.handleClick(event);\n }\n\n protected handleClick(_: UIEvent): void {\n\n }\n}\n"]}
package/shared/selection-control/selection-control.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAKzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGQ,OAAO,CADzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAIzB;IAED,SAAS;IAKA,iBAAiB;IAKjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAoBhD"}
1
+ {"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAKzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGQ,OAAO,CADzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAGzB;IAED,SAAS;IAKA,iBAAiB;IAKjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAoBhD"}
package/shared/selection-control/selection-control.js CHANGED
@@ -29,7 +29,6 @@ export class UmSelectionControl extends LitElement {
29
29
  return __classPrivateFieldGet(this, _UmSelectionControl_checked, "f");
30
30
  }
31
31
  set checked(value) {
32
- console.log(value);
33
32
  __classPrivateFieldSet(this, _UmSelectionControl_checked, value, "f");
34
33
  this.elementInternals.setFormValue(value ? this.value : null);
35
34
  }
package/shared/selection-control/selection-control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,OAAgB,kBAAmB,SAAQ,UAAU;IASzD,2BAA2B;IAC3B,oBAAoB;IAEpB,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAcD,IAAI,OAAO;QACT,OAAO,uBAAA,IAAI,mCAAS,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,CAAC,KAAc;QACxB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnB,uBAAA,IAAI,+BAAY,KAAK,MAAA,CAAC;QACtB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QAjCE,SAAI,GAAuB,EAAE,CAAC;QACA,aAAQ,GAAG,KAAK,CAAC;QAU3D,sCAAW,KAAK,EAAC;QACP,cAAS,GAAyB,UAAU,CAAC;QAC7C,iBAAY,GAAG,IAAI,CAAC;QAI9B;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAcvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAC;IACpD,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAA;IACtD,CAAC;IAEkB,MAAM;QACvB,MAAM,MAAM,GAAG,IAAI,CAAA,uBAAuB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAEtE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;iBAE7B,IAAI,CAAC,SAAS;;kBAEb,IAAI,CAAC,IAAI;qBACN,uBAAA,IAAI,mCAAS;sBACZ,IAAI,CAAC,QAAQ;2CACQ,IAAI,CAAC,eAAe,EAAE;aACpD,CAAC;IACZ,CAAC;;;IAGC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3D,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;AAC3D,CAAC;AAtEe,iCAAc,GAAG,IAAI,AAAP,CAAQ;AAI1B;IAAX,QAAQ,EAAE;gDAA+B;AACA;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAkB;AAC3C;IAAf,KAAK,CAAC,OAAO,CAAC;iDAA0B;AAkB7B;IAAX,QAAQ,EAAE;iDAAc;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAGzB","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../../ripple/ripple.js';\n\nexport abstract class UmSelectionControl extends LitElement {\n static readonly formAssociated = true;\n\n protected readonly elementInternals: ElementInternals;\n\n @property() name: string | undefined = '';\n @property({type: Boolean, reflect: true}) disabled = false;\n @query('input') input!: HTMLInputElement;\n\n // eslint-disable-next-line\n // #value: any = '';\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n #checked = false;\n protected inputType: 'checkbox' | 'radio' = 'checkbox';\n protected renderRipple = true;\n\n protected abstract renderIndicator(): HTMLTemplateResult;\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @property({type: Boolean})\n get checked() {\n return this.#checked;\n }\n set checked(value: boolean) {\n console.log(value);\n this.#checked = value;\n this.elementInternals.setFormValue(value ? this.value : null);\n }\n\n protected constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.#handleClick);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#handleClick)\n }\n\n protected override render(): HTMLTemplateResult {\n const ripple = html`<u-ripple ?disabled=${this.disabled}></u-ripple>`;\n\n return html`\n <div class=\"container\">\n ${this.renderRipple ? ripple : nothing}\n <input\n type=${this.inputType}\n class=\"focus-ring\"\n ?name=${this.name}\n .checked=${this.#checked}\n .disabled=${this.disabled} />\n <div class=\"indicator-container\">${this.renderIndicator()}</div>\n </div>`;\n }\n\n #handleClick() {\n this.checked = this.inputType === 'radio' || !this.checked;\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}
1
+ {"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,OAAgB,kBAAmB,SAAQ,UAAU;IASzD,2BAA2B;IAC3B,oBAAoB;IAEpB,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAcD,IAAI,OAAO;QACT,OAAO,uBAAA,IAAI,mCAAS,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,CAAC,KAAc;QACxB,uBAAA,IAAI,+BAAY,KAAK,MAAA,CAAC;QACtB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QAhCE,SAAI,GAAuB,EAAE,CAAC;QACA,aAAQ,GAAG,KAAK,CAAC;QAU3D,sCAAW,KAAK,EAAC;QACP,cAAS,GAAyB,UAAU,CAAC;QAC7C,iBAAY,GAAG,IAAI,CAAC;QAI9B;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAavB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAC;IACpD,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAA;IACtD,CAAC;IAEkB,MAAM;QACvB,MAAM,MAAM,GAAG,IAAI,CAAA,uBAAuB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAEtE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;iBAE7B,IAAI,CAAC,SAAS;;kBAEb,IAAI,CAAC,IAAI;qBACN,uBAAA,IAAI,mCAAS;sBACZ,IAAI,CAAC,QAAQ;2CACQ,IAAI,CAAC,eAAe,EAAE;aACpD,CAAC;IACZ,CAAC;;;IAGC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3D,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;AAC3D,CAAC;AArEe,iCAAc,GAAG,IAAI,AAAP,CAAQ;AAI1B;IAAX,QAAQ,EAAE;gDAA+B;AACA;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAkB;AAC3C;IAAf,KAAK,CAAC,OAAO,CAAC;iDAA0B;AAkB7B;IAAX,QAAQ,EAAE;iDAAc;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAGzB","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../../ripple/ripple.js';\n\nexport abstract class UmSelectionControl extends LitElement {\n static readonly formAssociated = true;\n\n protected readonly elementInternals: ElementInternals;\n\n @property() name: string | undefined = '';\n @property({type: Boolean, reflect: true}) disabled = false;\n @query('input') input!: HTMLInputElement;\n\n // eslint-disable-next-line\n // #value: any = '';\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n #checked = false;\n protected inputType: 'checkbox' | 'radio' = 'checkbox';\n protected renderRipple = true;\n\n protected abstract renderIndicator(): HTMLTemplateResult;\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @property({type: Boolean})\n get checked() {\n return this.#checked;\n }\n set checked(value: boolean) {\n this.#checked = value;\n this.elementInternals.setFormValue(value ? this.value : null);\n }\n\n protected constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.#handleClick);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#handleClick)\n }\n\n protected override render(): HTMLTemplateResult {\n const ripple = html`<u-ripple ?disabled=${this.disabled}></u-ripple>`;\n\n return html`\n <div class=\"container\">\n ${this.renderRipple ? ripple : nothing}\n <input\n type=${this.inputType}\n class=\"focus-ring\"\n ?name=${this.name}\n .checked=${this.#checked}\n .disabled=${this.disabled} />\n <div class=\"indicator-container\">${this.renderIndicator()}</div>\n </div>`;\n }\n\n #handleClick() {\n this.checked = this.inputType === 'radio' || !this.checked;\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}