@sbb-esta/lyne-elements-dev 4.11.0-dev.1776958539 → 4.11.0-dev.1777021821

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 (27) hide show
  1. package/core/styles/core.scss +4 -0
  2. package/core.css +8 -0
  3. package/custom-elements.json +940 -940
  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/common.js +1 -1
  7. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts.map +1 -1
  8. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +1 -1
  9. package/development/file-selector/file-selector-dropzone.js +1 -1
  10. package/development/file-selector-common-C7xIEiV4.js +416 -0
  11. package/development/file-selector-dropzone.component-BAWMZW4F.js +111 -0
  12. package/development/file-selector.js +2 -2
  13. package/development/file-selector.pure.js +2 -2
  14. package/file-selector/common/file-selector-common.js +1 -1
  15. package/file-selector/common.js +1 -1
  16. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +1 -1
  17. package/file-selector/file-selector-dropzone.js +1 -1
  18. package/{file-selector-common-DN4vHMpP.js → file-selector-common-BL9mM4SZ.js} +38 -40
  19. package/{file-selector-dropzone.component-DSmBp7xN.js → file-selector-dropzone.component-Ctar2kEw.js} +3 -4
  20. package/file-selector.js +2 -2
  21. package/file-selector.pure.js +2 -2
  22. package/off-brand-theme.css +8 -0
  23. package/package.json +2 -2
  24. package/safety-theme.css +8 -0
  25. package/standard-theme.css +8 -0
  26. package/development/file-selector-common-C82QR3zb.js +0 -418
  27. package/development/file-selector-dropzone.component-xfkQt0VX.js +0 -112
package/development/file-selector.js CHANGED
@@ -1,5 +1,5 @@
1
- import { n as fileSelectorCommonStyle, t as SbbFileSelectorCommonElementMixin } from "./file-selector-common-C82QR3zb.js";
2
- import { t as SbbFileSelectorDropzoneElement } from "./file-selector-dropzone.component-xfkQt0VX.js";
1
+ import { n as fileSelectorCommonStyle, t as SbbFileSelectorCommonElementMixin } from "./file-selector-common-C7xIEiV4.js";
2
+ import { t as SbbFileSelectorDropzoneElement } from "./file-selector-dropzone.component-BAWMZW4F.js";
3
3
  import { SbbFileSelectorElement } from "./file-selector/file-selector/file-selector.component.js";
4
4
  import "./file-selector.pure.js";
5
5
  //#region src/elements/file-selector.ts
package/development/file-selector.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as fileSelectorCommonStyle, t as SbbFileSelectorCommonElementMixin } from "./file-selector-common-C82QR3zb.js";
2
- import { t as SbbFileSelectorDropzoneElement } from "./file-selector-dropzone.component-xfkQt0VX.js";
1
+ import { n as fileSelectorCommonStyle, t as SbbFileSelectorCommonElementMixin } from "./file-selector-common-C7xIEiV4.js";
2
+ import { t as SbbFileSelectorDropzoneElement } from "./file-selector-dropzone.component-BAWMZW4F.js";
3
3
  import { SbbFileSelectorElement } from "./file-selector/file-selector/file-selector.component.js";
4
4
  export { SbbFileSelectorCommonElementMixin, SbbFileSelectorDropzoneElement, SbbFileSelectorElement, fileSelectorCommonStyle };
package/file-selector/common/file-selector-common.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as e, t } from "../../file-selector-common-DN4vHMpP.js";
1
+ import { n as e, t } from "../../file-selector-common-BL9mM4SZ.js";
2
2
  export { t as SbbFileSelectorCommonElementMixin, e as fileSelectorCommonStyle };
package/file-selector/common.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as e, t } from "../file-selector-common-DN4vHMpP.js";
1
+ import { n as e, t } from "../file-selector-common-BL9mM4SZ.js";
2
2
  //#region src/elements/file-selector/common.ts
3
3
  console.warn("The entrypoint '@sbb-esta/elements/file-selector/common.js' has been deprecated.\nUse either '@sbb-esta/elements/file-selector.js' or '@sbb-esta/elements/file-selector.pure.js' instead.");
4
4
  //#endregion
package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "../../file-selector-dropzone.component-DSmBp7xN.js";
1
+ import { t as e } from "../../file-selector-dropzone.component-Ctar2kEw.js";
2
2
  export { e as SbbFileSelectorDropzoneElement };
package/file-selector/file-selector-dropzone.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as e } from "../file-selector-dropzone.component-DSmBp7xN.js";
1
+ import { t as e } from "../file-selector-dropzone.component-Ctar2kEw.js";
2
2
  e.define(), console.warn("The entrypoint '@sbb-esta/elements/file-selector/file-selector-dropzone.js' has been deprecated.\nUse either '@sbb-esta/elements/file-selector.js' or '@sbb-esta/elements/file-selector.pure.js' instead.");
3
3
  //#endregion
4
4
  export { e as SbbFileSelectorDropzoneElement };
package/{file-selector-common-DN4vHMpP.js → file-selector-common-BL9mM4SZ.js} RENAMED
@@ -13,7 +13,7 @@ import { i18nFileSelectorButtonLabel as h, i18nFileSelectorButtonLabelMultiple a
13
13
  import { ref as y } from "lit/directives/ref.js";
14
14
  import { sbbInputModalityDetector as b } from "./core/a11y.js";
15
15
  //#region src/elements/file-selector/common/file-selector-common.scss?inline
16
- var x = ":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}";
16
+ var x = ":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}";
17
17
  //#endregion
18
18
  //#region src/elements/file-selector/common/file-selector-common.ts
19
19
  p.define();
@@ -241,18 +241,18 @@ var S = r(x), C = (r) => (() => {
241
241
  ELEMENT: "span"
242
242
  };
243
243
  return d`
244
- <${f(e.WRAPPER)} class='sbb-file-selector__file-list'>
244
+ <${f(e.WRAPPER)} class="sbb-file-selector__file-list">
245
245
  ${this.files.map((t) => d`
246
- <${f(e.ELEMENT)} class='sbb-file-selector__file'>
247
- <span class='sbb-file-selector__file-details'>
248
- <span class='sbb-file-selector__file-name'>${t.name}</span>
249
- <span class='sbb-file-selector__file-size'>${this._formatFileSize(t.size)}</span>
246
+ <${f(e.ELEMENT)} class="sbb-file-selector__file">
247
+ <span class="sbb-file-selector__file-details">
248
+ <span class="sbb-file-selector__file-name">${t.name}</span>
249
+ <span class="sbb-file-selector__file-size">${this._formatFileSize(t.size)}</span>
250
250
  </span>
251
251
  <sbb-secondary-button
252
- size='${this.size}'
253
- icon-name='trash-small'
254
- @click='${() => this._removeFile(t)}'
255
- aria-label='${`${v[this.language.current]} - ${t.name}`}'
252
+ size=${this.size}
253
+ icon-name="trash-small"
254
+ @click=${() => this._removeFile(t)}
255
+ aria-label=${`${v[this.language.current]} - ${t.name}`}
256
256
  ></sbb-secondary-button>
257
257
  </${f(e.ELEMENT)}>`)}
258
258
  </${f(e.WRAPPER)}>
@@ -276,38 +276,36 @@ var S = r(x), C = (r) => (() => {
276
276
  render() {
277
277
  let e = this.accessibilityLabel ? `${this.getButtonLabel()} - ${this.accessibilityLabel}` : void 0;
278
278
  return d`
279
- <div class="sbb-file-selector">
280
- <div
281
- class="sbb-file-selector__input-container"
282
- @dragenter=${this._onDragEnter}
283
- @dragover=${this._blockEvent}
284
- @dragleave=${this._onDragLeave}
285
- @drop=${this._onFileDrop}
286
- >
287
- ${this.renderTemplate(d`<input
288
- class="sbb-file-selector__visually-hidden"
289
- type="file"
290
- ?disabled="${this.disabled || this.formDisabled}"
291
- ?multiple="${this.multiple}"
292
- accept="${this.accept || n}"
293
- aria-label="${e || n}"
294
- @change="${this._readFiles}"
295
- @focus="${this._onFocus}"
296
- @blur="${this._onBlur}"
297
- ${y((e) => {
279
+ <div
280
+ class="sbb-file-selector__input-container"
281
+ @dragenter=${this._onDragEnter}
282
+ @dragover=${this._blockEvent}
283
+ @dragleave=${this._onDragLeave}
284
+ @drop=${this._onFileDrop}
285
+ >
286
+ ${this.renderTemplate(d`<input
287
+ class="sbb-file-selector__visually-hidden"
288
+ type="file"
289
+ ?disabled=${this.disabled || this.formDisabled}
290
+ ?multiple=${this.multiple}
291
+ accept=${this.accept || n}
292
+ aria-label=${e || n}
293
+ @change=${this._readFiles}
294
+ @focus=${this._onFocus}
295
+ @blur=${this._onBlur}
296
+ ${y((e) => {
298
297
  this._hiddenInput = e;
299
298
  })}
300
- />`)}
301
- </div>
302
- <p
303
- role="status"
304
- class="sbb-file-selector__visually-hidden"
305
- ${y((e) => this._liveRegion = e)}
306
- ></p>
307
- ${this.files.length > 0 ? this._renderFileList() : n}
308
- <div class="sbb-file-selector__error">
309
- <slot name="error"></slot>
310
- </div>
299
+ />`)}
300
+ </div>
301
+ <p
302
+ role="status"
303
+ class="sbb-file-selector__visually-hidden"
304
+ ${y((e) => this._liveRegion = e)}
305
+ ></p>
306
+ ${this.files.length > 0 ? this._renderFileList() : n}
307
+ <div class="sbb-file-selector__error">
308
+ <slot name="error"></slot>
311
309
  </div>
312
310
  `;
313
311
  }
package/{file-selector-dropzone.component-DSmBp7xN.js → file-selector-dropzone.component-Ctar2kEw.js} RENAMED
@@ -11,7 +11,7 @@ import "./icon.js";
11
11
  import { ref as d } from "lit/directives/ref.js";
12
12
  import { SbbFileSelectorCommonElementMixin as f, fileSelectorCommonStyle as p } from "./file-selector/common/file-selector-common.js";
13
13
  //#region src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.scss?inline
14
- var m = ".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)}";
14
+ var m = ":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)}";
15
15
  //#endregion
16
16
  //#region src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.component.ts
17
17
  c.define();
@@ -65,9 +65,8 @@ var h = (() => {
65
65
  <label>
66
66
  <span class="sbb-file-selector__dropzone-area">
67
67
  <span class="sbb-file-selector__dropzone-area--icon">
68
- <sbb-icon
69
- name=${this.size === "m" ? "folder-open-medium" : "folder-open-small"}
70
- ></sbb-icon>
68
+ <sbb-icon name="folder-open-medium"></sbb-icon>
69
+ <sbb-icon name="folder-open-small"></sbb-icon>
71
70
  </span>
72
71
  <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
73
72
  <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-DN4vHMpP.js";
2
- import { t as n } from "./file-selector-dropzone.component-DSmBp7xN.js";
1
+ import { n as e, t } from "./file-selector-common-BL9mM4SZ.js";
2
+ import { t as n } from "./file-selector-dropzone.component-Ctar2kEw.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-DN4vHMpP.js";
2
- import { t as n } from "./file-selector-dropzone.component-DSmBp7xN.js";
1
+ import { n as e, t } from "./file-selector-common-BL9mM4SZ.js";
2
+ import { t as n } from "./file-selector-dropzone.component-Ctar2kEw.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
@@ -1524,6 +1524,14 @@ slot[name=error]::slotted(*) {
1524
1524
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1525
1525
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1526
1526
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1527
+ --sbb-file-selector-color: var(--sbb-color-2);
1528
+ --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1529
+ --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1530
+ --sbb-file-selector-background-color: var(--sbb-background-color-1);
1531
+ --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
1532
+ --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
1533
+ --_sbb-file-selector-dropzone-icon-medium-display: block;
1534
+ --_sbb-file-selector-dropzone-icon-small-display: none;
1527
1535
  --sbb-flip-card-background-color: var(--sbb-background-color-4);
1528
1536
  --sbb-flip-card-border: var(--sbb-border-width-2x);
1529
1537
  --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": "4.11.0-dev.1776958539",
3
+ "version": "4.11.0-dev.1777021821",
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/7eb13512553695ee919ef6205bc078a610f46f53"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/52f747b42988765a3ad38e5eb118cafadd18b023"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1524,6 +1524,14 @@ slot[name=error]::slotted(*) {
1524
1524
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1525
1525
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1526
1526
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1527
+ --sbb-file-selector-color: var(--sbb-color-2);
1528
+ --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1529
+ --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1530
+ --sbb-file-selector-background-color: var(--sbb-background-color-1);
1531
+ --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
1532
+ --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
1533
+ --_sbb-file-selector-dropzone-icon-medium-display: block;
1534
+ --_sbb-file-selector-dropzone-icon-small-display: none;
1527
1535
  --sbb-flip-card-background-color: var(--sbb-background-color-4);
1528
1536
  --sbb-flip-card-border: var(--sbb-border-width-2x);
1529
1537
  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
package/standard-theme.css CHANGED
@@ -1524,6 +1524,14 @@ slot[name=error]::slotted(*) {
1524
1524
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1525
1525
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1526
1526
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1527
+ --sbb-file-selector-color: var(--sbb-color-2);
1528
+ --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1529
+ --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1530
+ --sbb-file-selector-background-color: var(--sbb-background-color-1);
1531
+ --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
1532
+ --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
1533
+ --_sbb-file-selector-dropzone-icon-medium-display: block;
1534
+ --_sbb-file-selector-dropzone-icon-small-display: none;
1527
1535
  --sbb-flip-card-background-color: var(--sbb-background-color-4);
1528
1536
  --sbb-flip-card-border: var(--sbb-border-width-2x);
1529
1537
  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);