@sbb-esta/lyne-elements-dev 5.7.0-dev.1788418915 → 5.7.0-dev.1788435806
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/custom-elements.json +10 -0
- package/development/autocomplete/autocomplete.component.d.ts +1 -0
- package/development/autocomplete.pure.js +1 -0
- package/development/option.pure.js +1 -1
- package/development/select/select.component.d.ts +1 -0
- package/development/select.pure.js +1 -0
- package/lean-off-brand-theme.css +1 -1
- package/lean-safety-theme.css +1 -1
- package/lean-theme.css +1 -1
- package/off-brand-theme.css +1 -1
- package/option/_option.global.scss +3 -1
- package/option.pure.js +1 -1
- package/package.json +2 -2
- package/safety-theme.css +1 -1
- package/standard-theme.css +1 -1
package/custom-elements.json
CHANGED
|
@@ -63171,6 +63171,11 @@
|
|
|
63171
63171
|
"name": "--sbb-select-z-index",
|
|
63172
63172
|
"default": "var(--sbb-overlay-default-z-index)"
|
|
63173
63173
|
},
|
|
63174
|
+
{
|
|
63175
|
+
"description": "Gap between select and panel.",
|
|
63176
|
+
"name": "--sbb-options-panel-offset",
|
|
63177
|
+
"default": "var(--sbb-spacing-fixed-2x)"
|
|
63178
|
+
},
|
|
63174
63179
|
{
|
|
63175
63180
|
"description": "Maximum height of the options panel. If the calculated remaining space is smaller, the value gets ignored.",
|
|
63176
63181
|
"name": "--sbb-options-panel-max-height"
|
|
@@ -67430,6 +67435,11 @@
|
|
|
67430
67435
|
"name": "--sbb-autocomplete-z-index",
|
|
67431
67436
|
"default": "var(--sbb-overlay-default-z-index)"
|
|
67432
67437
|
},
|
|
67438
|
+
{
|
|
67439
|
+
"description": "Gap between autocomplete and panel.",
|
|
67440
|
+
"name": "--sbb-options-panel-offset",
|
|
67441
|
+
"default": "var(--sbb-spacing-fixed-2x)"
|
|
67442
|
+
},
|
|
67433
67443
|
{
|
|
67434
67444
|
"description": "Maximum height of the options panel. If the calculated remaining space is smaller, the value gets ignored.",
|
|
67435
67445
|
"name": "--sbb-options-panel-max-height"
|
|
@@ -7,6 +7,7 @@ import { SbbAutocompleteBaseElement } from './autocomplete-base-element.ts';
|
|
|
7
7
|
* @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
|
|
8
8
|
* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
|
|
9
9
|
* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
|
|
10
|
+
* @cssprop [--sbb-options-panel-offset=var(--sbb-spacing-fixed-2x)] - Gap between autocomplete and panel.
|
|
10
11
|
* @cssprop [--sbb-options-panel-max-height] - Maximum height of the options panel.
|
|
11
12
|
* If the calculated remaining space is smaller, the value gets ignored.
|
|
12
13
|
*/
|
|
@@ -705,6 +705,7 @@ const ariaRoleOnHost = isSafari;
|
|
|
705
705
|
* @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
|
|
706
706
|
* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
|
|
707
707
|
* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
|
|
708
|
+
* @cssprop [--sbb-options-panel-offset=var(--sbb-spacing-fixed-2x)] - Gap between autocomplete and panel.
|
|
708
709
|
* @cssprop [--sbb-options-panel-max-height] - Maximum height of the options panel.
|
|
709
710
|
* If the calculated remaining space is smaller, the value gets ignored.
|
|
710
711
|
*/
|
|
@@ -219,7 +219,7 @@ var SbbOptionHintElement = class extends SbbNegativeMixin(SbbElement) {
|
|
|
219
219
|
|
|
220
220
|
//#endregion
|
|
221
221
|
//#region src/elements/option/option-panel-common.scss?inline
|
|
222
|
-
var option_panel_common_default = ":host {\n --sbb-options-panel-position-x: 0;\n --sbb-options-panel-position-y: 0;\n --sbb-options-pointer-events: all;\n --_sbb-options-panel-max-height: min(\n var(--sbb-options-panel-max-height-calculated),\n var(--sbb-options-panel-max-height, 100000em)\n );\n --sbb-options-panel-min-height: 1em;\n --sbb-options-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-options-panel-internal-z-index: var(\n --sbb-select-z-index,\n var(--sbb-overlay-default-z-index)\n );\n font-weight: normal;\n}\n\n:host([negative]) {\n --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard-negative);\n --sbb-options-panel-background-color: var(--sbb-background-color-2-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:not(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))),\n:host(:is(:state(state-closed),[state--state-closed])) {\n --sbb-options-panel-visibility: hidden;\n --sbb-options-pointer-events: none;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n --sbb-options-panel-animation-name: open;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n --sbb-options-panel-animation-name: close;\n}\n\n:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) {\n --sbb-options-panel-animation-translate: var(--sbb-spacing-fixed-2x);\n}\n\n:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) {\n --sbb-options-panel-animation-translate: calc(-1 * var(--sbb-spacing-fixed-2x));\n --
|
|
222
|
+
var option_panel_common_default = ":host {\n --sbb-options-panel-position-x: 0;\n --sbb-options-panel-position-y: 0;\n --sbb-options-pointer-events: all;\n --_sbb-options-panel-max-height: min(\n var(--sbb-options-panel-max-height-calculated),\n var(--sbb-options-panel-max-height, 100000em)\n );\n --sbb-options-panel-min-height: 1em;\n --sbb-options-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-options-panel-internal-z-index: var(\n --sbb-select-z-index,\n var(--sbb-overlay-default-z-index)\n );\n font-weight: normal;\n}\n\n:host([negative]) {\n --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard-negative);\n --sbb-options-panel-background-color: var(--sbb-background-color-2-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:not(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))),\n:host(:is(:state(state-closed),[state--state-closed])) {\n --sbb-options-panel-visibility: hidden;\n --sbb-options-pointer-events: none;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n --sbb-options-panel-animation-name: open;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n --sbb-options-panel-animation-name: close;\n}\n\n:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) {\n --sbb-options-panel-animation-translate: var(--sbb-spacing-fixed-2x);\n}\n\n:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) {\n --sbb-options-panel-animation-translate: calc(-1 * var(--sbb-spacing-fixed-2x));\n --_sbb-options-panel-offset: calc(-1 * var(--sbb-options-panel-offset));\n}\n\n:host([preserve-icon-space]) {\n --sbb-option-icon-container-display: block;\n}\n\n::slotted(sbb-divider) {\n margin-block: var(--sbb-options-panel-divider-margin-block);\n}\n\n.sbb-option-panel__overlay-container {\n position: fixed;\n pointer-events: none;\n inset: 0;\n z-index: var(--sbb-options-panel-internal-z-index);\n}\n.sbb-option-panel__overlay-container::after {\n content: \"\";\n display: block;\n position: absolute;\n top: var(--sbb-options-panel-origin-position-y);\n left: var(--sbb-options-panel-origin-position-x);\n width: var(--sbb-options-panel-width);\n height: var(--sbb-options-panel-origin-height);\n background-color: transparent;\n border-radius: var(--sbb-options-panel-border-radius);\n transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n}\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container::after {\n box-shadow: var(--sbb-options-panel-box-shadow);\n}\n\n.sbb-option-panel__overlay {\n display: block;\n position: absolute;\n visibility: var(--sbb-options-panel-visibility, visible);\n border: none;\n border-radius: var(--sbb-options-panel-border-radius);\n top: var(--sbb-options-panel-position-y);\n left: var(--sbb-options-panel-position-x);\n width: var(--sbb-options-panel-width, fit-content);\n transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n box-shadow: var(--sbb-options-panel-box-shadow);\n background-color: var(--sbb-options-panel-background-color);\n margin-block-start: var(--_sbb-options-panel-offset, var(--sbb-options-panel-offset));\n padding-block: var(--sbb-options-panel-padding-block);\n padding-inline: 0;\n max-height: var(--_sbb-options-panel-max-height);\n min-height: var(--sbb-options-panel-min-height);\n pointer-events: var(--sbb-options-pointer-events);\n overflow: hidden auto;\n animation-name: var(--sbb-options-panel-animation-name);\n animation-duration: var(--sbb-options-panel-animation-duration);\n animation-timing-function: var(--sbb-options-panel-animation-timing-function);\n}\n@media (forced-colors: active) {\n .sbb-option-panel__overlay {\n border: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n@keyframes open {\n from {\n translate: 0 var(--sbb-options-panel-animation-translate);\n opacity: 0;\n }\n to {\n translate: 0;\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n translate: 0;\n opacity: 1;\n }\n to {\n translate: 0 var(--sbb-options-panel-animation-translate);\n opacity: 0;\n }\n}\n";
|
|
223
223
|
|
|
224
224
|
//#endregion
|
|
225
225
|
//#region src/elements/option/option-styles.ts
|
|
@@ -9,6 +9,7 @@ declare const SbbSelectElement_base: import("../core.ts").AbstractConstructor<im
|
|
|
9
9
|
* @cssprop [--sbb-select-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
|
|
10
10
|
* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
|
|
11
11
|
* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
|
|
12
|
+
* @cssprop [--sbb-options-panel-offset=var(--sbb-spacing-fixed-2x)] - Gap between select and panel.
|
|
12
13
|
* @cssprop [--sbb-options-panel-max-height] - Maximum height of the options panel.
|
|
13
14
|
* If the calculated remaining space is smaller, the value gets ignored.
|
|
14
15
|
* @overrideType value - (T = string | string[]) | null
|
|
@@ -26,6 +26,7 @@ let nextId = 0;
|
|
|
26
26
|
* @cssprop [--sbb-select-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
|
|
27
27
|
* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
|
|
28
28
|
* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
|
|
29
|
+
* @cssprop [--sbb-options-panel-offset=var(--sbb-spacing-fixed-2x)] - Gap between select and panel.
|
|
29
30
|
* @cssprop [--sbb-options-panel-max-height] - Maximum height of the options panel.
|
|
30
31
|
* If the calculated remaining space is smaller, the value gets ignored.
|
|
31
32
|
* @overrideType value - (T = string | string[]) | null
|
package/lean-off-brand-theme.css
CHANGED
|
@@ -1589,8 +1589,8 @@ summary {
|
|
|
1589
1589
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
1590
1590
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1591
1591
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
1592
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1593
1592
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
1593
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
1594
1594
|
--sbb-overlay-background-color: var(--sbb-background-color-3);
|
|
1595
1595
|
--sbb-overlay-height: 100%;
|
|
1596
1596
|
--sbb-overlay-animation-easing: ease;
|
package/lean-safety-theme.css
CHANGED
|
@@ -1589,8 +1589,8 @@ summary {
|
|
|
1589
1589
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
1590
1590
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1591
1591
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
1592
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1593
1592
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
1593
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
1594
1594
|
--sbb-overlay-background-color: var(--sbb-background-color-3);
|
|
1595
1595
|
--sbb-overlay-height: 100%;
|
|
1596
1596
|
--sbb-overlay-animation-easing: ease;
|
package/lean-theme.css
CHANGED
|
@@ -1589,8 +1589,8 @@ summary {
|
|
|
1589
1589
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
1590
1590
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1591
1591
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
1592
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1593
1592
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
1593
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
1594
1594
|
--sbb-overlay-background-color: var(--sbb-background-color-3);
|
|
1595
1595
|
--sbb-overlay-height: 100%;
|
|
1596
1596
|
--sbb-overlay-animation-easing: ease;
|
package/off-brand-theme.css
CHANGED
|
@@ -1589,8 +1589,8 @@ summary {
|
|
|
1589
1589
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
1590
1590
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1591
1591
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
1592
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1593
1592
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
1593
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
1594
1594
|
--sbb-overlay-background-color: var(--sbb-background-color-3);
|
|
1595
1595
|
--sbb-overlay-height: 100%;
|
|
1596
1596
|
--sbb-overlay-animation-easing: ease;
|
|
@@ -66,8 +66,10 @@ $theme: 'standard' !default;
|
|
|
66
66
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
67
67
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
68
68
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
69
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
70
69
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
70
|
+
|
|
71
|
+
// Public documented variable on sbb-select and sbb-autocomplete.
|
|
72
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
@mixin rules {
|
package/option.pure.js
CHANGED
|
@@ -13,7 +13,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
|
|
|
13
13
|
<span class="sbb-option-hint">
|
|
14
14
|
<slot></slot>
|
|
15
15
|
</span>
|
|
16
|
-
`}};const E=i(`:host{--sbb-options-panel-position-x:0;--sbb-options-panel-position-y:0;--sbb-options-pointer-events:all;--_sbb-options-panel-max-height:min(var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height,100000em));--sbb-options-panel-min-height:1em;--sbb-options-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));font-weight:400}:host([negative]){--sbb-options-panel-box-shadow:var(--sbb-box-shadow-level-9-hard-negative);--sbb-options-panel-background-color:var(--sbb-background-color-2-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility:hidden;--sbb-options-pointer-events:none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name:open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name:close}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-translate:var(--sbb-spacing-fixed-2x)}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-animation-translate:calc(-1 * var(--sbb-spacing-fixed-2x));--
|
|
16
|
+
`}};const E=i(`:host{--sbb-options-panel-position-x:0;--sbb-options-panel-position-y:0;--sbb-options-pointer-events:all;--_sbb-options-panel-max-height:min(var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height,100000em));--sbb-options-panel-min-height:1em;--sbb-options-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));font-weight:400}:host([negative]){--sbb-options-panel-box-shadow:var(--sbb-box-shadow-level-9-hard-negative);--sbb-options-panel-background-color:var(--sbb-background-color-2-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility:hidden;--sbb-options-pointer-events:none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name:open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name:close}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-translate:var(--sbb-spacing-fixed-2x)}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-animation-translate:calc(-1 * var(--sbb-spacing-fixed-2x));--_sbb-options-panel-offset:calc(-1 * var(--sbb-options-panel-offset))}:host([preserve-icon-space]){--sbb-option-icon-container-display:block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-option-panel__overlay-container{pointer-events:none;z-index:var(--sbb-options-panel-internal-z-index);position:fixed;inset:0}.sbb-option-panel__overlay-container:after{content:"";top:var(--sbb-options-panel-origin-position-y);left:var(--sbb-options-panel-origin-position-x);width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-origin-height);border-radius:var(--sbb-options-panel-border-radius);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);background-color:#0000;display:block;position:absolute}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container:after{box-shadow:var(--sbb-options-panel-box-shadow)}.sbb-option-panel__overlay{visibility:var(--sbb-options-panel-visibility,visible);border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width,fit-content);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);box-shadow:var(--sbb-options-panel-box-shadow);background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:var(--sbb-options-pointer-events);animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);border:none;margin-block-start:var(--_sbb-options-panel-offset,var(--sbb-options-panel-offset));padding-inline:0;display:block;position:absolute;overflow:hidden auto}@media (forced-colors:active){.sbb-option-panel__overlay{border:var(--sbb-border-width-1x) solid CanvasText}}@keyframes open{0%{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}}
|
|
17
17
|
`),D=m,O={childList:!0,subtree:!0,characterData:!0};let k=(()=>{let i=s(v(c)),l=[],d,m,y,b=[],x=[],S,C=[],w=[],T,E=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[];return class extends i{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;d=[a()],m=[a({type:Boolean})],y=[o()],S=[o()],T=[o()],A=[o()],N=[o()],I=[o()],e(this,null,d,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,l),e(this,null,m,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:t},null,l),e(this,null,y,{kind:`accessor`,name:`disabledFromGroup`,static:!1,private:!1,access:{has:e=>`disabledFromGroup`in e,get:e=>e.disabledFromGroup,set:(e,t)=>{e.disabledFromGroup=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`groupLabel`,static:!1,private:!1,access:{has:e=>`groupLabel`in e,get:e=>e.groupLabel,set:(e,t)=>{e.groupLabel=t}},metadata:t},C,w),e(this,null,T,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},E,k),e(this,null,A,{kind:`accessor`,name:`disableLabelHighlight`,static:!1,private:!1,access:{has:e=>`disableLabelHighlight`in e,get:e=>e.disableLabelHighlight,set:(e,t)=>{e.disableLabelHighlight=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`_highlightString`,static:!1,private:!1,access:{has:e=>`_highlightString`in e,get:e=>e._highlightString,set:(e,t)=>{e._highlightString=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`_inertAriaGroups`,static:!1,private:!1,access:{has:e=>`_inertAriaGroups`in e,get:e=>e._inertAriaGroups,set:(e,t)=>{e._inertAriaGroups=t}},metadata:t},L,R),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.events={optionselected:`optionselected`}}static{this.styles=[h]}set value(e){typeof e==`string`?(this.setAttribute(`value`,`${e}`),this._value=null):this._value=e,this.dispatchEvent(new Event(`ɵoptionvaluechange`,{bubbles:!0}))}get value(){return this._value??this.getAttribute(`value`)}set selected(e){this.toggleAttribute(`selected`,e),this._updateAriaSelected()}get selected(){return this.hasAttribute(`selected`)}#e;get disabledFromGroup(){return this.#e}set disabledFromGroup(e){this.#e=e}#t;get groupLabel(){return this.#t}set groupLabel(e){this.#t=e}#n;get label(){return this.#n}set label(e){this.#n=e}#r;get disableLabelHighlight(){return this.#r}set disableLabelHighlight(e){this.#r=e}#i;get _highlightString(){return this.#i}set _highlightString(e){this.#i=e}#a;get _inertAriaGroups(){return this.#a}set _inertAriaGroups(e){this.#a=e}constructor(){super(),this._value=(t(this,l),null),this.#e=t(this,b,!1),this.#t=(t(this,x),t(this,C,``)),this.#n=(t(this,w),t(this,E,void 0)),this.#r=(t(this,k),t(this,j,!1)),this.#i=(t(this,M),t(this,P,null)),this.#a=(t(this,F),t(this,L,!1)),this._previousSize=(t(this,R),null),this.addEventListener?.(`click`,e=>this.selectByClick(e),{passive:!0}),this.addController(new _(this,{config:O,callback:()=>{this.handleHighlightState(),this.dispatchEvent(new Event(`optionLabelChanged`,{bubbles:!0}))}})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid`),{negative:e=>this.toggleState(`negative`,e.negative)})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}})),D&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=D):this._inertAriaGroups=D)}attributeChangedCallback(e,t,n){(e!==`value`||t!==n)&&super.attributeChangedCallback(e,t,n)}highlight(e){this._highlightString=e}selectViaUserInteraction(e){this.selected=e,this.selected&&this.dispatchEvent(new Event(`optionselected`,{bubbles:!0,composed:!0}))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),(e===`disabled`||e===`disabledFromGroup`)&&(this.toggleState(`disabled`,this.disabled||this.disabledFromGroup),g(this,`tabindex`,f&&!this.disabled&&!this.disabledFromGroup?0:null),this.updateAriaDisabled())}firstUpdated(e){super.firstUpdated(e),this._updateAriaSelected()}updateDisableHighlight(e){this.disableLabelHighlight=e,this.toggleState(`disable-highlight`,e)}setActive(e){this.toggleState(`active`,e)}updateAriaDisabled(){this.internals.ariaDisabled=this.disabled||this.disabledFromGroup?`true`:null,this.dispatchEvent(new Event(`ɵdisabledchange`,{bubbles:!0}))}_updateAriaSelected(){this.internals.ariaSelected=`${this.selected}`}handleHighlightState(){let e=Array.from(this.childNodes??[]).filter(e=>e.nodeType!==Node.COMMENT_NODE&&(!(e instanceof Element)||e.slot!==`icon`)),t=e.filter(e=>e.nodeType===Node.TEXT_NODE);if(t.length===0||e.filter(e=>!(e instanceof Element)||e.localName!==`template`).length!==t.length){this.updateDisableHighlight(!0);return}this.label=t.map(e=>e.wholeText).filter(e=>e.trim()).join(``)}getHighlightedLabel(){if(!this._highlightString||!this._highlightString.trim())return n`${this.label}`;let e=this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());if(e===-1)return n`${this.label}`;let t=this.label.substring(0,e),r=this.label.substring(e,e+this._highlightString.length),i=this.label.substring(e+this._highlightString.length);return n`
|
|
18
18
|
<span class="sbb-option__label--highlight">${t}</span><span>${r}</span
|
|
19
19
|
><span class="sbb-option__label--highlight">${i}</span>
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.7.0-dev.
|
|
3
|
+
"version": "5.7.0-dev.1788435806",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/ad3ef270a9264bab60574fa6a65f014e53321438"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1589,8 +1589,8 @@ summary {
|
|
|
1589
1589
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
1590
1590
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1591
1591
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
1592
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1593
1592
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
1593
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
1594
1594
|
--sbb-overlay-background-color: var(--sbb-background-color-3);
|
|
1595
1595
|
--sbb-overlay-height: 100%;
|
|
1596
1596
|
--sbb-overlay-animation-easing: ease;
|
package/standard-theme.css
CHANGED
|
@@ -1589,8 +1589,8 @@ summary {
|
|
|
1589
1589
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
1590
1590
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1591
1591
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
1592
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1593
1592
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
1593
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
1594
1594
|
--sbb-overlay-background-color: var(--sbb-background-color-3);
|
|
1595
1595
|
--sbb-overlay-height: 100%;
|
|
1596
1596
|
--sbb-overlay-animation-easing: ease;
|