@luzmo/lucero 1.0.1-alpha.18 → 1.0.1-alpha.19

package/components/text-field.module-DXhFA9G-.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";const e='#text-field{--luzmo-text-field-input-line-height: var( --luzmo-text-field-height, var(--text-field-height) );text-overflow:ellipsis;inline-size:var(--luzmo-text-field-width, var(--text-field-width));grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #text-field:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--luzmo-text-field-focus-indicator-width, 2px);position:absolute;inset-block-end:calc((var(--luzmo-text-field-focus-indicator-gap, 2px) + var(--luzmo-text-field-focus-indicator-width, 2px)) * -1);inset-inline-start:0}:host([quiet][focused]) #text-field:after{background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-informative-color)))}:host([quiet][invalid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)))}:host([quiet][valid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)))}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0;display:flex;align-items:center;justify-content:center}#text-field.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid));color:var(--highcontrast-text-field-icon-color-valid, var(--luzmo-text-field-icon-color-valid, var(--luzmo-positive-color)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid))}:host([invalid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid));color:var(--highcontrast-text-field-icon-color-invalid, var(--luzmo-text-field-icon-color-invalid, var(--luzmo-negative-color)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid))}:host([disabled]) #text-field .icon,:host([readonly]) #text-field .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-valid, 0px)}:host([quiet][invalid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-invalid, 0px)}#text-field .luzmo-field-label{grid-area:1/1/auto/span 1;margin-block-end:var(--luzmo-text-field-label-spacing-block, 0px)}:host([quiet]) .luzmo-field-label{margin-block-end:var(--luzmo-text-field-label-spacing-block-quiet, var(--text-field-label-spacing-block-quiet))}:host([disabled]) .luzmo-field-label{color:var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled))}#text-field .luzmo-help-text{grid-area:3/1/auto/span 2;margin-block-start:var(--luzmo-text-field-helptext-spacing-block, 0px)}.luzmo-text-field-characterCount{inline-size:auto;font-size:var(--luzmo-text-field-character-count-font-size, var(--text-field-character-count-font-size));font-family:var(--luzmo-text-field-character-count-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-character-count-font-weight, var(--luzmo-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--luzmo-text-field-character-count-spacing-block, var(--text-field-character-count-spacing-block));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline, 12px);margin-inline-end:0;padding-inline-end:calc(var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius)) / 2);display:inline-flex}:host([quiet]) .luzmo-text-field-characterCount{margin-block-end:var(--luzmo-text-field-character-count-spacing-block-quiet, var(--text-field-character-count-spacing-block-quiet))}.input{text-align:var(--luzmo-text-field-text-align, start);line-height:var(--luzmo-text-field-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--luzmo-text-field-min-width, 1.5);block-size:var(--luzmo-text-field-height, var(--text-field-height));padding-block-start:calc(var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-block-end:calc(var(--luzmo-text-field-spacing-block-end, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-inline:calc(var(--luzmo-text-field-spacing-inline, var(--text-field-spacing-inline)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));vertical-align:top;background-color:var(--luzmo-text-field-background-color, var(--luzmo-background-color));border-color:var(--highcontrast-text-field-border-color, var(--luzmo-text-field-border-color, var(--luzmo-border-color)));border-style:solid;border-width:var(--luzmo-text-field-border-width, var(--luzmo-border-width));border-radius:var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius));transition:border-color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-text-color-default, var(--luzmo-font-color)));text-overflow:ellipsis;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:text-field}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-placeholder-text-color-default, var(--luzmo-font-color-disabled)));transition:color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-text-field-border-color-focus, var(--luzmo-text-field-border-color-focus, var(--luzmo-primary)));color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-text-color-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-placeholder-text-color-focus, var(--luzmo-disabled-color)))}:host([focused]) .input{border-color:var(--highcontrast-text-field-border-color-keyboard-focus, var(--luzmo-text-field-border-color-keyboard-focus, var(--luzmo-primary)));outline:var(--luzmo-text-field-focus-indicator-width, 0) solid;outline-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-informative-color)));outline-offset:var(--luzmo-text-field-focus-indicator-gap, 2px);color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-text-color-keyboard-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder{color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-placeholder-text-color-keyboard-focus, var(--luzmo-disabled-color)))}:host([valid]) .input{color:var(--highcontrast-text-field-text-color-valid, var(--luzmo-text-field-text-color-valid, var(--luzmo-font-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input{color:var(--highcontrast-text-field-text-color-invalid, var(--luzmo-text-field-text-color-invalid, var(--luzmo-font-color)));border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(--luzmo-negative-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-text-field-border-color-invalid-focus, var(--luzmo-text-field-border-color-invalid-focus, var(--luzmo-negative-color)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-text-field-border-color-invalid-keyboard-focus, var(--luzmo-text-field-border-color-invalid-keyboard-focus, var(--luzmo-negative-color)))}.input:disabled,:host([disabled]) #text-field .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #text-field .input,:host([disabled]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([border=none]) .input{border-width:0;outline:none}:host([quiet]) .input{padding-block-start:var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-2));padding-inline:var(--luzmo-text-field-spacing-inline-quiet, 0px);background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--luzmo-text-field-spacing-block-quiet, 0px);overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-disabled-color)))}.input:read-only,:host([readonly]) #text-field .input{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-disabled-color)));background-color:initial}@media (hover: hover){.input:hover,#text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-hover, var(--luzmo-text-field-border-color-hover, rgba(var(--luzmo-primary-rgb), .3)))}.input:hover,#text-field:hover .input{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-text-color-hover, var(--luzmo-font-color-hard)))}.input:hover::placeholder,#text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-placeholder-text-color-hover, var(--luzmo-disabled-color)))}:host([focused]) .input:hover,:host([focused]) #text-field:hover .input,.input:focus:hover{border-color:var(--highcontrast-text-field-border-color-focus-hover, var(--luzmo-text-field-border-color-focus-hover, var(--luzmo-primary)))}:host([focused]) .input:hover,.input:focus:hover{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-text-color-focus-hover, var(--luzmo-font-color-hard)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-placeholder-text-color-focus-hover, var(--luzmo-disabled-color)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-text-field-border-color-invalid-hover, var(--luzmo-text-field-border-color-invalid-hover, var(--luzmo-negative-color)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-text-field-border-color-invalid-focus-hover, var(--luzmo-text-field-border-color-invalid-focus-hover, var(--luzmo-negative-color)))}:host([disabled]) #text-field:hover .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #text-field:hover .input,:host([disabled]) #text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([readonly]) #text-field:hover .input{border-color:#0000;outline:none}:host([readonly]) #text-field:hover .input,:host([readonly]) #text-field:hover .input::placeholder{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)))}}.luzmo-text-field--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.luzmo-text-field--sideLabel:after{grid-area:1/2/span 1/span 1}.luzmo-text-field--sideLabel .luzmo-field-label{grid-area:1/1/span 2/span 1;margin-inline-end:var(--luzmo-text-field-label-spacing-inline-side-label, var(--text-field-label-spacing-inline-side-label))}.luzmo-text-field--sideLabel .luzmo-text-field-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--luzmo-text-field-character-count-spacing-block-side, var(--text-field-character-count-spacing-block-side));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline-side, 12px)}.luzmo-text-field--sideLabel .luzmo-help-text{grid-area:2/2/auto/span 1}.luzmo-text-field--sideLabel .input,.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--luzmo-text-field-input-line-height: normal}:host([multiline]) .input{min-inline-size:var(--luzmo-text-area-min-inline-size, 112px);min-block-size:var(--luzmo-text-area-min-block-size, 56px);resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .luzmo-text-field--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--luzmo-text-area-min-block-size-quiet, var(--text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors: active){:host{--highcontrast-text-field-border-color-hover: Highlight;--highcontrast-text-field-border-color-focus: Highlight;--highcontrast-text-field-border-color-keyboard-focus: CanvasText;--highcontrast-text-field-focus-indicator-color: Highlight;--highcontrast-text-field-border-color-invalid-default: Highlight;--highcontrast-text-field-border-color-invalid-hover: Highlight;--highcontrast-text-field-border-color-invalid-focus: Highlight;--highcontrast-text-field-border-color-invalid-keyboard-focus: Highlight;--highcontrast-text-field-text-color-valid: CanvasText;--highcontrast-text-field-text-color-invalid: CanvasText}#text-field .input{--highcontrast-text-field-text-color-default: CanvasText;--highcontrast-text-field-text-color-hover: CanvasText;--highcontrast-text-field-text-color-keyboard-focus: CanvasText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}#text-field .input::placeholder{--highcontrast-text-field-text-color-default: GrayText;--highcontrast-text-field-text-color-hover: GrayText;--highcontrast-text-field-text-color-keyboard-focus: GrayText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}}:host{display:inline-flex;flex-direction:column;inline-size:var(--luzmo-text-field-width, var(--text-field-width))}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#text-field{inline-size:100%}#text-field,textarea{resize:inherit}.input{min-inline-size:var(--luzmo-text-field-min-width, 1.5)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0!important;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #text-field{display:inline-grid;--luzmo-text-field-input-line-height: normal}:host([multiline]) textarea{transition:box-shadow var(--luzmo-animation-duration) ease-in-out,border-color var(--luzmo-animation-duration) ease-in-out}:host([multiline]:not([quiet])) #text-field:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #text-field .input,:host([disabled][quiet]) #text-field:hover .input,:host([quiet]) .input :disabled{background-color:#0000;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled));color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([disabled]) #text-field .icon.icon-search,:host([readonly]) #text-field .icon.icon-search{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([multiline][grows]:not([quiet])) #text-field:after{grid-area:unset;min-block-size:calc(var(--luzmo-text-area-min-block-size, var(--luzmo-text-area-min-block-size)) + var(--luzmo-text-field-focus-indicator-gap, 2px) * 2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){position:absolute;top:0;left:0;height:100%;resize:none;overflow:hidden}:host{--text-field-height: var(--luzmo-component-height);--text-field-width: 240px;--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 14px;--text-field-spacing-inline: 12px;--text-field-icon-size-invalid: 18px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 12px;--text-field-icon-spacing-inline-end-valid: 15px;--text-field-icon-spacing-block-invalid: 7px;--text-field-icon-spacing-block-valid: 4px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-4);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-4);--text-field-character-count-font-size: var(--luzmo-font-size-s);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 8px;--text-area-min-block-size-quiet: var(--luzmo-component-height)}:host([size=s]){--text-field-height: var(--luzmo-component-height-s);--text-field-width: 220px;--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 8px;--text-field-placeholder-font-size: 12px;--text-field-spacing-inline: 9px;--text-field-icon-size-invalid: 16px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 9px;--text-field-icon-spacing-inline-end-valid: 11px;--text-field-icon-spacing-block-invalid: 2px;--text-field-icon-spacing-block-valid: -1px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-3);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-3);--text-field-character-count-font-size: var(--luzmo-font-size-xs);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 4px;--text-area-min-block-size-quiet: var(--luzmo-component-height-s)}:host([size=l]){--text-field-height: var(--luzmo-component-height-l);--text-field-width: 280px;--text-field-label-spacing-block-quiet: -12px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 16px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 20px;--text-field-icon-size-valid: 12px;--text-field-icon-spacing-inline-end-invalid: 15px;--text-field-icon-spacing-inline-end-valid: 17px;--text-field-icon-spacing-block-invalid: 10px;--text-field-icon-spacing-block-valid: 8px;--text-field-icon-spacing-inline-start-invalid: 15px;--text-field-icon-spacing-inline-start-valid: 15px;--text-field-character-count-font-size: var(--luzmo-font-size);--text-field-character-count-spacing-block: 9px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 11px;--text-area-min-block-size-quiet: var(--luzmo-component-height-l)}:host([size=xl]){--text-field-height: var(--luzmo-component-height-xl);--text-field-width: 320px;--text-field-label-spacing-block-quiet: -15px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 18px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 22px;--text-field-icon-size-valid: 14px;--text-field-icon-spacing-inline-end-invalid: 18px;--text-field-icon-spacing-inline-end-valid: 20px;--text-field-icon-spacing-block-invalid: 12px;--text-field-icon-spacing-block-valid: 13px;--text-field-icon-spacing-inline-start-invalid: 18px;--text-field-icon-spacing-inline-start-valid: 18px;--text-field-character-count-font-size: var(--luzmo-font-size-l);--text-field-character-count-spacing-block: 11px;--text-field-character-count-spacing-block-quiet: -4px;--text-field-character-count-spacing-block-side: 14px;--text-area-min-block-size-quiet: var(--luzmo-component-height-xl)}';exports.textFieldStyles=e;

package/components/toast/index.cjs

@@ -15,152 +15,26 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const base = require("../base-COw9n7UR.cjs");
-require("../close-button-DPBK6Kpu.cjs");
-const focusVisible = require("../focus-visible-B-B8-P9R.cjs");
-const icons = require("@luzmo/icons");
-const toastStyles = "@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-negative-color);--toast-positive-background-color-default: var(--luzmo-positive-color);--toast-informative-background-color-default: var(--luzmo-informative-color);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const toastVariants = ["negative", "positive", "info"];
-class LuzmoToast extends focusVisible.FocusVisiblePolyfillMixin(base.LuzmoElement) {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this._timeout = null;
-    this._variant = "";
-    this.countdownStart = 0;
-    this.nextCount = -1;
-    this.doCountdown = (time) => {
-      if (!this.countdownStart) {
-        this.countdownStart = performance.now();
-      }
-      if (time - this.countdownStart > this._timeout) {
-        this.shouldClose();
-        this.countdownStart = 0;
-      } else {
-        this.countdown();
-      }
-    };
-    this.countdown = () => {
-      cancelAnimationFrame(this.nextCount);
-      this.nextCount = requestAnimationFrame(this.doCountdown);
-    };
-    this.holdCountdown = () => {
-      this.stopCountdown();
-      this.addEventListener("focusout", this.resumeCountdown);
-    };
-    this.resumeCountdown = () => {
-      this.removeEventListener("focusout", this.holdCountdown);
-      this.countdown();
-    };
-  }
-  static get styles() {
-    return [lit.unsafeCSS(toastStyles)];
-  }
-  set timeout(timeout) {
-    const hasTimeout = typeof timeout !== null && timeout > 0;
-    const newTimeout = hasTimeout ? Math.max(6e3, timeout) : null;
-    const oldValue = this.timeout;
-    if (newTimeout && this.countdownStart) {
-      this.countdownStart = performance.now();
-    }
-    this._timeout = newTimeout;
-    this.requestUpdate("timeout", oldValue);
-  }
-  get timeout() {
-    return this._timeout;
-  }
-  set variant(variant) {
-    if (variant === this.variant) {
-      return;
-    }
-    const oldValue = this.variant;
-    if (toastVariants.includes(variant)) {
-      this.setAttribute("variant", variant);
-      this._variant = variant;
-    } else {
-      this.removeAttribute("variant");
-      this._variant = "";
-    }
-    this.requestUpdate("variant", oldValue);
-  }
-  get variant() {
-    return this._variant;
-  }
-  // TODO(#4931): Address the deprecated variants or remove the flags
-  renderIcon(variant, iconLabel) {
-    switch (variant) {
-      case "info": {
-        return lit.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-Cy0MQrPT.cjs");require("../close-button-BTo4yrFR.cjs");const d=require("../focus-visible-D4BXb5RB.cjs"),u=require("../luzmo-icons-CtA-TJPd.cjs"),v="@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-negative-color);--toast-positive-background-color-default: var(--luzmo-positive-color);--toast-informative-background-color-default: var(--luzmo-informative-color);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";var g=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(r,t,a,i)=>{for(var n=i>1?void 0:i?h(t,a):t,l=r.length-1,c;l>=0;l--)(c=r[l])&&(n=(i?c(t,a,n):c(n))||n);return i&&n&&g(t,a,n),n};const p=["negative","positive","info"];class e extends d.FocusVisiblePolyfillMixin(o.LuzmoElement){constructor(){super(...arguments),this.open=!1,this._timeout=null,this._variant="",this.countdownStart=0,this.nextCount=-1,this.doCountdown=t=>{this.countdownStart||(this.countdownStart=performance.now()),t-this.countdownStart>this._timeout?(this.shouldClose(),this.countdownStart=0):this.countdown()},this.countdown=()=>{cancelAnimationFrame(this.nextCount),this.nextCount=requestAnimationFrame(this.doCountdown)},this.holdCountdown=()=>{this.stopCountdown(),this.addEventListener("focusout",this.resumeCountdown)},this.resumeCountdown=()=>{this.removeEventListener("focusout",this.holdCountdown),this.countdown()}}static get styles(){return[o.r(v)]}set timeout(t){const i=typeof t!==null&&t>0?Math.max(6e3,t):null,n=this.timeout;i&&this.countdownStart&&(this.countdownStart=performance.now()),this._timeout=i,this.requestUpdate("timeout",n)}get timeout(){return this._timeout}set variant(t){if(t===this.variant)return;const a=this.variant;p.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",a)}get variant(){return this._variant}renderIcon(t,a){switch(t){case"info":return o.x`
           <luzmo-icon
-            .icon=${icons.luzmoInfoCircleOutline}
-            label=${iconLabel || "Information"}
+            .icon=${u.p1}
+            label=${a||"Information"}
             class="type"
           ></luzmo-icon>
-        `;
-      }
-      case "negative": {
-        return lit.html`
+        `;case"negative":return o.x`
           <luzmo-icon
-            .icon=${icons.luzmoAlertOutline}
-            label=${iconLabel || "Error"}
+            .icon=${u.I}
+            label=${a||"Error"}
             class="type"
           ></luzmo-icon>
-        `;
-      }
-      case "positive": {
-        return lit.html`
+        `;case"positive":return o.x`
           <luzmo-icon
-            .icon=${icons.luzmoCheckCircleOutline}
-            label=${iconLabel || "Success"}
+            .icon=${u.C0}
+            label=${a||"Success"}
             class="type"
           ></luzmo-icon>
-        `;
-      }
-      default: {
-        return lit.html``;
-      }
-    }
-  }
-  startCountdown() {
-    this.countdown();
-    this.addEventListener("focusin", this.holdCountdown);
-  }
-  stopCountdown() {
-    cancelAnimationFrame(this.nextCount);
-    this.countdownStart = 0;
-  }
-  shouldClose() {
-    const applyDefault = this.dispatchEvent(
-      new CustomEvent("close", {
-        composed: true,
-        bubbles: true,
-        cancelable: true
-      })
-    );
-    if (applyDefault) {
-      this.close();
-    }
-  }
-  close() {
-    this.open = false;
-  }
-  render() {
-    return lit.html`
-      ${this.renderIcon(this.variant, this.iconLabel)}
+        `;default:return o.x``}}startCountdown(){this.countdown(),this.addEventListener("focusin",this.holdCountdown)}stopCountdown(){cancelAnimationFrame(this.nextCount),this.countdownStart=0}shouldClose(){this.dispatchEvent(new CustomEvent("close",{composed:!0,bubbles:!0,cancelable:!0}))&&this.close()}close(){this.open=!1}render(){return o.x`
+      ${this.renderIcon(this.variant,this.iconLabel)}
       <div class="body" role="alert">
         <div class="content">
           <slot></slot>
@@ -174,43 +48,4 @@ class LuzmoToast extends focusVisible.FocusVisiblePolyfillMixin(base.LuzmoElemen
           static-color="white"
         ></luzmo-close-button>
       </div>
-    `;
-  }
-  updated(changes) {
-    super.updated(changes);
-    if (changes.has("open")) {
-      if (this.open) {
-        if (this.timeout) {
-          this.startCountdown();
-        }
-      } else {
-        if (this.timeout) {
-          this.stopCountdown();
-        }
-      }
-    }
-    if (changes.has("timeout")) {
-      if (this.timeout !== null && this.open) {
-        this.startCountdown();
-      } else {
-        this.stopCountdown();
-      }
-    }
-  }
-}
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoToast.prototype, "open", 2);
-__decorateClass([
-  decorators_js.property({ type: Number })
-], LuzmoToast.prototype, "timeout", 1);
-__decorateClass([
-  decorators_js.property({ type: String })
-], LuzmoToast.prototype, "variant", 1);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "icon-label" })
-], LuzmoToast.prototype, "iconLabel", 2);
-if (!customElements.get("luzmo-toast")) {
-  customElements.define("luzmo-toast", LuzmoToast);
-}
-exports.LuzmoToast = LuzmoToast;
+    `}updated(t){super.updated(t),t.has("open")&&(this.open?this.timeout&&this.startCountdown():this.timeout&&this.stopCountdown()),t.has("timeout")&&(this.timeout!==null&&this.open?this.startCountdown():this.stopCountdown())}}s([o.n({type:Boolean,reflect:!0})],e.prototype,"open",2);s([o.n({type:Number})],e.prototype,"timeout",1);s([o.n({type:String})],e.prototype,"variant",1);s([o.n({type:String,attribute:"icon-label"})],e.prototype,"iconLabel",2);customElements.get("luzmo-toast")||customElements.define("luzmo-toast",e);exports.LuzmoToast=e;

package/components/toast/index.js

@@ -15,158 +15,106 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const initializeGlobalLuzmoCSSVariables = () => {
-  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
-    const styleElement = document.createElement("style");
-    styleElement.setAttribute("data-luzmo-vars", "");
-    styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
-    document.head.appendChild(styleElement);
+import { a as m, r as g, x as i, n as l } from "../base-CFWO09N1.js";
+import "../close-button-CuQdsez5.js";
+import { F as v } from "../focus-visible-BvScGDCE.js";
+import { C as p, I as b, p as z } from "../luzmo-icons-CiSek5iM.js";
+const d = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const e = document.createElement("style");
+    e.setAttribute("data-luzmo-vars", ""), e.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(e);
   }
 };
-initializeGlobalLuzmoCSSVariables();
-import { unsafeCSS, html } from "lit";
-import { property } from "lit/decorators.js";
-import { a as LuzmoElement } from "../base-DmeVy0cq.js";
-import "../close-button-Miw9ZjoJ.js";
-import { F as FocusVisiblePolyfillMixin } from "../focus-visible-BUPRWlsh.js";
-import { luzmoCheckCircleOutline, luzmoAlertOutline, luzmoInfoCircleOutline } from "@luzmo/icons";
-const toastStyles = "@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-negative-color);--toast-positive-background-color-default: var(--luzmo-positive-color);--toast-informative-background-color-default: var(--luzmo-informative-color);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
+d();
+const h = "@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-negative-color);--toast-positive-background-color-default: var(--luzmo-positive-color);--toast-informative-background-color-default: var(--luzmo-informative-color);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";
+var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (e, o, t, r) => {
+  for (var a = r > 1 ? void 0 : r ? x(o, t) : o, c = e.length - 1, u; c >= 0; c--)
+    (u = e[c]) && (a = (r ? u(o, t, a) : u(a)) || a);
+  return r && a && f(o, t, a), a;
 };
-const toastVariants = ["negative", "positive", "info"];
-class LuzmoToast extends FocusVisiblePolyfillMixin(LuzmoElement) {
+const k = ["negative", "positive", "info"];
+class n extends v(m) {
   constructor() {
-    super(...arguments);
-    this.open = false;
-    this._timeout = null;
-    this._variant = "";
-    this.countdownStart = 0;
-    this.nextCount = -1;
-    this.doCountdown = (time) => {
-      if (!this.countdownStart) {
-        this.countdownStart = performance.now();
-      }
-      if (time - this.countdownStart > this._timeout) {
-        this.shouldClose();
-        this.countdownStart = 0;
-      } else {
-        this.countdown();
-      }
-    };
-    this.countdown = () => {
-      cancelAnimationFrame(this.nextCount);
-      this.nextCount = requestAnimationFrame(this.doCountdown);
-    };
-    this.holdCountdown = () => {
-      this.stopCountdown();
-      this.addEventListener("focusout", this.resumeCountdown);
-    };
-    this.resumeCountdown = () => {
-      this.removeEventListener("focusout", this.holdCountdown);
-      this.countdown();
+    super(...arguments), this.open = !1, this._timeout = null, this._variant = "", this.countdownStart = 0, this.nextCount = -1, this.doCountdown = (o) => {
+      this.countdownStart || (this.countdownStart = performance.now()), o - this.countdownStart > this._timeout ? (this.shouldClose(), this.countdownStart = 0) : this.countdown();
+    }, this.countdown = () => {
+      cancelAnimationFrame(this.nextCount), this.nextCount = requestAnimationFrame(this.doCountdown);
+    }, this.holdCountdown = () => {
+      this.stopCountdown(), this.addEventListener("focusout", this.resumeCountdown);
+    }, this.resumeCountdown = () => {
+      this.removeEventListener("focusout", this.holdCountdown), this.countdown();
     };
   }
   static get styles() {
-    return [unsafeCSS(toastStyles)];
+    return [g(h)];
   }
-  set timeout(timeout) {
-    const hasTimeout = typeof timeout !== null && timeout > 0;
-    const newTimeout = hasTimeout ? Math.max(6e3, timeout) : null;
-    const oldValue = this.timeout;
-    if (newTimeout && this.countdownStart) {
-      this.countdownStart = performance.now();
-    }
-    this._timeout = newTimeout;
-    this.requestUpdate("timeout", oldValue);
+  set timeout(o) {
+    const r = typeof o !== null && o > 0 ? Math.max(6e3, o) : null, a = this.timeout;
+    r && this.countdownStart && (this.countdownStart = performance.now()), this._timeout = r, this.requestUpdate("timeout", a);
   }
   get timeout() {
     return this._timeout;
   }
-  set variant(variant) {
-    if (variant === this.variant) {
+  set variant(o) {
+    if (o === this.variant)
       return;
-    }
-    const oldValue = this.variant;
-    if (toastVariants.includes(variant)) {
-      this.setAttribute("variant", variant);
-      this._variant = variant;
-    } else {
-      this.removeAttribute("variant");
-      this._variant = "";
-    }
-    this.requestUpdate("variant", oldValue);
+    const t = this.variant;
+    k.includes(o) ? (this.setAttribute("variant", o), this._variant = o) : (this.removeAttribute("variant"), this._variant = ""), this.requestUpdate("variant", t);
   }
   get variant() {
     return this._variant;
   }
   // TODO(#4931): Address the deprecated variants or remove the flags
-  renderIcon(variant, iconLabel) {
-    switch (variant) {
-      case "info": {
-        return html`
+  renderIcon(o, t) {
+    switch (o) {
+      case "info":
+        return i`
           <luzmo-icon
-            .icon=${luzmoInfoCircleOutline}
-            label=${iconLabel || "Information"}
+            .icon=${z}
+            label=${t || "Information"}
             class="type"
           ></luzmo-icon>
         `;
-      }
-      case "negative": {
-        return html`
+      case "negative":
+        return i`
           <luzmo-icon
-            .icon=${luzmoAlertOutline}
-            label=${iconLabel || "Error"}
+            .icon=${b}
+            label=${t || "Error"}
             class="type"
           ></luzmo-icon>
         `;
-      }
-      case "positive": {
-        return html`
+      case "positive":
+        return i`
           <luzmo-icon
-            .icon=${luzmoCheckCircleOutline}
-            label=${iconLabel || "Success"}
+            .icon=${p}
+            label=${t || "Success"}
             class="type"
           ></luzmo-icon>
         `;
-      }
-      default: {
-        return html``;
-      }
+      default:
+        return i``;
     }
   }
   startCountdown() {
-    this.countdown();
-    this.addEventListener("focusin", this.holdCountdown);
+    this.countdown(), this.addEventListener("focusin", this.holdCountdown);
   }
   stopCountdown() {
-    cancelAnimationFrame(this.nextCount);
-    this.countdownStart = 0;
+    cancelAnimationFrame(this.nextCount), this.countdownStart = 0;
   }
   shouldClose() {
-    const applyDefault = this.dispatchEvent(
+    this.dispatchEvent(
       new CustomEvent("close", {
-        composed: true,
-        bubbles: true,
-        cancelable: true
+        composed: !0,
+        bubbles: !0,
+        cancelable: !0
       })
-    );
-    if (applyDefault) {
-      this.close();
-    }
+    ) && this.close();
   }
   close() {
-    this.open = false;
+    this.open = !1;
   }
   render() {
-    return html`
+    return i`
       ${this.renderIcon(this.variant, this.iconLabel)}
       <div class="body" role="alert">
         <div class="content">
@@ -183,43 +131,23 @@ class LuzmoToast extends FocusVisiblePolyfillMixin(LuzmoElement) {
       </div>
     `;
   }
-  updated(changes) {
-    super.updated(changes);
-    if (changes.has("open")) {
-      if (this.open) {
-        if (this.timeout) {
-          this.startCountdown();
-        }
-      } else {
-        if (this.timeout) {
-          this.stopCountdown();
-        }
-      }
-    }
-    if (changes.has("timeout")) {
-      if (this.timeout !== null && this.open) {
-        this.startCountdown();
-      } else {
-        this.stopCountdown();
-      }
-    }
+  updated(o) {
+    super.updated(o), o.has("open") && (this.open ? this.timeout && this.startCountdown() : this.timeout && this.stopCountdown()), o.has("timeout") && (this.timeout !== null && this.open ? this.startCountdown() : this.stopCountdown());
   }
 }
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LuzmoToast.prototype, "open", 2);
-__decorateClass([
-  property({ type: Number })
-], LuzmoToast.prototype, "timeout", 1);
-__decorateClass([
-  property({ type: String })
-], LuzmoToast.prototype, "variant", 1);
-__decorateClass([
-  property({ type: String, attribute: "icon-label" })
-], LuzmoToast.prototype, "iconLabel", 2);
-if (!customElements.get("luzmo-toast")) {
-  customElements.define("luzmo-toast", LuzmoToast);
-}
+s([
+  l({ type: Boolean, reflect: !0 })
+], n.prototype, "open", 2);
+s([
+  l({ type: Number })
+], n.prototype, "timeout", 1);
+s([
+  l({ type: String })
+], n.prototype, "variant", 1);
+s([
+  l({ type: String, attribute: "icon-label" })
+], n.prototype, "iconLabel", 2);
+customElements.get("luzmo-toast") || customElements.define("luzmo-toast", n);
 export {
-  LuzmoToast
+  n as LuzmoToast
 };