@sbb-esta/lyne-elements-dev 5.4.1-dev.1785922302 → 5.4.1-dev.1785937286
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 +3 -3
- package/development/carousel/carousel-item/carousel-item.component.d.ts +1 -1
- package/development/carousel.pure.js +1 -1
- package/development/option.pure.js +1 -1
- package/development/sidebar/sidebar/sidebar.component.d.ts +1 -1
- package/development/sidebar.pure.js +1 -1
- package/option.pure.js +1 -1
- package/package.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -81411,7 +81411,7 @@
|
|
|
81411
81411
|
"name": "SbbCarouselItemElement",
|
|
81412
81412
|
"slots": [
|
|
81413
81413
|
{
|
|
81414
|
-
"description": "Use the unnamed slot to add images for the carousel, as
|
|
81414
|
+
"description": "Use the unnamed slot to add images for the carousel, as `<img>`, `<sbb-image>`, `<picture>`, ...",
|
|
81415
81415
|
"name": ""
|
|
81416
81416
|
}
|
|
81417
81417
|
],
|
|
@@ -143134,8 +143134,8 @@
|
|
|
143134
143134
|
"name": ""
|
|
143135
143135
|
},
|
|
143136
143136
|
{
|
|
143137
|
-
"description": "Use the title slot to add an
|
|
143138
|
-
"name": "title"
|
|
143137
|
+
"description": "Use the title-section slot to add an `<sbb-title>`.",
|
|
143138
|
+
"name": "title-section"
|
|
143139
143139
|
}
|
|
143140
143140
|
],
|
|
143141
143141
|
"members": [
|
|
@@ -8,7 +8,7 @@ export declare class SbbCarouselItemShowEvent extends Event {
|
|
|
8
8
|
/**
|
|
9
9
|
* It displays an item contained into the `sbb-carousel` component.
|
|
10
10
|
*
|
|
11
|
-
* @slot - Use the unnamed slot to add images for the carousel, as
|
|
11
|
+
* @slot - Use the unnamed slot to add images for the carousel, as `<img>`, `<sbb-image>`, `<picture>`, ...
|
|
12
12
|
* @event {SbbCarouselItemShowEvent} beforeshow - Event emitted when the item is starting scrolling.
|
|
13
13
|
* @event {SbbCarouselItemShowEvent} show - Event emitted when the item is full visible after scrolling.
|
|
14
14
|
*/
|
|
@@ -25,7 +25,7 @@ var SbbCarouselItemShowEvent = class extends Event {
|
|
|
25
25
|
/**
|
|
26
26
|
* It displays an item contained into the `sbb-carousel` component.
|
|
27
27
|
*
|
|
28
|
-
* @slot - Use the unnamed slot to add images for the carousel, as
|
|
28
|
+
* @slot - Use the unnamed slot to add images for the carousel, as `<img>`, `<sbb-image>`, `<picture>`, ...
|
|
29
29
|
* @event {SbbCarouselItemShowEvent} beforeshow - Event emitted when the item is starting scrolling.
|
|
30
30
|
* @event {SbbCarouselItemShowEvent} show - Event emitted when the item is full visible after scrolling.
|
|
31
31
|
*/
|
|
@@ -217,7 +217,7 @@ var SbbOptionHintElement = class extends SbbNegativeMixin(SbbElement) {
|
|
|
217
217
|
|
|
218
218
|
//#endregion
|
|
219
219
|
//#region src/elements/option/option-panel-common.scss?inline
|
|
220
|
-
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:
|
|
220
|
+
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-margin-block-start: calc(-1 * var(--sbb-spacing-fixed-2x));\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-margin-block-start);\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";
|
|
221
221
|
|
|
222
222
|
//#endregion
|
|
223
223
|
//#region src/elements/option/option-styles.ts
|
|
@@ -6,7 +6,7 @@ declare const SbbSidebarElement_base: import("../../core.ts").AbstractConstructo
|
|
|
6
6
|
* This component corresponds to a sidebar that can be opened on the sidebar container.
|
|
7
7
|
*
|
|
8
8
|
* @slot - Use the unnamed slot to slot any content into the sidebar.
|
|
9
|
-
* @slot title - Use the title slot to add an
|
|
9
|
+
* @slot title-section - Use the title-section slot to add an `<sbb-title>`.
|
|
10
10
|
*/
|
|
11
11
|
export declare class SbbSidebarElement extends SbbSidebarElement_base {
|
|
12
12
|
static readonly elementName: string;
|
|
@@ -267,7 +267,7 @@ var sidebar_default = ":host {\n --sbb-link-text-decoration-line: none;\n --sb
|
|
|
267
267
|
* This component corresponds to a sidebar that can be opened on the sidebar container.
|
|
268
268
|
*
|
|
269
269
|
* @slot - Use the unnamed slot to slot any content into the sidebar.
|
|
270
|
-
* @slot title - Use the title slot to add an
|
|
270
|
+
* @slot title-section - Use the title-section slot to add an `<sbb-title>`.
|
|
271
271
|
*/
|
|
272
272
|
let SbbSidebarElement = (() => {
|
|
273
273
|
let _classSuper = SbbAnimationCompleteMixin(SbbOpenCloseBaseElement);
|
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:
|
|
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-margin-block-start:calc(-1 * var(--sbb-spacing-fixed-2x))}: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-margin-block-start);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.4.1-dev.
|
|
3
|
+
"version": "5.4.1-dev.1785937286",
|
|
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/26cb6fbd06fdb0c9996cd9e1f5fbcfd0ec68e182"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|