@sbb-esta/lyne-elements-dev 5.2.0-dev.1783418584 → 5.2.0-dev.1783495187

package/download.pure.js

@@ -0,0 +1,21 @@
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbSecondaryButtonStaticElement as o}from"./button.pure.js";import{SbbElement as s,SbbLanguageController as c,SbbLinkBaseElement as l,SbbPropertyWatcherController as u,defaultDateAdapter as d,forceType as f,i18nDownload as p,i18nNonAccessible as m,omitEmptyConverter as h,readConfig as g,screenReaderOnlyStyles as _}from"./core.js";import{SbbIconNameMixin as v}from"./icon.pure.js";var y=`:host{--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent;--sbb-card-border-radius:var(--sbb-border-radius-4x);--sbb-card-animation-easing:var(--sbb-animation-easing);--sbb-card-border-style:solid;--sbb-card-padding-inline-default:var(--sbb-spacing-responsive-s);--sbb-card-padding-block-default:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block-default:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default);display:block}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}.sbb-download{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}.sbb-download:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}@media (forced-colors:active){.sbb-download{--sbb-title-color:var(--sbb-card-color)}}.sbb-download{align-items:center;gap:var(--sbb-download-gap);translate:0 var(--sbb-card-hover-shift,0);transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);text-decoration:none;display:flex}.sbb-download: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)}@media (any-hover:hover){:host(:hover) .sbb-download{--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover) .sbb-download{--sbb-card-border-color:Highlight}}.sbb-download__icon{flex:none}.sbb-download__content{flex-direction:column;flex:auto;min-width:0;display:flex}.sbb-download__label{overflow-wrap:break-word;color:var(--sbb-download-label-color);font-weight:700}.sbb-download__custom-content,.sbb-download__info{line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-download-info-color)}.sbb-download__button{flex:none;margin-inline-start:auto}
+`;const b=new Map([[`pdf`,`document-pdf-small`],[`xls`,`document-xls-small`],[`xlsx`,`document-xls-small`],[`ppt`,`document-ppt-small`],[`pptx`,`document-ppt-small`],[`doc`,`document-doc-small`],[`docx`,`document-doc-small`],[`zip`,`document-zip-small`],[`jpg`,`document-image-small`],[`jpeg`,`document-image-small`],[`png`,`document-image-small`],[`gif`,`document-image-small`],[`svg`,`document-image-small`],[`webp`,`document-image-small`]]);let x=(()=>{let s=v(l),u=[],d,m=[],g=[],x,S=[],C=[],w;return class extends s{constructor(){super(...arguments),this.#e=(t(this,u),t(this,m,`white`)),this.#t=(t(this,g),t(this,S,``)),this._languageController=(t(this,C),new c(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;d=[a({reflect:!0})],x=[f(),a({converter:h})],w=[a({type:Boolean,reflect:!1})],e(this,null,d,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},m,g),e(this,null,x,{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},S,C),e(this,null,w,{kind:`setter`,name:`download`,static:!1,private:!1,access:{has:e=>`download`in e,set:(e,t)=>{e.download=t}},metadata:t},null,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-download`}static{this.elementDependencies=[o]}static{this.styles=[_,i(y)]}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get label(){return this.#t}set label(e){this.#t=e}set download(e){}get download(){return!0}get fileName(){return this.href.split(/[?#]/)[0].split(`/`).filter(Boolean).at(-1)??``}get fileExtension(){let e=this.fileName;return e.includes(`.`)?e.split(`.`).at(-1)?.toLowerCase()??``:``}renderIconName(){if(this.iconName)return this.iconName;if(!this.href)return``;let e=this.fileExtension;return e&&b.get(e)||`document-standard-small`}firstUpdated(e){super.firstUpdated(e),this._updateDescribedByElements()}_updateDescribedByElements(){let e=this.shadowRoot?.querySelector?.(`a`);if(e){let t=this.shadowRoot?.querySelector?.(`.sbb-download__custom-content`);e.ariaDescribedByElements=[...t?[t]:[],...this._downloadInfoElements()]}}_downloadInfoElements(){return this.querySelectorAll?.(`sbb-download-info`)??[]}renderTemplate(){return n`
+      ${this.renderIconSlot(`sbb-download__icon`)}
+      <span class="sbb-download__content">
+        <span class="sbb-download__label">${this.label||this.fileName}</span>
+        <span class="sbb-screen-reader-only">
+          ${this._downloadInfoElements().length?r:n`&nbsp;${this.fileExtension}`}&nbsp;${p[this._languageController.current]}
+        </span>
+        <span class="sbb-download__custom-content" aria-hidden="true">
+          <slot></slot>
+        </span>
+        <span class="sbb-download__info">
+          <slot name="info" @slotchange="${()=>this._updateDescribedByElements()}"></slot>
+        </span>
+      </span>
+      <sbb-secondary-button-static
+        class="sbb-download__button"
+        icon-name="download-small"
+      ></sbb-secondary-button-static>
+    `}}})();var S=`:host{display:block}
+`;const C=[`B`,`KB`,`MB`,`GB`,`TB`];let w=(()=>{let r=s,o,l=[],p=[],_,v=[],y=[],b,x=[],w=[],T,E=[],D=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;o=[f(),a({converter:h})],_=[f(),a({converter:h})],b=[f(),a({converter:h})],T=[f(),a({attribute:`non-accessible`,type:Boolean})],e(this,null,o,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},l,p),e(this,null,_,{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:t},v,y),e(this,null,b,{kind:`accessor`,name:`changed`,static:!1,private:!1,access:{has:e=>`changed`in e,get:e=>e.changed,set:(e,t)=>{e.changed=t}},metadata:t},x,w),e(this,null,T,{kind:`accessor`,name:`nonAccessible`,static:!1,private:!1,access:{has:e=>`nonAccessible`in e,get:e=>e.nonAccessible,set:(e,t)=>{e.nonAccessible=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-download-info`}static{this.styles=[i(S)]}#e;get type(){return this.#e}set type(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get changed(){return this.#n}set changed(e){this.#n=e}#r;get nonAccessible(){return this.#r}set nonAccessible(e){this.#r=e}constructor(){super(),this.#e=t(this,l,``),this.#t=(t(this,p),t(this,v,``)),this.#n=(t(this,y),t(this,x,``)),this.#r=(t(this,w),t(this,E,!1)),this._language=(t(this,D),new c(this)),this._dateAdapter=g().datetime?.dateAdapter??d,this._resolvedType=``,this._typeRedundant=!1,this._resolvedSize=``,this._resolvedChanged=``,this.internals.ariaHidden=`true`,this.addController(new u(this,()=>this.closest(`sbb-download`),{href:()=>this.requestUpdate(),label:()=>this.requestUpdate()}))}connectedCallback(){super.connectedCallback(),this.slot||=`info`,this.requestUpdate()}willUpdate(e){super.willUpdate(e),this._resolvedType=this._resolveType(),this._typeRedundant=this._isTypeRedundant(),e.has(`size`)&&(this._resolvedSize=this._resolveSize()),e.has(`changed`)&&(this._resolvedChanged=this._resolveChanged())}_resolveType(){return this.type||(this.closest?.(`sbb-download`)?.fileExtension.toUpperCase()??``)}_isTypeRedundant(){let e=this.closest?.(`sbb-download`);return!!e&&!e.label&&!!e.fileExtension}_resolveSize(){let e=this.size.trim();if(!e||!/^\d+$/.test(e))return e;let t=Number(e);if(t<=0)return`0 ${C[0]}`;let n=Math.min(Math.floor(Math.log(t)/Math.log(1024)),C.length-1);return`${(t/1024**n).toFixed(0)} ${C[n]}`}_resolveChanged(){if(!this.changed)return``;let e=this._dateAdapter.deserialize(this.changed);return this._dateAdapter.isValid(e)?this._dateAdapter.format(e,{weekdayStyle:`none`}):this.changed}render(){let e=[this._resolvedType,this._resolvedSize,this.nonAccessible?m[this._language.current]:``,this._resolvedChanged].filter(Boolean);return this.internals.ariaLabel=e.slice(this._typeRedundant&&this._resolvedType?1:0).join(`, `),n`${e.join(`, `)}`}}})();export{x as SbbDownloadElement,w as SbbDownloadInfoElement};

package/index.d.ts

@@ -18,6 +18,7 @@ import { SbbDateInputElement } from "./date-input.js";
 import { SbbDatepickerElement, SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement, SbbDatepickerToggleElement } from "./datepicker.js";
 import { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement } from "./dialog.js";
 import { SbbDividerElement } from "./divider.js";
+import { SbbDownloadElement, SbbDownloadInfoElement } from "./download.js";
 import { SbbExpansionPanelContentElement, SbbExpansionPanelElement, SbbExpansionPanelHeaderElement } from "./expansion-panel.js";
 import { SbbFileSelectorDropzoneElement, SbbFileSelectorElement } from "./file-selector.js";
 import { SbbFlipCardDetailsElement, SbbFlipCardElement, SbbFlipCardSummaryElement } from "./flip-card.js";
@@ -125,6 +126,8 @@ declare global {
   var SbbDialogElement: SbbDialogElement;
   var SbbDialogTitleElement: SbbDialogTitleElement;
   var SbbDividerElement: SbbDividerElement;
+  var SbbDownloadElement: SbbDownloadElement;
+  var SbbDownloadInfoElement: SbbDownloadInfoElement;
   var SbbErrorElement: SbbErrorElement;
   var SbbExpansionPanelContentElement: SbbExpansionPanelContentElement;
   var SbbExpansionPanelElement: SbbExpansionPanelElement;

package/index.js

@@ -18,6 +18,7 @@ import { SbbDateInputElement } from "./date-input.js";
 import { SbbDatepickerElement, SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement, SbbDatepickerToggleElement } from "./datepicker.js";
 import { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement } from "./dialog.js";
 import { SbbDividerElement } from "./divider.js";
+import { SbbDownloadElement, SbbDownloadInfoElement } from "./download.js";
 import { SbbExpansionPanelContentElement, SbbExpansionPanelElement, SbbExpansionPanelHeaderElement } from "./expansion-panel.js";
 import { SbbFileSelectorDropzoneElement, SbbFileSelectorElement } from "./file-selector.js";
 import { SbbFlipCardDetailsElement, SbbFlipCardElement, SbbFlipCardSummaryElement } from "./flip-card.js";
@@ -125,6 +126,8 @@ globalThis.SbbDialogContentElement = SbbDialogContentElement;
 globalThis.SbbDialogElement = SbbDialogElement;
 globalThis.SbbDialogTitleElement = SbbDialogTitleElement;
 globalThis.SbbDividerElement = SbbDividerElement;
+globalThis.SbbDownloadElement = SbbDownloadElement;
+globalThis.SbbDownloadInfoElement = SbbDownloadInfoElement;
 globalThis.SbbErrorElement = SbbErrorElement;
 globalThis.SbbExpansionPanelContentElement = SbbExpansionPanelContentElement;
 globalThis.SbbExpansionPanelElement = SbbExpansionPanelElement;

package/lean-off-brand-theme.css

@@ -1313,6 +1313,10 @@ summary {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: var(--sbb-color-granite);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1985,6 +1989,8 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-download-label-color: CanvasText;
+    --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;

package/lean-safety-theme.css

@@ -1313,6 +1313,10 @@ summary {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: var(--sbb-color-granite);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1985,6 +1989,8 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-download-label-color: CanvasText;
+    --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;

package/lean-theme.css

@@ -1313,6 +1313,10 @@ summary {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: var(--sbb-color-granite);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1985,6 +1989,8 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-download-label-color: CanvasText;
+    --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;

package/off-brand-theme.css

@@ -1313,6 +1313,10 @@ summary {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: var(--sbb-color-granite);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1985,6 +1989,8 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-download-label-color: CanvasText;
+    --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.2.0-dev.1783418584",
+  "version": "5.2.0-dev.1783495187",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/0251b80ee9cf2a5ba8cd91708f50614cae212e3e"
+    "https://github.com/sbb-design-systems/lyne-components/commit/fe560af494303da6280c1cd7f0efd783763e7c2c"
   ],
   "type": "module",
   "exports": {
@@ -264,6 +264,16 @@
       "development": "./development/divider.pure.js",
       "default": "./divider.pure.js"
     },
+    "./download.js": {
+      "types": "./development/download.d.ts",
+      "development": "./development/download.js",
+      "default": "./download.js"
+    },
+    "./download.pure.js": {
+      "types": "./development/download.pure.d.ts",
+      "development": "./development/download.pure.js",
+      "default": "./download.pure.js"
+    },
     "./expansion-panel.js": {
       "types": "./development/expansion-panel.d.ts",
       "development": "./development/expansion-panel.js",

package/safety-theme.css

@@ -1313,6 +1313,10 @@ summary {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: var(--sbb-color-granite);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1985,6 +1989,8 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-download-label-color: CanvasText;
+    --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;

package/standard-theme.css

@@ -1313,6 +1313,10 @@ summary {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: var(--sbb-color-granite);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1985,6 +1989,8 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-download-label-color: CanvasText;
+    --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;