@sbb-esta/lyne-elements-dev 5.9.0-dev.1790057056 → 5.9.0-dev.1790084791
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.
- package/button/_button.global.scss +593 -0
- package/button.pure.js +14 -15
- package/core/styles/_theme.scss +1 -0
- package/development/button.pure.js +2 -6
- package/development/dialog.pure.js +1 -1
- package/dialog.pure.js +1 -1
- package/lean-off-brand-theme.css +668 -0
- package/lean-safety-theme.css +668 -0
- package/lean-theme.css +668 -0
- package/off-brand-theme.css +668 -0
- package/package.json +2 -2
- package/safety-theme.css +668 -0
- package/standard-theme.css +668 -0
package/button.pure.js
CHANGED
|
@@ -1,28 +1,27 @@
|
|
|
1
|
-
import{SbbActionBaseElement as e,SbbButtonBaseElement as t,SbbDisabledInteractiveMixin as n,SbbDisabledMixin as r,SbbDisabledTabIndexActionMixin as i,SbbElement as a,SbbLinkBaseElement as o,SbbNamedSlotListMixin as s,SbbNegativeMixin as c,forceType as l}from"./core.js";import{__esDecorate as u,__runInitializers as d}from"tslib";import{html as f,
|
|
2
|
-
`,
|
|
3
|
-
`,
|
|
4
|
-
`,
|
|
5
|
-
`,
|
|
6
|
-
`,
|
|
7
|
-
`,
|
|
8
|
-
`;const T=
|
|
1
|
+
import{SbbActionBaseElement as e,SbbButtonBaseElement as t,SbbDisabledInteractiveMixin as n,SbbDisabledMixin as r,SbbDisabledTabIndexActionMixin as i,SbbElement as a,SbbLinkBaseElement as o,SbbNamedSlotListMixin as s,SbbNegativeMixin as c,forceType as l}from"./core.js";import{__esDecorate as u,__runInitializers as d}from"tslib";import{html as f,unsafeCSS as p}from"lit";import{property as m}from"lit/decorators.js";import{html as h}from"lit/static-html.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`:host{--sbb-button-color-active-background:var(--sbb-background-color-1-inverted);--sbb-button-color-active-border:var(--sbb-border-color-1);--sbb-button-color-active-text:light-dark(var(--sbb-color-cloud),var(--sbb-color-anthracite));--sbb-button-color-default-background:var(--sbb-background-color-3-inverted);--sbb-button-color-default-border:var(--sbb-border-color-3);--sbb-button-color-default-text:var(--sbb-color-1-inverted);--sbb-button-color-hover-background:var(--sbb-background-color-3-inverted);--sbb-button-color-hover-border:var(--sbb-border-color-3);--sbb-button-color-hover-text:var(--sbb-color-3-inverted);--sbb-button-color-loading-border:light-dark(var(--sbb-color-iron),var(--sbb-color-silver));--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent))}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-1-negative-inverted);--sbb-button-color-active-border:var(--sbb-border-color-1-negative);--sbb-button-color-active-text:var(--sbb-color-anthracite);--sbb-button-color-default-background:var(--sbb-background-color-3-negative-inverted);--sbb-button-color-default-border:var(--sbb-border-color-3-negative);--sbb-button-color-default-text:var(--sbb-color-1-negative-inverted);--sbb-button-color-hover-background:var(--sbb-background-color-3-negative-inverted);--sbb-button-color-hover-border:var(--sbb-border-color-3-negative);--sbb-button-color-hover-text:var(--sbb-color-4-negative-inverted);--sbb-button-color-loading-border:var(--sbb-color-silver);--sbb-button-shadow-1-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}
|
|
2
|
+
`,v=`:host{--sbb-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-button-box-shadow-definition:var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--_width:unset;--_border-color:var(--sbb-button-color-default-border);--_background-color:var(--sbb-button-color-default-background);--_background:var(--_background-color);--_color:var(--sbb-button-color-default-text);--_button-inset:0;--_hover-offset:.0625rem;--_padding-block:var(--sbb-button-padding-block-min);--_padding-inline:var(--sbb-button-padding-inline);--_border:calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix,1px)) solid var(--_border-color);--_animation-loading-delay:var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay));--_animation-loading-duration:var(--sbb-disable-animation-duration,3s);--_animation-loading-rotate-function:linear(0, .25 12.5% 37.5%, .75 62.5% 87.5%, 1);--_animation-loading-rotate:sbb-button-rotate var(--_animation-loading-duration) var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);--_animation-loading-move:sbb-button-move calc(var(--_animation-loading-duration) / 2) var(--_animation-loading-delay) alternate infinite linear;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-button-border-overlap-fix:0rem;--sbb-button-color-default-border:CanvasText!important;--sbb-button-color-active-border:Highlight!important;--sbb-button-color-default-background:Canvas!important;--sbb-button-color-hover-background:Canvas!important;--sbb-button-color-active-background:Canvas!important;--sbb-button-color-disabled-background:Canvas!important;--sbb-button-color-disabled-text:GrayText!important;--sbb-button-color-loading-border:Highlight!important;--_sbb-button-loading-hidden-border-color:Canvas!important;--sbb-button-color-default-text:CanvasText!important;--sbb-button-color-hover-text:CanvasText!important;--sbb-button-color-active-text:CanvasText!important}:host(:is(:state(button),[state--button])){--sbb-button-color-default-text:ButtonText!important;--sbb-button-color-hover-text:ButtonText!important;--sbb-button-color-active-text:ButtonText!important}:host(:is(:state(link),[state--link])){--sbb-button-color-default-text:LinkText!important;--sbb-button-color-hover-text:LinkText!important;--sbb-button-color-active-text:LinkText!important}}:host([negative]){--sbb-button-color-disabled-background:var(--sbb-background-color-3-negative);--sbb-button-color-disabled-text:var(--sbb-color-aluminium)}:host([size=l]){--sbb-button-min-height:var(--sbb-button-min-height-size-l);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-l)}:host([size=m]){--sbb-button-min-height:var(--sbb-button-min-height-size-m);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-m)}:host([size=s]){--sbb-button-min-height:var(--sbb-button-min-height-size-s);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-s);--sbb-button-gap:var(--sbb-spacing-fixed-1x)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-button-padding-inline:0;--_width:var(--sbb-button-min-height);--_animation-loading-rotate-function:linear}@media (any-hover:hover){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-translate-y-content-hover:-.0625rem;--sbb-button-shadow-1-offset-y:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y));--sbb-button-shadow-1-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));--sbb-button-cursor:var(--sbb-cursor-pointer);--_border-color:var(--sbb-button-color-hover-border);--_color:var(--sbb-button-color-hover-text);--_background-color:var(--sbb-button-color-hover-background);--_button-inset:calc(var(--sbb-button-border-width) * -1)}}@media (forced-colors:active){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-color-hover-border:Highlight!important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor:var(--sbb-cursor-default);--_color:var(--sbb-button-color-disabled-text);--_background-color:var(--sbb-button-color-disabled-background);--_border-color:var(--sbb-button-color-disabled-border);--_border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,:is(:state(active),[state--active]),[loading])){--_color:var(--sbb-button-color-active-text);--_background-color:var(--sbb-button-color-active-background);--_border-color:var(--sbb-button-color-active-border)}:host([loading]:not([disabled],:disabled,[disabled-interactive])){--_loading-outline-offset:calc(var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width));--_border:none;--_border-action:var(--sbb-button-loading-border-width) dotted var(--_sbb-button-loading-hidden-border-color,transparent);--_padding-block:calc(var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width));--_padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));--_animation:var(--_animation-loading-rotate), var(--_animation-loading-move)}.sbb-action-base{gap:var(--sbb-button-gap);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-letter-spacing-text);font-weight:700;line-height:var(--sbb-typo-line-height-text);text-align:left;white-space:nowrap;min-height:var(--sbb-button-min-height);width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);user-select:none;background:var(--_background);border:var(--_border-action);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);animation:var(--_animation);padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);outline:none;justify-content:center;align-items:center;text-decoration:none;transition-property:color,background-color,padding-top,padding-bottom;display:flex;position:relative}.sbb-action-base:before{content:"";inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow;position:absolute}:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base:before,:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--_loading-outline-offset,var(--sbb-focus-outline-offset))}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{--_background:border-box padding-box linear-gradient(var(--_background-color)), border-box conic-gradient(from var(--sbb-button-loading-angle) at clamp(calc(var(--sbb-button-min-height) / 2), var(--sbb-button-loading-offset), calc(100% - var(--sbb-button-min-height) / 2)) 50%, var(--sbb-button-color-loading-border) 0deg, var(--sbb-button-color-loading-border) 300deg, var(--sbb-button-color-active-text) 360deg), var(--_background-color)}.sbb-button__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover,0)}@keyframes sbb-button-rotate{0%{--sbb-button-loading-angle:-90deg}to{--sbb-button-loading-angle:270deg}}@keyframes sbb-button-move{0%{--sbb-button-loading-offset:0%}to{--sbb-button-loading-offset:100%}}
|
|
3
|
+
`,y=`:host{-webkit-tap-highlight-color:transparent;--sbb-mini-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-mini-button-color-background:var(--sbb-mini-button-color-default-background);--sbb-mini-button-color:var(--sbb-mini-button-color-text);height:fit-content;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-mini-button-color-text:ButtonText!important;--sbb-mini-button-color-hover-background:Highlight!important;--sbb-mini-button-color-active-background:Highlight!important;--sbb-mini-button-color-disabled-background:Canvas!important;--sbb-mini-button-color-disabled-border:GrayText!important;--sbb-mini-button-color-disabled-text:GrayText!important}}:host([negative]){--sbb-mini-button-color-text:var(--sbb-color-3-negative);--sbb-mini-button-color-default-background:transparent;--sbb-mini-button-color-hover-background:var(--sbb-background-color-3-negative);--sbb-mini-button-color-active-background:var(--sbb-background-color-4-negative);--sbb-mini-button-color-disabled-background:var(--sbb-background-color-3-negative);--sbb-mini-button-color-disabled-border:var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text:var(--sbb-color-5)}@media (any-hover:hover){:host(:is(:hover,:is(:state(force-hover),[state--force-hover])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]),:active,:is(:state(active),[state--active]))){--sbb-mini-button-translate-y-content-hover:-.0625rem;--sbb-mini-button-color-background:var(--sbb-mini-button-color-hover-background)}}:host(:is(:active,:is(:state(active),[state--active])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background:var(--sbb-mini-button-color-active-background)}:host(:is([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background:var(--sbb-mini-button-color-disabled-background);--sbb-mini-button-border:var(--sbb-border-width-1x) dashed var(--sbb-mini-button-color-disabled-border);--sbb-mini-button-color:var(--sbb-mini-button-color-disabled-text);--sbb-mini-button-pointer-events:none;--sbb-mini-button-cursor:var(--sbb-cursor-default)}:host(:is(:state(focus-visible),[state--focus-visible])){--sbb-focus-outline-style:initial}.sbb-action-base{color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);user-select:none;pointer-events:var(--sbb-mini-button-pointer-events,auto);cursor:var(--sbb-mini-button-cursor,var(--sbb-cursor-pointer));transition:color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);outline:none;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";border-radius:var(--sbb-mini-button-border-radius);background-color:var(--sbb-mini-button-color-background);transition-duration:var(--sbb-mini-button-transition-duration);transition-timing-function:var(--sbb-mini-button-transition-easing-function);border:var(--sbb-mini-button-border);transition-property:inset,background-color;position:absolute;inset:0}.sbb-action-base:focus-visible:before,:host(:is(:is(:state(focus-visible),[state--focus-visible]),:focus-visible)) .sbb-action-base:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}::slotted(sbb-icon),sbb-icon{transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover,0);min-width:var(--_sbb-mini-button-image-size,var(--sbb-size-icon-ui-small));min-height:var(--_sbb-mini-button-image-size,var(--sbb-size-icon-ui-small));justify-content:center;align-items:center;display:flex}
|
|
4
|
+
`,b=`:host{--sbb-mini-button-gap:.125rem;--sbb-mini-button-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display:block;--sbb-mini-button-label-height:var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline:0;--sbb-mini-button-label-display:none;--sbb-mini-button-label-height:unset}.sbb-action-base{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);padding-inline:var(--sbb-mini-button-padding-inline);justify-content:center;align-items:center}.sbb-mini-button__label{white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover,0);overflow:hidden}
|
|
5
|
+
`,x=`:host{--sbb-button-color-active-background:var(--sbb-color-primary150);--sbb-button-color-active-border:var(--sbb-color-primary150);--sbb-button-color-active-text:var(--sbb-color-4-negative);--sbb-button-color-default-background:var(--sbb-color-primary);--sbb-button-color-default-border:var(--sbb-color-primary);--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-color-primary125);--sbb-button-color-hover-border:var(--sbb-color-primary125);--sbb-button-color-hover-text:var(--sbb-color-3-negative);--sbb-button-color-loading-border:light-dark(color-mix(in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text)),color-mix(in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text)));--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-primary) 20%, transparent),color-mix(in srgb, var(--sbb-color-primary) 40%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent),color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent))}:host([negative]){--sbb-button-color-active-background:var(--sbb-color-primary150);--sbb-button-color-active-border:var(--sbb-color-primary150);--sbb-button-color-active-text:var(--sbb-color-4-negative);--sbb-button-color-default-background:var(--sbb-color-primary);--sbb-button-color-default-border:var(--sbb-color-primary);--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-color-primary125);--sbb-button-color-hover-border:var(--sbb-color-primary125);--sbb-button-color-hover-text:var(--sbb-color-3-negative);--sbb-button-color-loading-border:color-mix(in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text));--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-primary) 60%, transparent),color-mix(in srgb, var(--sbb-color-primary) 40%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent),color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent))}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}
|
|
6
|
+
`,S=`:host{--sbb-button-color-active-background:var(--sbb-background-color-3);--sbb-button-color-active-border:var(--sbb-border-color-4-inverted);--sbb-button-color-active-text:light-dark(var(--sbb-color-anthracite),var(--sbb-color-graphite));--sbb-button-color-default-background:var(--sbb-background-color-1);--sbb-button-color-default-border:var(--sbb-border-color-4-inverted);--sbb-button-color-default-text:var(--sbb-color-3);--sbb-button-color-hover-background:var(--sbb-background-color-1);--sbb-button-color-hover-border:var(--sbb-border-color-4-inverted);--sbb-button-color-hover-text:var(--sbb-color-4);--sbb-button-color-loading-border:var(--sbb-border-color-4-inverted);--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-border-overlap-fix:0rem}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-2-negative);--sbb-button-color-active-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text:var(--sbb-color-graphite);--sbb-button-color-default-background:var(--sbb-background-color-1-negative);--sbb-button-color-default-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-default-text:var(--sbb-color-3-negative);--sbb-button-color-hover-background:var(--sbb-background-color-1-negative);--sbb-button-color-hover-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-hover-text:var(--sbb-color-4-negative);--sbb-button-color-loading-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-shadow-1-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}
|
|
7
|
+
`,C=`:host{--sbb-button-color-active-background:var(--sbb-background-color-4);--sbb-button-color-active-border:var(--sbb-border-color-4-inverted);--sbb-button-color-active-text:var(--sbb-color-1);--sbb-button-color-default-background:transparent;--sbb-button-color-default-border:transparent;--sbb-button-color-default-text:var(--sbb-color-1);--sbb-button-color-hover-background:var(--sbb-background-color-3);--sbb-button-color-hover-border:var(--sbb-border-color-3-inverted);--sbb-button-color-hover-text:var(--sbb-color-1);--sbb-button-color-loading-border:light-dark(var(--sbb-color-silver),var(--sbb-color-granite))}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-4-negative);--sbb-button-color-active-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text:var(--sbb-color-1-negative);--sbb-button-color-default-background:transparent;--sbb-button-color-default-border:transparent;--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-background-color-3-negative);--sbb-button-color-hover-border:var(--sbb-border-color-3-negative-inverted);--sbb-button-color-hover-text:var(--sbb-color-1-negative);--sbb-button-color-loading-border:var(--sbb-color-granite)}
|
|
8
|
+
`;const w=p(x),T=p(S),E=p(_),D=p(C),O=p(y),k=p(b),A=e=>(()=>{let t=c(g(e)),n,r=[],i=[],a,o=[],s=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[m({reflect:!0})],a=[l(),m({reflect:!0,type:Boolean})],u(this,null,n,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},r,i),u(this,null,a,{kind:`accessor`,name:`loading`,static:!1,private:!1,access:{has:e=>`loading`in e,get:e=>e.loading,set:(e,t)=>{e.loading=t}},metadata:e},o,s),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.styles=[p(v)]}#e=d(this,r,null);get size(){return this.#e}set size(e){this.#e=e}#t=(d(this,i),d(this,o,!1));get loading(){return this.#t}set loading(e){this.#t=e}constructor(...e){super(...e),d(this,s),this.internals.states.add(`sbb-button`)}willUpdate(e){super.willUpdate(e),e.has(`loading`)&&(this.loading?(this.internals.ariaBusy=`true`,this.internals.ariaDisabled=`true`):(this.internals.ariaBusy=null,this.maybeDisabledInteractive||(this.internals.ariaDisabled=null)))}renderTemplate(){return h`
|
|
9
9
|
${super.renderIconSlot()}
|
|
10
10
|
<span class="sbb-button__label">
|
|
11
11
|
<slot></slot>
|
|
12
12
|
</span>
|
|
13
|
-
|
|
14
|
-
`}}})();var M=class extends j(i(t)){static{this.elementName=`sbb-button`}static{this.styles=[T]}},N=class extends j(i(t)){static{this.elementName=`sbb-secondary-button`}static{this.styles=[E]}},P=class extends j(i(t)){static{this.elementName=`sbb-accent-button`}static{this.styles=[D]}},F=class extends j(i(t)){static{this.elementName=`sbb-transparent-button`}static{this.styles=[O]}},I=class extends i(c(_(t))){static{this.elementName=`sbb-mini-button`}static{this.styles=[k,A]}renderTemplate(){return g`
|
|
13
|
+
`}}})();var j=class extends A(i(t)){static{this.elementName=`sbb-button`}static{this.styles=[w]}},M=class extends A(i(t)){static{this.elementName=`sbb-secondary-button`}static{this.styles=[T]}},N=class extends A(i(t)){static{this.elementName=`sbb-accent-button`}static{this.styles=[E]}},P=class extends A(i(t)){static{this.elementName=`sbb-transparent-button`}static{this.styles=[D]}},F=class extends i(c(g(t))){static{this.elementName=`sbb-mini-button`}static{this.styles=[O,k]}renderTemplate(){return h`
|
|
15
14
|
${super.renderIconSlot()}
|
|
16
15
|
<span class="sbb-mini-button__label">
|
|
17
16
|
<slot></slot>
|
|
18
17
|
</span>
|
|
19
|
-
`}},
|
|
20
|
-
`,
|
|
18
|
+
`}},I=`@media (forced-colors:active){:host{--sbb-mini-button-color:LinkText!important}}
|
|
19
|
+
`,L=class extends c(g(n(r(o)))){static{this.elementName=`sbb-mini-button-link`}static{this.styles=[O,k,p(I)]}renderTemplate(){return f`
|
|
21
20
|
${super.renderIconSlot()}
|
|
22
21
|
<span class="sbb-mini-button__label">
|
|
23
22
|
<slot></slot>
|
|
24
23
|
</span>
|
|
25
|
-
`}},
|
|
26
|
-
`;let
|
|
24
|
+
`}},R=`:host{display:block}:host([negative]){--sbb-mini-button-group-background:var(--sbb-background-color-1-negative);--sbb-mini-button-group-border-color:var(--sbb-border-color-4-negative-inverted);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host([size=s]){--sbb-mini-button-group-min-height:var(--sbb-mini-button-group-min-height-s);--sbb-mini-button-group-padding-inline:var(--sbb-mini-button-group-padding-inline-s)}:host([size=m]){--sbb-mini-button-group-min-height:var(--sbb-mini-button-group-min-height-m);--sbb-mini-button-group-padding-inline:var(--sbb-mini-button-group-padding-inline-m)}:host([size=l]){--sbb-mini-button-group-min-height:var(--sbb-mini-button-group-min-height-l);--sbb-mini-button-group-padding-inline:var(--sbb-mini-button-group-padding-inline-l)}:host([size=xl]){--sbb-mini-button-group-min-height:var(--sbb-mini-button-group-min-height-xl);--sbb-mini-button-group-padding-inline:var(--sbb-mini-button-group-padding-inline-xl)}::slotted(:is(sbb-mini-button,sbb-mini-button-link,sbb-divider)){display:flex}::slotted(sbb-divider){--sbb-divider-border-width:var(--sbb-border-width-1x);padding:var(--sbb-mini-button-group-divider-padding);height:var(--sbb-mini-button-group-divider-height)}.sbb-mini-button-group{align-items:center;gap:var(--sbb-mini-button-group-gap);width:fit-content;min-height:var(--sbb-mini-button-group-min-height);background-color:var(--sbb-mini-button-group-background);border:var(--sbb-mini-button-group-border-width) solid var(--sbb-mini-button-group-border-color);border-radius:var(--sbb-mini-button-group-border-radius);padding-inline:calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width));flex-wrap:nowrap;display:flex}
|
|
25
|
+
`;let z=(()=>{let e=c(s(a)),t,n=[],r=[],i,o=[],h=[];return class extends e{static{let a=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;t=[l(),m({attribute:`accessibility-label`})],i=[m({reflect:!0})],u(this,null,t,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:a},n,r),u(this,null,i,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:a},o,h),a&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a})}static{this.elementName=`sbb-mini-button-group`}static{this.styles=[p(R)]}#e;get accessibilityLabel(){return this.#e}set accessibilityLabel(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._proxyNegative()}_proxyNegative(){this.querySelectorAll?.(`sbb-divider, sbb-mini-button, sbb-mini-button-link`).forEach(e=>e.negative=this.negative)}render(){return f`
|
|
27
26
|
${this.renderList({ariaLabel:this.accessibilityLabel},{localNameVisualOnly:[`sbb-divider`]})}
|
|
28
|
-
`}constructor(){super(...arguments),this.listChildLocalNames=[`sbb-mini-button`,`sbb-mini-button-link`,`sbb-divider`],this.#e=d(this,n,``),this.#t=(d(this,r),d(this,o,null)),d(this,
|
|
27
|
+
`}constructor(){super(...arguments),this.listChildLocalNames=[`sbb-mini-button`,`sbb-mini-button-link`,`sbb-divider`],this.#e=d(this,n,``),this.#t=(d(this,r),d(this,o,null)),d(this,h)}}})();var B=class extends A(n(r(o))){static{this.elementName=`sbb-button-link`}static{this.styles=[w]}},V=class extends A(n(r(o))){static{this.elementName=`sbb-secondary-button-link`}static{this.styles=[T]}},H=class extends A(n(r(o))){static{this.elementName=`sbb-accent-button-link`}static{this.styles=[E]}},U=class extends A(n(r(o))){static{this.elementName=`sbb-transparent-button-link`}static{this.styles=[D]}},W=class extends A(r(e)){static{this.elementName=`sbb-button-static`}static{this.styles=[w]}},G=class extends A(r(e)){static{this.elementName=`sbb-secondary-button-static`}static{this.styles=[T]}},K=class extends A(r(e)){static{this.elementName=`sbb-accent-button-static`}static{this.styles=[E]}},q=class extends A(r(e)){static{this.elementName=`sbb-transparent-button-static`}static{this.styles=[D]}};export{N as SbbAccentButtonElement,H as SbbAccentButtonLinkElement,K as SbbAccentButtonStaticElement,A as SbbButtonCommonElementMixin,j as SbbButtonElement,B as SbbButtonLinkElement,W as SbbButtonStaticElement,F as SbbMiniButtonElement,z as SbbMiniButtonGroupElement,L as SbbMiniButtonLinkElement,M as SbbSecondaryButtonElement,V as SbbSecondaryButtonLinkElement,G as SbbSecondaryButtonStaticElement,P as SbbTransparentButtonElement,U as SbbTransparentButtonLinkElement,q as SbbTransparentButtonStaticElement,E as buttonAccentStyle,w as buttonPrimaryStyle,T as buttonSecondaryStyle,D as buttonTransparentStyle,k as miniButtonLabelStyle,O as miniButtonStyle};
|
package/core/styles/_theme.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SbbActionBaseElement, SbbButtonBaseElement, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbElement, SbbLinkBaseElement, SbbNamedSlotListMixin, SbbNegativeMixin, forceType } from "./core.js";
|
|
2
2
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
3
|
-
import { html,
|
|
3
|
+
import { html, unsafeCSS } from "lit";
|
|
4
4
|
import { property } from "lit/decorators.js";
|
|
5
5
|
import { html as html$1 } from "lit/static-html.js";
|
|
6
6
|
import { SbbIconNameMixin } from "./icon.pure.js";
|
|
@@ -10,7 +10,7 @@ var accent_button_default = ":host {\n --sbb-button-color-active-background: va
|
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/elements/button/common/button-common.scss?inline
|
|
13
|
-
var button_common_default = ":host {\n display: inline-block;\n outline: none !important;\n --sbb-button-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-button-box-shadow-definition:\n var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y)\n var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread)\n var(--sbb-button-shadow-2-color),\n var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y)\n var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread)\n var(--sbb-button-shadow-1-color);\n --_width: unset;\n --_min-height-modifier: 0rem;\n --_border-color: var(--sbb-button-color-default-border);\n --_background-color: var(--sbb-button-color-default-background);\n --_color: var(--sbb-button-color-default-text);\n --_button-inset: 0;\n --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid\n var(--_border-color);\n}\n@media (forced-colors: active) {\n :host {\n --sbb-button-color-default-border: CanvasText !important;\n --sbb-button-color-active-border: Highlight !important;\n --sbb-button-color-default-background: Canvas !important;\n --sbb-button-color-hover-background: Canvas !important;\n --sbb-button-color-active-background: Canvas !important;\n --sbb-button-color-disabled-background: Canvas !important;\n --sbb-button-color-disabled-text: GrayText !important;\n --sbb-button-color-loading-border: Highlight !important;\n --sbb-button-color-default-text: CanvasText !important;\n --sbb-button-color-hover-text: CanvasText !important;\n --sbb-button-color-active-text: CanvasText !important;\n --sbb-button-border-overlap-fix: 0rem;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-button-color-default-text: ButtonText !important;\n --sbb-button-color-hover-text: ButtonText !important;\n --sbb-button-color-active-text: ButtonText !important;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(link),[state--link])) {\n --sbb-button-color-default-text: LinkText !important;\n --sbb-button-color-hover-text: LinkText !important;\n --sbb-button-color-active-text: LinkText !important;\n }\n}\n\n:host([negative]) {\n --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);\n --sbb-button-color-disabled-text: var(--sbb-color-aluminium);\n}\n\n:host([size=l]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-l);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);\n}\n\n:host([size=m]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-m);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);\n}\n\n:host([size=s]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-s);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);\n --sbb-button-gap: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-button-padding-inline: 0;\n --_width: calc(var(--sbb-button-min-height) + var(--_min-height-modifier));\n}\n\n@media (any-hover: hover) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-translate-y-content-hover: -0.0625rem;\n --sbb-button-shadow-1-offset-y: calc(\n 0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)\n );\n --sbb-button-shadow-1-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));\n --sbb-button-shadow-2-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));\n --sbb-button-cursor: var(--sbb-cursor-pointer);\n --_border-color: var(--sbb-button-color-hover-border);\n --_color: var(--sbb-button-color-hover-text);\n --_background-color: var(--sbb-button-color-hover-background);\n --_button-inset: calc(var(--sbb-button-border-width) * -1);\n }\n}\n@media (forced-colors: active) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-color-hover-border: Highlight !important;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-button-cursor: var(--sbb-cursor-default);\n --_color: var(--sbb-button-color-disabled-text);\n --_background-color: var(--sbb-button-color-disabled-background);\n --_border-color: var(--sbb-button-color-disabled-border);\n --_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)\n var(--_border-color);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive]):is(:active, :is(:state(active),[state--active]), [loading])) {\n --_color: var(--sbb-button-color-active-text);\n --_background-color: var(--sbb-button-color-active-background);\n --_border-color: var(--sbb-button-color-active-border);\n}\n\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) {\n --_min-height-modifier: calc(-2 * var(--sbb-button-loading-border-width));\n --sbb-button-focus-outline-offset-override: calc(\n var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)\n );\n --_border: none;\n --_transform-style: preserve-3d;\n}\n\n.sbb-action-base {\n display: flex;\n gap: var(--sbb-button-gap);\n align-items: center;\n justify-content: center;\n font-size: var(--sbb-text-font-size-xs);\n font-weight: bold;\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n text-align: left;\n white-space: nowrap;\n text-decoration: none;\n min-height: calc(var(--sbb-button-min-height) + var(--_min-height-modifier));\n outline: none;\n width: var(--_width);\n border-radius: var(--sbb-button-border-radius);\n color: var(--_color);\n cursor: var(--sbb-button-cursor);\n user-select: none;\n background-color: var(--_background-color);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n transition-property: color, background-color;\n transform-style: var(--_transform-style, flat);\n padding-block: var(--sbb-button-padding-block-min);\n padding-inline: var(--sbb-button-padding-inline);\n position: relative;\n}\n.sbb-action-base::before {\n content: \"\";\n position: absolute;\n inset: var(--_button-inset);\n border: var(--_border);\n border-radius: var(--sbb-button-border-radius);\n pointer-events: none;\n box-shadow: var(--sbb-button-box-shadow);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n transition-property: inset, border, box-shadow;\n}\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) .sbb-action-base {\n margin: var(--sbb-button-loading-border-width);\n padding-inline: calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));\n transition-property: none;\n}\n:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base::before, :host(:focus-visible) .sbb-action-base::before, .sbb-action-base:focus-visible::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-button-focus-outline-offset-override, var(--sbb-focus-outline-offset));\n}\n\n.sbb-button__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label {\n display: none;\n}\n\n.sbb-button__label,\n::slotted([slot=icon]),\nsbb-icon {\n transition: translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);\n translate: 0 var(--sbb-button-translate-y-content-hover, 0);\n}\n\n.sbb-button-loading-border {\n position: absolute;\n inset: calc(-1 * var(--sbb-button-loading-border-width));\n clip-path: border-box;\n border-radius: var(--sbb-button-border-radius);\n background: var(--_background-color);\n transform: translateZ(-1px);\n z-index: -1;\n container-type: inline-size;\n contain: paint;\n animation: background-fade-in var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x)) var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) linear;\n animation-fill-mode: forwards;\n}\n.sbb-button-loading-border::before {\n content: \"\";\n display: block;\n width: 64cqmin;\n max-height: var(--sbb-button-min-height);\n aspect-ratio: 2/1;\n position: absolute;\n background: radial-gradient(100% 100% at right, var(--sbb-button-color-active-text), transparent 50%);\n offset-path: border-box;\n offset-anchor: 100% 50%;\n opacity: 0;\n animation: snake-fade-in var(--sbb-disable-animation-duration, calc(var(--sbb-animation-duration-12x) * 2)) var(--sbb-disable-animation-duration, calc(var(--sbb-button-loading-delay) + var(--sbb-animation-duration-5x))) var(--sbb-animation-easing), snake-position var(--sbb-disable-animation-duration, calc(max(tan(atan2(var(--sbb-button-width), 1px)) / 136, 0.5) * 3s)) infinite linear;\n animation-fill-mode: forwards;\n transform-style: preserve-3d;\n}\n\n@keyframes snake-position {\n to {\n offset-distance: 100%;\n }\n}\n@keyframes snake-fade-in {\n to {\n opacity: 1;\n }\n}\n@keyframes background-fade-in {\n to {\n background: var(--sbb-button-color-loading-border);\n }\n}\n";
|
|
13
|
+
var button_common_default = ":host {\n display: inline-block;\n outline: none !important;\n --sbb-button-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-button-box-shadow-definition:\n var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y)\n var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread)\n var(--sbb-button-shadow-2-color),\n var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y)\n var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread)\n var(--sbb-button-shadow-1-color);\n --_width: unset;\n --_border-color: var(--sbb-button-color-default-border);\n --_background-color: var(--sbb-button-color-default-background);\n --_background: var(--_background-color);\n --_color: var(--sbb-button-color-default-text);\n --_button-inset: 0;\n --_hover-offset: 0.0625rem;\n --_padding-block: var(--sbb-button-padding-block-min);\n --_padding-inline: var(--sbb-button-padding-inline);\n --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid\n var(--_border-color);\n --_animation-loading-delay: var(\n --sbb-disable-animation-duration,\n var(--sbb-button-loading-delay)\n );\n --_animation-loading-duration: var(--sbb-disable-animation-duration, 3s);\n --_animation-loading-rotate-function: linear(0, 0.25 12.5% 37.5%, 0.75 62.5% 87.5%, 1);\n --_animation-loading-rotate: sbb-button-rotate var(--_animation-loading-duration)\n var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);\n --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)\n var(--_animation-loading-delay) alternate infinite linear;\n}\n@media (forced-colors: active) {\n :host {\n --sbb-button-color-default-border: CanvasText !important;\n --sbb-button-color-active-border: Highlight !important;\n --sbb-button-color-default-background: Canvas !important;\n --sbb-button-color-hover-background: Canvas !important;\n --sbb-button-color-active-background: Canvas !important;\n --sbb-button-color-disabled-background: Canvas !important;\n --sbb-button-color-disabled-text: GrayText !important;\n --sbb-button-color-loading-border: Highlight !important;\n --_sbb-button-loading-hidden-border-color: Canvas !important;\n --sbb-button-color-default-text: CanvasText !important;\n --sbb-button-color-hover-text: CanvasText !important;\n --sbb-button-color-active-text: CanvasText !important;\n --sbb-button-border-overlap-fix: 0rem;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-button-color-default-text: ButtonText !important;\n --sbb-button-color-hover-text: ButtonText !important;\n --sbb-button-color-active-text: ButtonText !important;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(link),[state--link])) {\n --sbb-button-color-default-text: LinkText !important;\n --sbb-button-color-hover-text: LinkText !important;\n --sbb-button-color-active-text: LinkText !important;\n }\n}\n\n:host([negative]) {\n --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);\n --sbb-button-color-disabled-text: var(--sbb-color-aluminium);\n}\n\n:host([size=l]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-l);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);\n}\n\n:host([size=m]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-m);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);\n}\n\n:host([size=s]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-s);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);\n --sbb-button-gap: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-button-padding-inline: 0;\n --_width: var(--sbb-button-min-height);\n --_animation-loading-rotate-function: linear;\n}\n\n@media (any-hover: hover) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-translate-y-content-hover: -0.0625rem;\n --sbb-button-shadow-1-offset-y: calc(\n 0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)\n );\n --sbb-button-shadow-1-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));\n --sbb-button-shadow-2-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));\n --sbb-button-cursor: var(--sbb-cursor-pointer);\n --_border-color: var(--sbb-button-color-hover-border);\n --_color: var(--sbb-button-color-hover-text);\n --_background-color: var(--sbb-button-color-hover-background);\n --_button-inset: calc(var(--sbb-button-border-width) * -1);\n }\n}\n@media (forced-colors: active) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-color-hover-border: Highlight !important;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-button-cursor: var(--sbb-cursor-default);\n --_color: var(--sbb-button-color-disabled-text);\n --_background-color: var(--sbb-button-color-disabled-background);\n --_border-color: var(--sbb-button-color-disabled-border);\n --_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)\n var(--_border-color);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive]):is(:active, :is(:state(active),[state--active]), [loading])) {\n --_color: var(--sbb-button-color-active-text);\n --_background-color: var(--sbb-button-color-active-background);\n --_border-color: var(--sbb-button-color-active-border);\n}\n\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) {\n --_loading-outline-offset: calc(\n var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)\n );\n --_border: none;\n --_border-action: var(--sbb-button-loading-border-width) dotted\n var(--_sbb-button-loading-hidden-border-color, transparent);\n --_padding-block: calc(\n var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)\n );\n --_padding-inline: calc(\n var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)\n );\n --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);\n}\n\n.sbb-action-base {\n display: flex;\n gap: var(--sbb-button-gap);\n align-items: center;\n justify-content: center;\n font-size: var(--sbb-text-font-size-xs);\n font-weight: bold;\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n text-align: left;\n white-space: nowrap;\n text-decoration: none;\n min-height: var(--sbb-button-min-height);\n outline: none;\n width: var(--_width);\n border-radius: var(--sbb-button-border-radius);\n color: var(--_color);\n cursor: var(--sbb-button-cursor);\n user-select: none;\n background: var(--_background);\n border: var(--_border-action);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n transition-property: color, background-color, padding-top, padding-bottom;\n animation: var(--_animation);\n padding-block: var(--_padding-block);\n padding-inline: var(--_padding-inline);\n position: relative;\n}\n.sbb-action-base::before {\n content: \"\";\n position: absolute;\n inset: var(--_button-inset);\n border: var(--_border);\n border-radius: var(--sbb-button-border-radius);\n pointer-events: none;\n box-shadow: var(--sbb-button-box-shadow);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n transition-property: inset, border, box-shadow;\n}\n:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base::before, :host(:focus-visible) .sbb-action-base::before, .sbb-action-base:focus-visible::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--_loading-outline-offset, var(--sbb-focus-outline-offset));\n}\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) .sbb-action-base {\n --_background:\n border-box padding-box linear-gradient(var(--_background-color)),\n border-box\n conic-gradient(\n from var(--sbb-button-loading-angle) at\n clamp(\n calc(var(--sbb-button-min-height) / 2),\n var(--sbb-button-loading-offset),\n calc(100% - var(--sbb-button-min-height) / 2)\n )\n 50%,\n var(--sbb-button-color-loading-border) 0deg,\n var(--sbb-button-color-loading-border) 300deg,\n var(--sbb-button-color-active-text) 360deg\n ),\n var(--_background-color);\n}\n\n.sbb-button__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label {\n display: none;\n}\n\n.sbb-button__label,\n::slotted([slot=icon]),\nsbb-icon {\n transition: translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);\n translate: 0 var(--sbb-button-translate-y-content-hover, 0);\n}\n\n@keyframes sbb-button-rotate {\n from {\n --sbb-button-loading-angle: -90deg;\n }\n to {\n --sbb-button-loading-angle: 270deg;\n }\n}\n@keyframes sbb-button-move {\n from {\n --sbb-button-loading-offset: 0%;\n }\n to {\n --sbb-button-loading-offset: 100%;\n }\n}\n";
|
|
14
14
|
|
|
15
15
|
//#endregion
|
|
16
16
|
//#region src/elements/button/common/mini-button-common.scss?inline
|
|
@@ -127,11 +127,8 @@ const SbbButtonCommonElementMixin = (superClass) => {
|
|
|
127
127
|
if (this.loading) {
|
|
128
128
|
this.internals.ariaBusy = "true";
|
|
129
129
|
this.internals.ariaDisabled = "true";
|
|
130
|
-
const offsetWidth = this.offsetWidth;
|
|
131
|
-
this.style?.setProperty("--sbb-button-width", `${offsetWidth || 136}px`);
|
|
132
130
|
} else {
|
|
133
131
|
this.internals.ariaBusy = null;
|
|
134
|
-
this.style?.removeProperty("--sbb-button-width");
|
|
135
132
|
if (!this.maybeDisabledInteractive) this.internals.ariaDisabled = null;
|
|
136
133
|
}
|
|
137
134
|
}
|
|
@@ -142,7 +139,6 @@ const SbbButtonCommonElementMixin = (superClass) => {
|
|
|
142
139
|
<span class="sbb-button__label">
|
|
143
140
|
<slot></slot>
|
|
144
141
|
</span>
|
|
145
|
-
${this.loading && !this.maybeDisabled ? html$1`<div class="sbb-button-loading-border"></div>` : nothing}
|
|
146
142
|
`;
|
|
147
143
|
}
|
|
148
144
|
};
|
|
@@ -130,7 +130,7 @@ var SbbDialogTitleElement = class extends SbbNegativeMixin(SbbTitleBase) {
|
|
|
130
130
|
|
|
131
131
|
//#endregion
|
|
132
132
|
//#region src/elements/dialog/dialog/dialog.scss?inline
|
|
133
|
-
var dialog_default = ":host {\n --sbb-dialog-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --sbb-dialog-padding-block: var(--sbb-spacing-responsive-xs);\n --sbb-dialog-shadow-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n display: none;\n position: fixed;\n inset: 0;\n z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:state(top-shadow),[state--top-shadow])) {\n --sbb-dialog-block-start-box-shadow: var(--_sbb-dialog-block-shadow);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n display: block;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-pointer-events: all;\n --sbb-dialog-backdrop-pointer-events: all;\n}\n\n:host(:not([negative])) {\n --_sbb-dialog-color: var(--sbb-dialog-color);\n --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow);\n --sbb-dialog-
|
|
133
|
+
var dialog_default = ":host {\n --sbb-dialog-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --sbb-dialog-padding-block: var(--sbb-spacing-responsive-xs);\n --sbb-dialog-shadow-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n display: none;\n position: fixed;\n inset: 0;\n z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:state(top-shadow),[state--top-shadow])) {\n --sbb-dialog-block-start-box-shadow: var(--_sbb-dialog-block-shadow);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n display: block;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-pointer-events: all;\n --sbb-dialog-backdrop-pointer-events: all;\n}\n\n:host(:not([negative])) {\n --_sbb-dialog-color: var(--sbb-dialog-color);\n --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow);\n --sbb-dialog-background-color: var(--sbb-background-color-1);\n}\n\n:host([negative]) {\n --_sbb-dialog-color: var(--sbb-dialog-color-negative);\n --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow-negative);\n --sbb-dialog-background-color: var(--sbb-background-color-1-negative);\n --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);\n --sbb-dialog-backdrop-color: var(--sbb-background-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host([backdrop=translucent]) {\n --sbb-dialog-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 50%, transparent);\n}\n\n:host(:is(:state(bottom-shadow),[state--bottom-shadow])) {\n --sbb-dialog-block-end-box-shadow: var(--_sbb-dialog-block-shadow);\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n --sbb-dialog-backdrop-animation-name: backdrop-close;\n}\n\n.sbb-dialog__container {\n pointer-events: var(--sbb-dialog-pointer-events);\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n inset: 0;\n}\n.sbb-dialog__container::before {\n content: \"\";\n pointer-events: var(--sbb-dialog-backdrop-pointer-events);\n position: absolute;\n inset: 0;\n background-color: var(--sbb-dialog-backdrop-color, transparent);\n animation-name: var(--sbb-dialog-backdrop-animation-name, backdrop-open);\n animation-duration: var(--sbb-dialog-animation-duration);\n animation-timing-function: var(--sbb-dialog-animation-easing);\n animation-fill-mode: forwards;\n}\n\n.sbb-dialog {\n display: none;\n position: absolute;\n inset-inline: 0;\n inset-block: auto 0;\n border: none;\n border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;\n max-width: var(--_sbb-dialog-max-width);\n max-height: var(--_sbb-dialog-max-height);\n color: var(--_sbb-dialog-color);\n background-color: var(--sbb-dialog-background-color);\n flex-direction: column;\n padding-block-end: env(safe-area-inset-bottom, 0);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-dialog {\n display: flex;\n animation-name: open;\n animation-duration: var(--sbb-dialog-animation-duration);\n animation-timing-function: ease;\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog {\n pointer-events: none;\n animation-name: close;\n}\n@media (forced-colors: active) {\n .sbb-dialog {\n outline: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-dialog {\n width: var(--sbb-dialog-width);\n height: var(--sbb-dialog-height);\n max-width: var(--sbb-dialog-max-width, var(--_sbb-dialog-max-width));\n max-height: var(--sbb-dialog-max-height, var(--_sbb-dialog-max-height));\n inset: unset;\n border-radius: var(--sbb-dialog-border-radius);\n overflow: hidden;\n }\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n.sbb-dialog__wrapper {\n display: flex;\n flex-direction: column;\n min-height: 0;\n max-height: 100%;\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper {\n display: grid;\n grid-template: \"title close-button\" auto \"content content\" 1fr \"actions actions\" auto/1fr auto;\n gap: 0;\n}\n\n@keyframes open {\n from {\n opacity: 0;\n translate: 0 var(--sbb-dialog-translate-y, 100%);\n }\n to {\n opacity: 1;\n translate: 0 0;\n }\n}\n@keyframes close {\n from {\n opacity: 1;\n translate: 0 0;\n }\n to {\n opacity: 0;\n translate: 0 var(--sbb-dialog-translate-y, 100%);\n }\n}\n@keyframes backdrop-open {\n from {\n background-color: transparent;\n visibility: visible;\n }\n}\n@keyframes backdrop-close {\n to {\n background-color: transparent;\n visibility: hidden;\n }\n}\n";
|
|
134
134
|
|
|
135
135
|
//#endregion
|
|
136
136
|
//#region src/elements/dialog/dialog/dialog.component.ts
|
package/dialog.pure.js
CHANGED
|
@@ -2,7 +2,7 @@ import{html as e,unsafeCSS as t}from"lit";import{SbbActionGroupElement as n}from
|
|
|
2
2
|
`,T=class extends n{static{this.elementName=`sbb-dialog-actions`}static{this.styles=[t(w)]}},E=`:host{height:fit-content;margin-inline:var(--sbb-dialog-close-button-margin-inline);grid-area:close-button;margin-block-start:calc(var(--sbb-dialog-padding-block) + .5 * (var(--sbb-typo-line-height-heading) * var(--_sbb-dialog-title-size,var(--sbb-heading-font-size-4)) - var(--sbb-size-element-xs)));display:block;inset-inline-end:var(--sbb-dialog-close-button-inset-inline-end)}
|
|
3
3
|
`,D=class extends r{static{this.elementName=`sbb-dialog-close-button`}static{this.styles=[t(E)]}constructor(){super(),this._languageController=new a(this),this.size=`s`}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=l[this._languageController.current]}renderTemplate(){return super.renderIconSlot()}renderIconName(){return super.renderIconName()||`cross-small`}},O=`:host{padding-block:var(--sbb-dialog-padding-block);padding-inline:var(--sbb-dialog-padding-inline);grid-area:content;display:block;overflow:auto}:host(:is(:state(negative),[state--negative])){--sbb-scrollbar-color:color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover:color-mix(in srgb, var(--sbb-color-white) 60%, transparent)}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset:calc(var(--sbb-focus-outline-width) * -1)}
|
|
4
4
|
`,k=class extends i{static{this.elementName=`sbb-dialog-content`}static{this.styles=[c,t(O)]}constructor(){super(),this.addController(new s(this,()=>this.closest(`sbb-dialog`),{negative:e=>{this.toggleState(`negative`,e.negative),this._setScrollbar(e.negative)}}))}_setScrollbar(e=this.closest?.(`sbb-dialog`)?.negative??!1){this.classList.remove(`sbb-scrollbar`,`sbb-scrollbar-negative`),this.classList.add(`sbb-scrollbar${e?`-negative`:``}`)}connectedCallback(){super.connectedCallback(),this._setScrollbar()}render(){return e`<slot></slot>`}},A=`:host{padding-block:var(--sbb-dialog-padding-block);padding-inline:var(--sbb-dialog-padding-inline);hyphens:auto;grid-area:title;position:relative}:host([negative]){--sbb-title-color:var(--sbb-color-3-negative)}:host:after{content:"";pointer-events:none;transition:box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);box-shadow:var(--sbb-dialog-block-start-box-shadow,none);clip-path:polygon(0% 50%,0% 200%,100% 200%,100% 50%);display:block;position:absolute;inset:0 -10rem 0 0}
|
|
5
|
-
`,j=class extends o(f){static{this.elementName=`sbb-dialog-title`}static{this.styles=[t(A)]}constructor(){super(),this.level=`2`,this.visualLevel=`4`}},M=`:host{--sbb-dialog-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-dialog-padding-block:var(--sbb-spacing-responsive-xs);--sbb-dialog-shadow-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));z-index:var(--sbb-dialog-z-index,var(--sbb-overlay-default-z-index));display:none;position:fixed;inset:0}:host(:is(:state(top-shadow),[state--top-shadow])){--sbb-dialog-block-start-box-shadow:var(--_sbb-dialog-block-shadow)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-pointer-events:all;--sbb-dialog-backdrop-pointer-events:all}:host(:not([negative])){--_sbb-dialog-color:var(--sbb-dialog-color);--_sbb-dialog-block-shadow:var(--sbb-dialog-block-shadow);--sbb-dialog-
|
|
5
|
+
`,j=class extends o(f){static{this.elementName=`sbb-dialog-title`}static{this.styles=[t(A)]}constructor(){super(),this.level=`2`,this.visualLevel=`4`}},M=`:host{--sbb-dialog-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-dialog-padding-block:var(--sbb-spacing-responsive-xs);--sbb-dialog-shadow-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));z-index:var(--sbb-dialog-z-index,var(--sbb-overlay-default-z-index));display:none;position:fixed;inset:0}:host(:is(:state(top-shadow),[state--top-shadow])){--sbb-dialog-block-start-box-shadow:var(--_sbb-dialog-block-shadow)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-pointer-events:all;--sbb-dialog-backdrop-pointer-events:all}:host(:not([negative])){--_sbb-dialog-color:var(--sbb-dialog-color);--_sbb-dialog-block-shadow:var(--sbb-dialog-block-shadow);--sbb-dialog-background-color:var(--sbb-background-color-1)}:host([negative]){--_sbb-dialog-color:var(--sbb-dialog-color-negative);--_sbb-dialog-block-shadow:var(--sbb-dialog-block-shadow-negative);--sbb-dialog-background-color:var(--sbb-background-color-1-negative);--sbb-dialog-actions-border-color:var(--sbb-background-color-4-negative);--sbb-dialog-backdrop-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host([backdrop=translucent]){--sbb-dialog-backdrop-color:color-mix(in srgb, var(--sbb-color-black) 50%, transparent)}:host(:is(:state(bottom-shadow),[state--bottom-shadow])){--sbb-dialog-block-end-box-shadow:var(--_sbb-dialog-block-shadow)}:host(:is(:state(state-closing),[state--state-closing])){--sbb-dialog-backdrop-animation-name:backdrop-close}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sbb-dialog__container:before{content:"";pointer-events:var(--sbb-dialog-backdrop-pointer-events);background-color:var(--sbb-dialog-backdrop-color,transparent);animation-name:var(--sbb-dialog-backdrop-animation-name,backdrop-open);animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:var(--sbb-dialog-animation-easing);animation-fill-mode:forwards;position:absolute;inset:0}.sbb-dialog{border-radius:var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;max-width:var(--_sbb-dialog-max-width);max-height:var(--_sbb-dialog-max-height);color:var(--_sbb-dialog-color);background-color:var(--sbb-dialog-background-color);border:none;flex-direction:column;padding-block-end:env(safe-area-inset-bottom,0);display:none;position:absolute;inset-block:auto 0;inset-inline:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-dialog{animation-name:open;animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:ease;display:flex}:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog{pointer-events:none;animation-name:close}@media (forced-colors:active){.sbb-dialog{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (width>=37.5rem){.sbb-dialog{width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width,var(--_sbb-dialog-max-width));max-height:var(--sbb-dialog-max-height,var(--_sbb-dialog-max-height));inset:unset;border-radius:var(--sbb-dialog-border-radius);overflow:hidden}}:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),.sbb-dialog__wrapper{flex-direction:column;min-height:0;max-height:100%;display:flex}:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper{grid-template:"title close-button""content content"1fr"actions actions"/1fr auto;gap:0;display:grid}@keyframes open{0%{opacity:0;translate:0 var(--sbb-dialog-translate-y,100%)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:0 var(--sbb-dialog-translate-y,100%)}}@keyframes backdrop-open{0%{visibility:visible;background-color:#0000}}@keyframes backdrop-close{to{visibility:hidden;background-color:#0000}}
|
|
6
6
|
`;let N=(()=>{let e=y,n,r=[],i=[],a,o=[],s=[];return class extends e{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;n=[g({attribute:`backdrop-action`})],a=[g({attribute:`backdrop`,reflect:!0})],p(this,null,n,{kind:`accessor`,name:`backdropAction`,static:!1,private:!1,access:{has:e=>`backdropAction`in e,get:e=>e.backdropAction,set:(e,t)=>{e.backdropAction=t}},metadata:t},r,i),p(this,null,a,{kind:`accessor`,name:`backdrop`,static:!1,private:!1,access:{has:e=>`backdrop`in e,get:e=>e.backdrop,set:(e,t)=>{e.backdrop=t}},metadata:t},o,s),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-dialog`}static{this.styles=[d,t(M)]}#e;get backdropAction(){return this.#e}set backdropAction(e){this.#e=e}#t;get backdrop(){return this.#t}set backdrop(e){this.#t=e}constructor(){super(),this.#e=m(this,r,`close`),this.#t=(m(this,i),m(this,o,`opaque`)),this._dialogContentResizeObserver=(m(this,s),new h(this,{target:null,skipInitial:!0,callback:()=>setTimeout(()=>this._updateOverflowState())})),this._isPointerDownEventOnDialog=!1,this.closeAttribute=`sbb-dialog-close`,this.closeTag=`sbb-dialog-close-button`,this._pointerDownListener=e=>{this.backdropAction===`close`&&(this._isPointerDownEventOnDialog=!!this._dialogElement&&e.composedPath().includes(this._dialogElement))},this._closeOnBackdropClick=e=>{this.backdropAction===`close`&&!this._isPointerDownEventOnDialog&&this._dialogElement&&!e.composedPath().includes(this._dialogElement)&&this.close()},this.addEventListener?.(`pointerdown`,this._pointerDownListener),this.addEventListener?.(`pointerup`,this._closeOnBackdropClick),this.addEventListener(`scroll`,()=>this._updateOverflowState(),{passive:!0,capture:!0})}announceTitle(){this.setAriaLiveRefContent(this.accessibilityLabel||this.querySelector(`sbb-dialog-title`)?.textContent.trim())}isZeroAnimationDuration(){return u(this,`--sbb-dialog-animation-duration`)}handleClosing(){let e=this._contentElement();e?.scrollTo(0,0),this.state=`closed`,this.hidePopover?.(),this.inertController.deactivate(),this.skipFocusRestoration||this.lastFocusedElement?.focus(),this.openOverlayController?.abort(),this.focusTrapController.enabled=!1,e&&this._dialogContentResizeObserver.hostDisconnected(),this.removeInstanceFromGlobalCollection(),C.length||this.scrollHandler.enableScroll(),this.escapableOverlayController.disconnect(),this.dispatchCloseEvent()}handleOpening(){this.state=`opened`,this.inertController.activate(),this.focusTrapController.focusInitialElement(),this.focusTrapController.enabled=!0,setTimeout(()=>this.announceTitle());let e=this._contentElement();e&&this._dialogContentResizeObserver.observe(e),this.dispatchOpenEvent()}firstUpdated(e){super.firstUpdated(e),this.isOpen&&this.announceTitle(),this._syncTitleNegative()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncTitleNegative()}_handleSlotChange(){this._syncTitleNegative(),this._detectIntermediateElement()}_syncTitleNegative(){let e=this.querySelector?.(`sbb-dialog-title`),t=this.querySelector?.(`sbb-dialog-close-button`);e&&(e.negative=this.negative),t&&(t.negative=this.negative)}_detectIntermediateElement(){let e=this.querySelector(`:scope > :is(sbb-dialog-title, sbb-dialog-close-button, sbb-dialog-content, sbb-dialog-actions)`)===null;this.toggleState(`has-intermediate-element`,e)}_updateOverflowState(){let e=this._contentElement();this.toggleState(`top-shadow`,(e?.scrollTop??0)>0),this.toggleState(`bottom-shadow`,(e?.scrollTop??0)+(e?.offsetHeight??0)<(e?.scrollHeight??0))}_contentElement(){return this.querySelector(`sbb-dialog-content`)}dispatchBeforeCloseEvent(){return this.dispatchEvent(new b(`beforeclose`,{cancelable:!0,closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}dispatchCloseEvent(){return this.dispatchEvent(new b(`close`,{closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}render(){return v`
|
|
7
7
|
<div class="sbb-dialog__container">
|
|
8
8
|
<div
|