@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1777019159 → 5.0.0-next-dev.1777034079

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.
Files changed (23) hide show
  1. package/core/styles/core.scss +4 -0
  2. package/core.css +8 -0
  3. package/custom-elements.json +957 -957
  4. package/development/file-selector/common/file-selector-common.d.ts.map +1 -1
  5. package/development/file-selector/common/file-selector-common.js +1 -1
  6. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts.map +1 -1
  7. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +1 -1
  8. package/development/file-selector-common-BX5f18cJ.js +409 -0
  9. package/development/file-selector-dropzone.component-DMNom2OW.js +110 -0
  10. package/development/file-selector.js +2 -2
  11. package/development/file-selector.pure.js +2 -2
  12. package/file-selector/common/file-selector-common.js +1 -1
  13. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +1 -1
  14. package/{file-selector-common-DpccuOQ4.js → file-selector-common-CMLaHuDP.js} +38 -40
  15. package/{file-selector-dropzone.component-BSF-kegh.js → file-selector-dropzone.component-CWwpvAVD.js} +3 -4
  16. package/file-selector.js +2 -2
  17. package/file-selector.pure.js +2 -2
  18. package/off-brand-theme.css +8 -0
  19. package/package.json +2 -2
  20. package/safety-theme.css +8 -0
  21. package/standard-theme.css +8 -0
  22. package/development/file-selector-common-DE_jT1fa.js +0 -411
  23. package/development/file-selector-dropzone.component-B1Y5qOjb.js +0 -111
package/{file-selector-common-DpccuOQ4.js → file-selector-common-CMLaHuDP.js} RENAMED
@@ -7,7 +7,7 @@ import { SbbSecondaryButtonElement as y } from "./button.pure.js";
7
7
  import { ref as b } from "lit/directives/ref.js";
8
8
  //#endregion
9
9
  //#region src/elements/file-selector/common/file-selector-common.ts
10
- var x = r(":host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-file-selector-background-color: var(--sbb-background-color-1);--sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media(forced-colors:active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color: var(--sbb-background-color-3);--sbb-file-selector-border-color: var(--sbb-color-storm);--sbb-file-selector-border-color: light-dark(var(--sbb-color-storm), var(--sbb-color-anthracite))}@media(forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal);color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}"), S = (r) => (() => {
10
+ var x = r(":host{--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:block;width:20rem}@media(forced-colors:active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color: var(--sbb-background-color-3);--sbb-file-selector-border-color: var(--sbb-color-storm);--sbb-file-selector-border-color: light-dark(var(--sbb-color-storm), var(--sbb-color-anthracite))}@media(forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal);color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}"), S = (r) => (() => {
11
11
  let x = a(o(r)), S = [], C, w = [], T = [], E, D = [], O = [], k, A = [], j = [], M, N = [], P = [], F, I = [], L = [], R, z;
12
12
  return class extends x {
13
13
  constructor() {
@@ -234,18 +234,18 @@ var x = r(":host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-select
234
234
  ELEMENT: "span"
235
235
  };
236
236
  return _`
237
- <${v(e.WRAPPER)} class='sbb-file-selector__file-list'>
237
+ <${v(e.WRAPPER)} class="sbb-file-selector__file-list">
238
238
  ${this.files.map((t) => _`
239
- <${v(e.ELEMENT)} class='sbb-file-selector__file'>
240
- <span class='sbb-file-selector__file-details'>
241
- <span class='sbb-file-selector__file-name'>${t.name}</span>
242
- <span class='sbb-file-selector__file-size'>${this._formatFileSize(t.size)}</span>
239
+ <${v(e.ELEMENT)} class="sbb-file-selector__file">
240
+ <span class="sbb-file-selector__file-details">
241
+ <span class="sbb-file-selector__file-name">${t.name}</span>
242
+ <span class="sbb-file-selector__file-size">${this._formatFileSize(t.size)}</span>
243
243
  </span>
244
244
  <sbb-secondary-button
245
- size='${this.size}'
246
- icon-name='trash-small'
247
- @click='${() => this._removeFile(t)}'
248
- aria-label='${`${p[this.language.current]} - ${t.name}`}'
245
+ size=${this.size}
246
+ icon-name="trash-small"
247
+ @click=${() => this._removeFile(t)}
248
+ aria-label=${`${p[this.language.current]} - ${t.name}`}
249
249
  ></sbb-secondary-button>
250
250
  </${v(e.ELEMENT)}>`)}
251
251
  </${v(e.WRAPPER)}>
@@ -269,38 +269,36 @@ var x = r(":host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-select
269
269
  render() {
270
270
  let e = this.accessibilityLabel ? `${this.getButtonLabel()} - ${this.accessibilityLabel}` : void 0;
271
271
  return _`
272
- <div class="sbb-file-selector">
273
- <div
274
- class="sbb-file-selector__input-container"
275
- @dragenter=${this._onDragEnter}
276
- @dragover=${this._blockEvent}
277
- @dragleave=${this._onDragLeave}
278
- @drop=${this._onFileDrop}
279
- >
280
- ${this.renderTemplate(_`<input
281
- class="sbb-file-selector__visually-hidden"
282
- type="file"
283
- ?disabled="${this.disabled || this.formDisabled}"
284
- ?multiple="${this.multiple}"
285
- accept="${this.accept || n}"
286
- aria-label="${e || n}"
287
- @change="${this._readFiles}"
288
- @focus="${this._onFocus}"
289
- @blur="${this._onBlur}"
290
- ${b((e) => {
272
+ <div
273
+ class="sbb-file-selector__input-container"
274
+ @dragenter=${this._onDragEnter}
275
+ @dragover=${this._blockEvent}
276
+ @dragleave=${this._onDragLeave}
277
+ @drop=${this._onFileDrop}
278
+ >
279
+ ${this.renderTemplate(_`<input
280
+ class="sbb-file-selector__visually-hidden"
281
+ type="file"
282
+ ?disabled=${this.disabled || this.formDisabled}
283
+ ?multiple=${this.multiple}
284
+ accept=${this.accept || n}
285
+ aria-label=${e || n}
286
+ @change=${this._readFiles}
287
+ @focus=${this._onFocus}
288
+ @blur=${this._onBlur}
289
+ ${b((e) => {
291
290
  this._hiddenInput = e;
292
291
  })}
293
- />`)}
294
- </div>
295
- <p
296
- role="status"
297
- class="sbb-file-selector__visually-hidden"
298
- ${b((e) => this._liveRegion = e)}
299
- ></p>
300
- ${this.files.length > 0 ? this._renderFileList() : n}
301
- <div class="sbb-file-selector__error">
302
- <slot name="error"></slot>
303
- </div>
292
+ />`)}
293
+ </div>
294
+ <p
295
+ role="status"
296
+ class="sbb-file-selector__visually-hidden"
297
+ ${b((e) => this._liveRegion = e)}
298
+ ></p>
299
+ ${this.files.length > 0 ? this._renderFileList() : n}
300
+ <div class="sbb-file-selector__error">
301
+ <slot name="error"></slot>
304
302
  </div>
305
303
  `;
306
304
  }
package/{file-selector-dropzone.component-BSF-kegh.js → file-selector-dropzone.component-CWwpvAVD.js} RENAMED
@@ -8,7 +8,7 @@ import { SbbIconElement as d } from "./icon.pure.js";
8
8
  import { ref as f } from "lit/directives/ref.js";
9
9
  import { SbbFileSelectorCommonElementMixin as p, fileSelectorCommonStyle as m } from "./file-selector/common/file-selector-common.js";
10
10
  //#region src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.scss?inline
11
- var h = ".sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));--sbb-title-line-height: var(--sbb-typo-line-height-text);margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;font-size:var(--sbb-title-font-size);letter-spacing:var(--sbb-typo-letter-spacing-heading);line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}", g = (() => {
11
+ var h = ":host([size=m]){--_sbb-file-selector-dropzone-icon-medium-display: block;--_sbb-file-selector-dropzone-icon-small-display: none}:host([size=s]){--_sbb-file-selector-dropzone-icon-medium-display: none;--_sbb-file-selector-dropzone-icon-small-display: block}.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--icon sbb-icon[name=folder-open-medium]{display:var(--_sbb-file-selector-dropzone-icon-medium-display)}.sbb-file-selector__dropzone-area--icon sbb-icon[name=folder-open-small]{display:var(--_sbb-file-selector-dropzone-icon-small-display)}.sbb-file-selector__dropzone-area--title{--sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));--sbb-title-line-height: var(--sbb-typo-line-height-text);margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;font-size:var(--sbb-title-font-size);letter-spacing:var(--sbb-typo-letter-spacing-heading);line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}", g = (() => {
12
12
  let g = p(i), _, v = [], y = [];
13
13
  return class extends g {
14
14
  static {
@@ -61,9 +61,8 @@ var h = ".sbb-file-selector__dropzone-area{display:flex;flex-direction:column;al
61
61
  <label>
62
62
  <span class="sbb-file-selector__dropzone-area">
63
63
  <span class="sbb-file-selector__dropzone-area--icon">
64
- <sbb-icon
65
- name=${this.size === "m" ? "folder-open-medium" : "folder-open-small"}
66
- ></sbb-icon>
64
+ <sbb-icon name="folder-open-medium"></sbb-icon>
65
+ <sbb-icon name="folder-open-small"></sbb-icon>
67
66
  </span>
68
67
  <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
69
68
  <span class="sbb-file-selector__dropzone-area--subtitle">
package/file-selector.js CHANGED
@@ -1,5 +1,5 @@
1
- import { n as e, t } from "./file-selector-common-DpccuOQ4.js";
2
- import { t as n } from "./file-selector-dropzone.component-BSF-kegh.js";
1
+ import { n as e, t } from "./file-selector-common-CMLaHuDP.js";
2
+ import { t as n } from "./file-selector-dropzone.component-CWwpvAVD.js";
3
3
  import { SbbFileSelectorElement as r } from "./file-selector/file-selector/file-selector.component.js";
4
4
  import "./file-selector.pure.js";
5
5
  r.define(), n.define();
package/file-selector.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as e, t } from "./file-selector-common-DpccuOQ4.js";
2
- import { t as n } from "./file-selector-dropzone.component-BSF-kegh.js";
1
+ import { n as e, t } from "./file-selector-common-CMLaHuDP.js";
2
+ import { t as n } from "./file-selector-dropzone.component-CWwpvAVD.js";
3
3
  import { SbbFileSelectorElement as r } from "./file-selector/file-selector/file-selector.component.js";
4
4
  export { t as SbbFileSelectorCommonElementMixin, n as SbbFileSelectorDropzoneElement, r as SbbFileSelectorElement, e as fileSelectorCommonStyle };
package/off-brand-theme.css CHANGED
@@ -1538,6 +1538,14 @@ slot[name=error]::slotted(*) {
1538
1538
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1539
1539
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1540
1540
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1541
+ --sbb-file-selector-color: var(--sbb-color-2);
1542
+ --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1543
+ --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1544
+ --sbb-file-selector-background-color: var(--sbb-background-color-1);
1545
+ --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
1546
+ --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
1547
+ --_sbb-file-selector-dropzone-icon-medium-display: block;
1548
+ --_sbb-file-selector-dropzone-icon-small-display: none;
1541
1549
  --sbb-flip-card-background-color: var(--sbb-background-color-4);
1542
1550
  --sbb-flip-card-border: var(--sbb-border-width-2x);
1543
1551
  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.0.0-next-dev.1777019159",
3
+ "version": "5.0.0-next-dev.1777034079",
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/79629820ea7c6c89b49e922a55eab4052c744a23"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/3d5a9d6ccc5e499cbcf59faf06263b2b4f6ae047"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1538,6 +1538,14 @@ slot[name=error]::slotted(*) {
1538
1538
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1539
1539
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1540
1540
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1541
+ --sbb-file-selector-color: var(--sbb-color-2);
1542
+ --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1543
+ --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1544
+ --sbb-file-selector-background-color: var(--sbb-background-color-1);
1545
+ --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
1546
+ --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
1547
+ --_sbb-file-selector-dropzone-icon-medium-display: block;
1548
+ --_sbb-file-selector-dropzone-icon-small-display: none;
1541
1549
  --sbb-flip-card-background-color: var(--sbb-background-color-4);
1542
1550
  --sbb-flip-card-border: var(--sbb-border-width-2x);
1543
1551
  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
package/standard-theme.css CHANGED
@@ -1538,6 +1538,14 @@ slot[name=error]::slotted(*) {
1538
1538
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1539
1539
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1540
1540
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1541
+ --sbb-file-selector-color: var(--sbb-color-2);
1542
+ --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1543
+ --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1544
+ --sbb-file-selector-background-color: var(--sbb-background-color-1);
1545
+ --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
1546
+ --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
1547
+ --_sbb-file-selector-dropzone-icon-medium-display: block;
1548
+ --_sbb-file-selector-dropzone-icon-small-display: none;
1541
1549
  --sbb-flip-card-background-color: var(--sbb-background-color-4);
1542
1550
  --sbb-flip-card-border: var(--sbb-border-width-2x);
1543
1551
  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);