@sbb-esta/lyne-elements-dev 5.8.0-dev.1788866364 → 5.8.0-dev.1788940504

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 (18) hide show
  1. package/core.js +5 -5
  2. package/custom-elements.json +312 -31
  3. package/development/core/base-elements/link-base-element.d.ts +5 -0
  4. package/development/core.js +13 -5
  5. package/development/download/download/download.component.d.ts +12 -10
  6. package/development/download.pure.js +30 -36
  7. package/development/form-field.pure.js +1 -1
  8. package/download/_download.global.scss +6 -0
  9. package/download.pure.js +9 -4
  10. package/form-field/_form-field.global.scss +1 -0
  11. package/form-field.pure.js +1 -1
  12. package/lean-off-brand-theme.css +4 -0
  13. package/lean-safety-theme.css +4 -0
  14. package/lean-theme.css +4 -0
  15. package/off-brand-theme.css +4 -0
  16. package/package.json +2 -2
  17. package/safety-theme.css +4 -0
  18. package/standard-theme.css +4 -0
package/development/download.pure.js CHANGED
@@ -3,10 +3,11 @@ import { html, nothing, unsafeCSS } from "lit";
3
3
  import { property } from "lit/decorators.js";
4
4
  import { SbbSecondaryButtonStaticElement } from "./button.pure.js";
5
5
  import { SbbElement, SbbLanguageController, SbbLinkBaseElement, SbbPropertyWatcherController, defaultDateAdapter, forceType, i18nDownload, i18nNonAccessible, omitEmptyConverter, readConfig, screenReaderOnlyStyles } from "./core.js";
6
+ import { SbbDividerElement } from "./divider.pure.js";
6
7
  import { SbbIconNameMixin } from "./icon.pure.js";
7
8
 
8
9
  //#region src/elements/download/download/download.scss?inline
9
- var download_default = ":host {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n --sbb-card-border-radius: var(--sbb-border-radius-4x);\n --sbb-card-animation-easing: var(--sbb-animation-easing);\n --sbb-card-border-style: solid;\n --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);\n --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n display: block;\n}\n\n:host(:where([color=white])) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n --sbb-card-background-color: var(--sbb-background-color-3);\n --sbb-card-border-color: transparent;\n}\n\n.sbb-download {\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-card-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-1x)\n );\n display: block;\n position: relative;\n padding-inline: var(--sbb-card-padding-inline);\n padding-block: var(--sbb-card-padding-block);\n border-radius: var(--sbb-card-border-radius);\n background-color: var(--sbb-card-background-color);\n box-shadow: none;\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n color: var(--sbb-card-color);\n}\n.sbb-download::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: transparent;\n border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n border-radius: var(--sbb-card-border-radius);\n pointer-events: none;\n}\n@media (forced-colors: active) {\n .sbb-download {\n --sbb-title-color: var(--sbb-card-color);\n }\n}\n.sbb-download {\n display: flex;\n align-items: center;\n gap: var(--sbb-download-gap);\n text-decoration: none;\n translate: 0 var(--sbb-card-hover-shift, 0);\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n.sbb-download:focus-visible {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n@media (any-hover: hover) {\n :host(:hover) .sbb-download {\n --sbb-card-hover-shift: -0.125rem;\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover) .sbb-download {\n --sbb-card-border-color: Highlight;\n }\n}\n\n.sbb-download__icon {\n flex: 0 0 auto;\n}\n\n.sbb-download__content {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.sbb-download__label {\n overflow-wrap: break-word;\n font-weight: bold;\n color: var(--sbb-download-label-color);\n}\n\n.sbb-download__custom-content,\n.sbb-download__info {\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xxs);\n color: var(--sbb-download-info-color);\n}\n\n.sbb-download__button {\n flex: 0 0 auto;\n margin-inline-start: auto;\n}\n";
10
+ var download_default = ":host {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n --sbb-card-border-radius: var(--sbb-border-radius-4x);\n --sbb-card-animation-easing: var(--sbb-animation-easing);\n --sbb-card-border-style: solid;\n --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);\n --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n display: block;\n}\n\n:host(:where([color=white])) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n --sbb-card-background-color: var(--sbb-background-color-3);\n --sbb-card-border-color: transparent;\n}\n\n.sbb-download {\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-card-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-1x)\n );\n display: block;\n position: relative;\n padding-inline: var(--sbb-card-padding-inline);\n padding-block: var(--sbb-card-padding-block);\n border-radius: var(--sbb-card-border-radius);\n background-color: var(--sbb-card-background-color);\n box-shadow: none;\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n color: var(--sbb-card-color);\n}\n.sbb-download::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: transparent;\n border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n border-radius: var(--sbb-card-border-radius);\n pointer-events: none;\n}\n@media (forced-colors: active) {\n .sbb-download {\n --sbb-title-color: var(--sbb-card-color);\n }\n}\n.sbb-download {\n display: flex;\n align-items: center;\n text-decoration: none;\n translate: 0 var(--sbb-card-hover-shift, 0);\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n.sbb-download:focus-visible {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n@media (any-hover: hover) {\n :host(:hover) .sbb-download {\n --sbb-card-hover-shift: -0.125rem;\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover) .sbb-download {\n --sbb-card-border-color: Highlight;\n }\n}\n\n.sbb-download__icon {\n flex: 0 0 auto;\n}\n\n.sbb-download__divider {\n align-self: stretch;\n height: auto;\n margin-block: var(--sbb-download-divider-margin-block);\n margin-inline: var(--sbb-download-gap) var(--sbb-download-content-gap);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-download__divider {\n display: none;\n}\n\n.sbb-download__content {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.sbb-download__label {\n overflow-wrap: break-word;\n font-size: var(--sbb-download-label-font-size);\n line-height: var(--sbb-typo-line-height-heading);\n letter-spacing: var(--sbb-letter-spacing-heading);\n font-weight: bold;\n color: var(--sbb-download-label-color);\n}\n\n.sbb-download__custom-content,\n.sbb-download__info {\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xxs);\n color: var(--sbb-download-info-color);\n}\n\n.sbb-download__button {\n flex: 0 0 auto;\n margin-inline-start: var(--sbb-download-content-gap);\n}\n";
10
11
 
11
12
  //#endregion
12
13
  //#region src/elements/download/download/download.component.ts
@@ -29,8 +30,10 @@ const fileExtensionIcons = /* @__PURE__ */ new Map([
29
30
  /**
30
31
  * It displays a downloadable document, styled as a card.
31
32
  *
32
- * Inherits link properties from `SbbLinkBaseElement`: `href`, `target`, `rel`
33
- * and `accessibilityLabel`. The download behavior is always enabled.
33
+ * Inherits link properties from `SbbLinkBaseElement`: `href`, `target`, `rel`,
34
+ * `download` and `accessibilityLabel`. Without the `download` attribute the
35
+ * referenced document is opened inline in a new browser tab, unless a `target`
36
+ * is explicitly set.
34
37
  *
35
38
  * @slot - Use the unnamed slot to add custom content. Optional.
36
39
  * @slot info - Slot used to render a `sbb-download-info`. A `sbb-download-info`
@@ -40,18 +43,16 @@ const fileExtensionIcons = /* @__PURE__ */ new Map([
40
43
  */
41
44
  let SbbDownloadElement = (() => {
42
45
  let _classSuper = SbbIconNameMixin(SbbLinkBaseElement);
43
- let _instanceExtraInitializers = [];
44
46
  let _color_decorators;
45
47
  let _color_initializers = [];
46
48
  let _color_extraInitializers = [];
47
49
  let _label_decorators;
48
50
  let _label_initializers = [];
49
51
  let _label_extraInitializers = [];
50
- let _set_download_decorators;
51
52
  return class SbbDownloadElement extends _classSuper {
52
53
  constructor() {
53
54
  super(...arguments);
54
- this.#color_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _color_initializers, "white"));
55
+ this.#color_accessor_storage = __runInitializers(this, _color_initializers, "white");
55
56
  this.#label_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _label_initializers, ""));
56
57
  this._languageController = (__runInitializers(this, _label_extraInitializers), new SbbLanguageController(this));
57
58
  }
@@ -59,10 +60,6 @@ let SbbDownloadElement = (() => {
59
60
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
60
61
  _color_decorators = [property({ reflect: true })];
61
62
  _label_decorators = [forceType(), property({ converter: omitEmptyConverter })];
62
- _set_download_decorators = [property({
63
- type: Boolean,
64
- reflect: false
65
- })];
66
63
  __esDecorate(this, null, _color_decorators, {
67
64
  kind: "accessor",
68
65
  name: "color",
@@ -91,19 +88,6 @@ let SbbDownloadElement = (() => {
91
88
  },
92
89
  metadata: _metadata
93
90
  }, _label_initializers, _label_extraInitializers);
94
- __esDecorate(this, null, _set_download_decorators, {
95
- kind: "setter",
96
- name: "download",
97
- static: false,
98
- private: false,
99
- access: {
100
- has: (obj) => "download" in obj,
101
- set: (obj, value) => {
102
- obj.download = value;
103
- }
104
- },
105
- metadata: _metadata
106
- }, null, _instanceExtraInitializers);
107
91
  if (_metadata) Object.defineProperty(this, Symbol.metadata, {
108
92
  enumerable: true,
109
93
  configurable: true,
@@ -115,7 +99,7 @@ let SbbDownloadElement = (() => {
115
99
  this.elementName = "sbb-download";
116
100
  }
117
101
  static {
118
- this.elementDependencies = [SbbSecondaryButtonStaticElement];
102
+ this.elementDependencies = [SbbDividerElement, SbbSecondaryButtonStaticElement];
119
103
  }
120
104
  static {
121
105
  this.styles = [screenReaderOnlyStyles, unsafeCSS(download_default)];
@@ -136,15 +120,6 @@ let SbbDownloadElement = (() => {
136
120
  set label(value) {
137
121
  this.#label_accessor_storage = value;
138
122
  }
139
- /**
140
- * The download behavior is always enabled and handled internally, therefore
141
- * this property cannot be disabled and is not reflected to the host element.
142
- * @default true
143
- */
144
- set download(_value) {}
145
- get download() {
146
- return true;
147
- }
148
123
  /** The file name extracted from the `href` (e.g. `report.pdf`). */
149
124
  get fileName() {
150
125
  return this.href.split(/[?#]/)[0].split("/").filter(Boolean).at(-1) ?? "";
@@ -164,15 +139,29 @@ let SbbDownloadElement = (() => {
164
139
  const extension = this.fileExtension;
165
140
  return extension && fileExtensionIcons.get(extension) || "document-standard-small";
166
141
  }
167
- firstUpdated(_changedProperties) {
168
- super.firstUpdated(_changedProperties);
142
+ /**
143
+ * Documents which are not downloaded are shown inline, in which case they
144
+ * are opened in a new browser tab, unless a target is explicitly set.
145
+ * An explicitly empty `target` attribute also counts as set, which allows
146
+ * to opt out of the new tab behavior.
147
+ */
148
+ resolveTarget() {
149
+ return !!this.target || this.hasAttribute("target") ? this.target : this.download ? "" : "_blank";
150
+ }
151
+ updated(changedProperties) {
152
+ super.updated(changedProperties);
169
153
  this._updateDescribedByElements();
170
154
  }
171
155
  _updateDescribedByElements() {
172
156
  const link = this.shadowRoot?.querySelector?.("a");
173
157
  if (link) {
174
158
  const customContentElement = this.shadowRoot?.querySelector?.(".sbb-download__custom-content");
175
- link.ariaDescribedByElements = [...customContentElement ? [customContentElement] : [], ...this._downloadInfoElements()];
159
+ const newWindowHintElement = this.shadowRoot?.querySelector?.("#sbb-link-new-window");
160
+ link.ariaDescribedByElements = [
161
+ ...customContentElement ? [customContentElement] : [],
162
+ ...this._downloadInfoElements(),
163
+ ...newWindowHintElement ? [newWindowHintElement] : []
164
+ ];
176
165
  }
177
166
  }
178
167
  _downloadInfoElements() {
@@ -181,6 +170,11 @@ let SbbDownloadElement = (() => {
181
170
  renderTemplate() {
182
171
  return html`
183
172
  ${this.renderIconSlot("sbb-download__icon")}
173
+ <sbb-divider
174
+ class="sbb-download__divider"
175
+ orientation="vertical"
176
+ aria-hidden="true"
177
+ ></sbb-divider>
184
178
  <span class="sbb-download__content">
185
179
  <span class="sbb-download__label">${this.label || this.fileName}</span>
186
180
  <span class="sbb-screen-reader-only">
package/development/form-field.pure.js CHANGED
@@ -56,7 +56,7 @@ var SbbErrorElement = class extends SbbNegativeMixin(SbbElement) {
56
56
 
57
57
  //#endregion
58
58
  //#region src/elements/form-field/form-field/form-field.scss?inline
59
- var form_field_default = "@charset \"UTF-8\";\n:host {\n --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n --sbb-form-field-select-inline-padding-end: calc(\n var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n );\n --sbb-form-field-label-size: calc(\n var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-text-line-height: calc(\n var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-margin-block-start: calc(\n (\n var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n --sbb-form-field-text-line-height\n ) +\n var(--_sbb-form-field-label-to-input-overlapping)\n ) /\n 2\n );\n --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\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 display: inline-block;\n color: var(--sbb-form-field-color);\n font-weight: normal;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n min-width: 9.375rem;\n width: min(18.75rem, 100%);\n}\n\n:host([negative]) {\n color: var(--sbb-color-3-negative);\n --sbb-form-field-background-color: var(--sbb-background-color-1-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n --sbb-form-field-text-color: var(--sbb-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-form-field-arrow-color: var(--sbb-color-3-negative);\n}\n@media (forced-colors: active) {\n :host([negative]) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host([size=s]) {\n --sbb-form-field-min-height: var(--sbb-size-element-xs);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);\n --_sbb-form-field-input-margin-block-end: -0.125rem;\n --_sbb-form-field-label-to-input-overlapping: 0.625rem;\n --_sbb-form-field-floating-label-transform: 0.34375rem;\n --_sbb-form-field-spacer-margin-block-end: -0.53125rem;\n}\n@media (min-width: calc(64rem)) {\n :host([size=s]) {\n --_sbb-form-field-label-to-input-overlapping: 0.6875rem;\n --_sbb-form-field-floating-label-transform: 0.3125rem;\n --_sbb-form-field-spacer-margin-block-end: -0.5rem;\n }\n}\n\n:host([size=m]) {\n --sbb-form-field-min-height: var(--sbb-size-element-m);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n:host([size=l]) {\n --sbb-form-field-min-height: var(--sbb-size-element-l);\n --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host(:is([size=m], [size=l])) {\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);\n --_sbb-form-field-input-margin-block-end: 0;\n --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);\n --_sbb-form-field-floating-label-transform: 0.53125rem;\n --_sbb-form-field-spacer-margin-block-end: calc(\n -1 * var(--_sbb-form-field-label-to-input-overlapping)\n );\n}\n@media (min-width: calc(64rem)) {\n :host(:is([size=m], [size=l])) {\n --_sbb-form-field-floating-label-transform: 0.65625rem;\n }\n}\n\n:host([error-space=reserve]) {\n --sbb-form-field-hint-min-height: calc(\n var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n );\n --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-background-color: var(--sbb-background-color-3);\n --sbb-form-field-border-color: var(--sbb-color-graphite);\n --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));\n --sbb-form-field-arrow-color: var(--sbb-color-granite);\n --sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-background-color: var(--sbb-background-color-3-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-arrow-color: var(--sbb-border-color-5);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n --sbb-form-field-border-style: dashed;\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: GrayText !important;\n --sbb-form-field-prefix-color: GrayText !important;\n --sbb-form-field-text-color: GrayText !important;\n --sbb-form-field-border-color: GrayText !important;\n }\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-text-color: var(--sbb-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly])):not([negative])) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n --sbb-form-field-border-color: var(--sbb-border-color-3);\n --sbb-form-field-prefix-color: var(--sbb-color-3);\n --sbb-form-field-border-width: var(--sbb-border-width-2x);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n --sbb-form-field-border-color: var(--sbb-border-color-3-negative);\n --sbb-form-field-prefix-color: var(--sbb-color-3-negative);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(focus),[state--focus])) {\n --sbb-form-field-border-color: Highlight;\n --sbb-form-field-prefix-color: Highlight;\n }\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n :host([floating-label]) {\n --sbb-select-placeholder-color: Canvas;\n }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n --sbb-form-field-label-size: 0rem;\n --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n content: \"​\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-form-field__wrapper {\n display: flex;\n flex: 1;\n gap: var(--sbb-form-field-gap);\n padding-inline: var(--sbb-form-field-padding-inline);\n border-radius: var(--sbb-form-field-border-radius);\n min-height: var(--sbb-form-field-min-height);\n max-height: var(--sbb-form-field-max-height);\n background-color: var(--sbb-form-field-background-color);\n position: relative;\n}\n.sbb-form-field__wrapper::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0;\n border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n border-radius: var(--sbb-form-field-border-radius);\n pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n border-color: transparent;\n }\n .sbb-form-field__wrapper::after {\n position: absolute;\n border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n inset-block-end: 0;\n z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n }\n :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n content: \"\";\n }\n}\n\n::slotted(*[slot=prefix]) {\n color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n display: flex;\n min-width: var(--sbb-icon-svg-width);\n margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n ::slotted(*[slot=suffix]) {\n color: var(--sbb-form-field-prefix-color);\n }\n}\n.sbb-form-field__select-input-icon {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n display: none;\n position: absolute;\n inset-inline-end: 0;\n margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n pointer-events: none;\n color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n display: inline-block;\n}\n\n.sbb-form-field__input-container {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n position: relative;\n margin-block-start: var(--sbb-form-field-margin-block-start);\n min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n display: flex;\n height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n margin-block-end: var(--_sbb-form-field-spacer-margin-block-end);\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.sbb-form-field__label {\n display: flex;\n max-width: 100%;\n cursor: var(--sbb-cursor-default);\n position: absolute;\n inset-block-start: 0;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-label-text-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n:host(:where(:is(:state(input-element-select),[state--input-element-select]), :is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label {\n padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n transform-origin: 0 0;\n pointer-events: none;\n backface-visibility: hidden;\n will-change: transform, font-size;\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n transition-timing-function: var(--sbb-animation-easing);\n transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n font-size: var(--sbb-form-field-input-text-size);\n transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n z-index: 1;\n }\n}\n\n.sbb-form-field__label-ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n display: flex;\n flex: 1;\n align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n display: flex;\n min-height: var(--sbb-form-field-hint-min-height);\n flex-direction: column;\n margin-inline-start: var(--sbb-form-field-padding-inline);\n margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
59
+ var form_field_default = "@charset \"UTF-8\";\n:host {\n --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n --sbb-form-field-select-inline-padding-end: calc(\n var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n );\n --sbb-form-field-label-size: calc(\n var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-text-line-height: calc(\n var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-margin-block-start: calc(\n (\n var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n --sbb-form-field-text-line-height\n ) +\n var(--_sbb-form-field-label-to-input-overlapping)\n ) /\n 2\n );\n --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\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 display: inline-block;\n color: var(--sbb-form-field-color);\n font-weight: normal;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n min-width: 9.375rem;\n width: min(18.75rem, 100%);\n}\n\n:host([negative]) {\n color: var(--sbb-color-3-negative);\n --sbb-form-field-background-color: var(--sbb-background-color-1-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n --sbb-form-field-text-color: var(--sbb-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-form-field-arrow-color: var(--sbb-color-3-negative);\n}\n@media (forced-colors: active) {\n :host([negative]) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host([size=s]) {\n --sbb-form-field-min-height: var(--sbb-size-element-xs);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);\n --_sbb-form-field-input-margin-block-end: -0.125rem;\n --_sbb-form-field-label-to-input-overlapping: 0.625rem;\n --_sbb-form-field-floating-label-transform: 0.34375rem;\n --_sbb-form-field-spacer-margin-block-end: -0.53125rem;\n}\n@media (min-width: calc(64rem)) {\n :host([size=s]) {\n --_sbb-form-field-label-to-input-overlapping: 0.6875rem;\n --_sbb-form-field-floating-label-transform: 0.3125rem;\n --_sbb-form-field-spacer-margin-block-end: -0.5rem;\n }\n}\n\n:host([size=s]:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) {\n --_sbb-form-field-spacer-margin-block-end-textarea: var(--sbb-form-field-textarea-s-spacer);\n}\n\n:host([size=m]) {\n --sbb-form-field-min-height: var(--sbb-size-element-m);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n:host([size=l]) {\n --sbb-form-field-min-height: var(--sbb-size-element-l);\n --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host(:is([size=m], [size=l])) {\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);\n --_sbb-form-field-input-margin-block-end: 0;\n --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);\n --_sbb-form-field-floating-label-transform: 0.53125rem;\n --_sbb-form-field-spacer-margin-block-end: calc(\n -1 * var(--_sbb-form-field-label-to-input-overlapping)\n );\n}\n@media (min-width: calc(64rem)) {\n :host(:is([size=m], [size=l])) {\n --_sbb-form-field-floating-label-transform: 0.65625rem;\n }\n}\n\n:host([error-space=reserve]) {\n --sbb-form-field-hint-min-height: calc(\n var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n );\n --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-background-color: var(--sbb-background-color-3);\n --sbb-form-field-border-color: var(--sbb-color-graphite);\n --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));\n --sbb-form-field-arrow-color: var(--sbb-color-granite);\n --sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-background-color: var(--sbb-background-color-3-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-arrow-color: var(--sbb-border-color-5);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n --sbb-form-field-border-style: dashed;\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: GrayText !important;\n --sbb-form-field-prefix-color: GrayText !important;\n --sbb-form-field-text-color: GrayText !important;\n --sbb-form-field-border-color: GrayText !important;\n }\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-text-color: var(--sbb-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly])):not([negative])) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n --sbb-form-field-border-color: var(--sbb-border-color-3);\n --sbb-form-field-prefix-color: var(--sbb-color-3);\n --sbb-form-field-border-width: var(--sbb-border-width-2x);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n --sbb-form-field-border-color: var(--sbb-border-color-3-negative);\n --sbb-form-field-prefix-color: var(--sbb-color-3-negative);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(focus),[state--focus])) {\n --sbb-form-field-border-color: Highlight;\n --sbb-form-field-prefix-color: Highlight;\n }\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n :host([floating-label]) {\n --sbb-select-placeholder-color: Canvas;\n }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n --sbb-form-field-label-size: 0rem;\n --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n content: \"​\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-form-field__wrapper {\n display: flex;\n flex: 1;\n gap: var(--sbb-form-field-gap);\n padding-inline: var(--sbb-form-field-padding-inline);\n border-radius: var(--sbb-form-field-border-radius);\n min-height: var(--sbb-form-field-min-height);\n max-height: var(--sbb-form-field-max-height);\n background-color: var(--sbb-form-field-background-color);\n position: relative;\n}\n.sbb-form-field__wrapper::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0;\n border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n border-radius: var(--sbb-form-field-border-radius);\n pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n border-color: transparent;\n }\n .sbb-form-field__wrapper::after {\n position: absolute;\n border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n inset-block-end: 0;\n z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n }\n :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n content: \"\";\n }\n}\n\n::slotted(*[slot=prefix]) {\n color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n display: flex;\n min-width: var(--sbb-icon-svg-width);\n margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n ::slotted(*[slot=suffix]) {\n color: var(--sbb-form-field-prefix-color);\n }\n}\n.sbb-form-field__select-input-icon {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n display: none;\n position: absolute;\n inset-inline-end: 0;\n margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n pointer-events: none;\n color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n display: inline-block;\n}\n\n.sbb-form-field__input-container {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n position: relative;\n margin-block-start: var(--sbb-form-field-margin-block-start);\n min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n display: flex;\n height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n margin-block-end: calc(var(--_sbb-form-field-spacer-margin-block-end) + var(--_sbb-form-field-spacer-margin-block-end-textarea, 0px));\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.sbb-form-field__label {\n display: flex;\n max-width: 100%;\n cursor: var(--sbb-cursor-default);\n position: absolute;\n inset-block-start: 0;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-label-text-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n:host(:where(:is(:state(input-element-select),[state--input-element-select]), :is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label {\n padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n transform-origin: 0 0;\n pointer-events: none;\n backface-visibility: hidden;\n will-change: transform, font-size;\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n transition-timing-function: var(--sbb-animation-easing);\n transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n font-size: var(--sbb-form-field-input-text-size);\n transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n z-index: 1;\n }\n}\n\n.sbb-form-field__label-ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n display: flex;\n flex: 1;\n align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n display: flex;\n min-height: var(--sbb-form-field-hint-min-height);\n flex-direction: column;\n margin-inline-start: var(--sbb-form-field-padding-inline);\n margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
60
60
 
61
61
  //#endregion
62
62
  //#region src/elements/form-field/form-field/form-field.component.ts
package/download/_download.global.scss CHANGED
@@ -1,7 +1,13 @@
1
1
  $theme: 'standard' !default;
2
2
 
3
3
  @mixin base {
4
+ // Gap between the icon and the divider.
4
5
  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
6
+
7
+ // Gap between the divider and the content, and the content and the button.
8
+ --sbb-download-content-gap: var(--sbb-spacing-fixed-4x);
9
+ --sbb-download-divider-margin-block: var(--sbb-divider-border-width);
10
+ --sbb-download-label-font-size: var(--sbb-heading-font-size-5);
5
11
  --sbb-download-label-color: var(--sbb-color-3);
6
12
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
7
13
  }
package/download.pure.js CHANGED
@@ -1,6 +1,11 @@
1
- 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-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}
2
- `;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`
1
+ 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{SbbDividerElement as v}from"./divider.pure.js";import{SbbIconNameMixin as y}from"./icon.pure.js";var b=`: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{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);align-items:center;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__divider{height:auto;margin-block:var(--sbb-download-divider-margin-block);margin-inline:var(--sbb-download-gap) var(--sbb-download-content-gap);align-self:stretch}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-download__divider{display:none}.sbb-download__content{flex-direction:column;flex:auto;min-width:0;display:flex}.sbb-download__label{overflow-wrap:break-word;font-size:var(--sbb-download-label-font-size);line-height:var(--sbb-typo-line-height-heading);letter-spacing:var(--sbb-letter-spacing-heading);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-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:var(--sbb-download-content-gap)}
2
+ `;const x=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 S=(()=>{let s=y(l),u,d=[],m=[],g,S=[],C=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,d,`white`),this.#t=(t(this,m),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;u=[a({reflect:!0})],g=[f(),a({converter:h})],e(this,null,u,{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},d,m),e(this,null,g,{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),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-download`}static{this.elementDependencies=[v,o]}static{this.styles=[_,i(b)]}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get label(){return this.#t}set label(e){this.#t=e}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&&x.get(e)||`document-standard-small`}resolveTarget(){return this.target||this.hasAttribute(`target`)?this.target:this.download?``:`_blank`}updated(e){super.updated(e),this._updateDescribedByElements()}_updateDescribedByElements(){let e=this.shadowRoot?.querySelector?.(`a`);if(e){let t=this.shadowRoot?.querySelector?.(`.sbb-download__custom-content`),n=this.shadowRoot?.querySelector?.(`#sbb-link-new-window`);e.ariaDescribedByElements=[...t?[t]:[],...this._downloadInfoElements(),...n?[n]:[]]}}_downloadInfoElements(){return this.querySelectorAll?.(`sbb-download-info`)??[]}renderTemplate(){return n`
3
3
  ${this.renderIconSlot(`sbb-download__icon`)}
4
+ <sbb-divider
5
+ class="sbb-download__divider"
6
+ orientation="vertical"
7
+ aria-hidden="true"
8
+ ></sbb-divider>
4
9
  <span class="sbb-download__content">
5
10
  <span class="sbb-download__label">${this.label||this.fileName}</span>
6
11
  <span class="sbb-screen-reader-only">
@@ -17,5 +22,5 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
17
22
  class="sbb-download__button"
18
23
  icon-name="download-small"
19
24
  ></sbb-secondary-button-static>
20
- `}}})();var S=`:host{display:block}
21
- `;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};
25
+ `}}})();var C=`:host{display:block}
26
+ `;const w=[`B`,`KB`,`MB`,`GB`,`TB`];let T=(()=>{let r=s,o,l=[],p=[],_,v=[],y=[],b,x=[],S=[],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,S),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(C)]}#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,S),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 ${w[0]}`;let n=Math.min(Math.floor(Math.log(t)/Math.log(1024)),w.length-1);return`${(t/1024**n).toFixed(0)} ${w[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{S as SbbDownloadElement,T as SbbDownloadInfoElement};
package/form-field/_form-field.global.scss CHANGED
@@ -18,6 +18,7 @@ $theme: 'standard' !default;
18
18
  --sbb-form-field-arrow-color: var(--sbb-color-3);
19
19
  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
20
20
  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
21
+ --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
21
22
  --sbb-form-field-min-height: #{sbb.theme-pattern-select(
22
23
  (
23
24
  'standard': var(--sbb-size-element-m),
package/form-field.pure.js CHANGED
@@ -20,7 +20,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
20
20
  <span class="error-content">
21
21
  <slot></slot>
22
22
  </span>
23
- `}},S=`:host{--sbb-form-field-hint-divider-width:var(--sbb-spacing-fixed-1x);--sbb-form-field-hint-padding-block-start:var(--sbb-form-field-hint-divider-width);--sbb-form-field-select-inline-padding-end:calc(var(--sbb-icon-svg-width) + var(--sbb-form-field-gap));--sbb-form-field-label-size:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-text-line-height:calc(var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-margin-block-start:calc(( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(--sbb-form-field-text-line-height) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2);--sbb-icon-svg-width:var(--sbb-form-field-icon-size);--sbb-icon-svg-height:var(--sbb-form-field-icon-size);--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));color:var(--sbb-form-field-color);font-weight:400;line-height:var(--sbb-typo-line-height-text);display:inline-block}:host(:where(:not([width=collapse]))){width:min(18.75rem,100%);min-width:9.375rem}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color:var(--sbb-background-color-1-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5);--sbb-form-field-text-color:var(--sbb-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host([negative]){--sbb-form-field-border-color:ButtonBorder}}:host([size=s]){--sbb-form-field-min-height:var(--sbb-size-element-xs);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size:var(--sbb-text-font-size-s);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xxs);--_sbb-form-field-input-margin-block-end:-.125rem;--_sbb-form-field-label-to-input-overlapping:.625rem;--_sbb-form-field-floating-label-transform:.34375rem;--_sbb-form-field-spacer-margin-block-end:-.53125rem}@media (width>=64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping:.6875rem;--_sbb-form-field-floating-label-transform:.3125rem;--_sbb-form-field-spacer-margin-block-end:-.5rem}}:host([size=m]){--sbb-form-field-min-height:var(--sbb-size-element-m);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-3x)}:host([size=l]){--sbb-form-field-min-height:var(--sbb-size-element-l);--sbb-form-field-padding-inline:var(--sbb-spacing-responsive-xxxs)}:host(:is([size=m],[size=l])){--sbb-form-field-input-text-size:var(--sbb-text-font-size-m);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xs);--_sbb-form-field-input-margin-block-end:0;--_sbb-form-field-label-to-input-overlapping:var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform:.53125rem;--_sbb-form-field-spacer-margin-block-end:calc(-1 * var(--_sbb-form-field-label-to-input-overlapping))}@media (width>=64rem){:host(:is([size=m],[size=l])){--_sbb-form-field-floating-label-transform:.65625rem}}:host([error-space=reserve]){--sbb-form-field-hint-min-height:calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));--sbb-form-field-hint-padding-block-start-override:var(--sbb-form-field-hint-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color:var(--sbb-background-color-3);--sbb-form-field-border-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-form-field-arrow-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color:ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color:var(--sbb-background-color-3-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-arrow-color:var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm));--sbb-form-field-border-style:dashed}@media (forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:GrayText!important;--sbb-form-field-prefix-color:GrayText!important;--sbb-form-field-text-color:GrayText!important;--sbb-form-field-border-color:GrayText!important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color:var(--sbb-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color:var(--sbb-border-color-3);--sbb-form-field-prefix-color:var(--sbb-color-3);--sbb-form-field-border-width:var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color:var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color:Highlight;--sbb-form-field-prefix-color:Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error]),:is(:state(has-hint),[state--has-hint])))){--sbb-form-field-hint-padding-block-start:0}:host([floating-label]){--sbb-select-placeholder-color:transparent}@media (forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color:Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size:0rem;--_sbb-form-field-label-to-input-overlapping:0rem}:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))){--sbb-form-field-overflow:visible}.sbb-form-field__space-wrapper{flex-direction:column;height:100%;display:flex}.sbb-form-field__space-wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-form-field__wrapper{gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);flex:1;display:flex;position:relative}.sbb-form-field__wrapper:before{content:"";border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none;display:block;position:absolute;inset:0}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset,var(--sbb-focus-outline-offset))}@media (forced-colors:none){:host(:is([borderless],:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:#0000}.sbb-form-field__wrapper:after{border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-border-block-end-inset-inline,var(--sbb-form-field-padding-inline));z-index:var(--sbb-form-field-focus-underline-z-index,initial);position:absolute;inset-block-end:0}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:""}}::slotted([slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted([slot=prefix]),::slotted([slot=suffix]){min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);display:flex}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear),:host(:is(:state(has-error),[state--has-error])) slot[name=hint],:host(:where(:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors:active){::slotted([slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;pointer-events:none;color:var(--sbb-form-field-arrow-color);margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);display:none;position:absolute;inset-inline-end:0;translate:0 -50%}:host(:is(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon{display:inline-block}.sbb-form-field__input-container{flex-direction:column;flex:auto;min-width:0;margin-block-start:var(--sbb-form-field-margin-block-start);display:flex;position:relative}.sbb-form-field__label-spacer{height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--_sbb-form-field-spacer-margin-block-end);display:flex}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sbb-form-field__label{max-width:100%;cursor:var(--sbb-cursor-default);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-letter-spacing-text);display:flex;position:absolute;inset-block-start:0}:host(:where(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform, font-size;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media (forced-colors:active){:host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-form-field__input{flex:1;align-items:start;display:flex}:host(:is(:is(:state(input-element-input),[state--input-element-input]),:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input{margin-block-end:var(--_sbb-form-field-input-margin-block-end)}.sbb-form-field__hint{min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-hint-padding-block-start-override,var(--sbb-form-field-hint-padding-block-start));margin-inline-start:var(--sbb-form-field-padding-inline);display:flex}
23
+ `}},S=`:host{--sbb-form-field-hint-divider-width:var(--sbb-spacing-fixed-1x);--sbb-form-field-hint-padding-block-start:var(--sbb-form-field-hint-divider-width);--sbb-form-field-select-inline-padding-end:calc(var(--sbb-icon-svg-width) + var(--sbb-form-field-gap));--sbb-form-field-label-size:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-text-line-height:calc(var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-margin-block-start:calc(( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(--sbb-form-field-text-line-height) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2);--sbb-icon-svg-width:var(--sbb-form-field-icon-size);--sbb-icon-svg-height:var(--sbb-form-field-icon-size);--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));color:var(--sbb-form-field-color);font-weight:400;line-height:var(--sbb-typo-line-height-text);display:inline-block}:host(:where(:not([width=collapse]))){width:min(18.75rem,100%);min-width:9.375rem}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color:var(--sbb-background-color-1-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5);--sbb-form-field-text-color:var(--sbb-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host([negative]){--sbb-form-field-border-color:ButtonBorder}}:host([size=s]){--sbb-form-field-min-height:var(--sbb-size-element-xs);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size:var(--sbb-text-font-size-s);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xxs);--_sbb-form-field-input-margin-block-end:-.125rem;--_sbb-form-field-label-to-input-overlapping:.625rem;--_sbb-form-field-floating-label-transform:.34375rem;--_sbb-form-field-spacer-margin-block-end:-.53125rem}@media (width>=64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping:.6875rem;--_sbb-form-field-floating-label-transform:.3125rem;--_sbb-form-field-spacer-margin-block-end:-.5rem}}:host([size=s]:where(:is(:state(input-element-textarea),[state--input-element-textarea]))){--_sbb-form-field-spacer-margin-block-end-textarea:var(--sbb-form-field-textarea-s-spacer)}:host([size=m]){--sbb-form-field-min-height:var(--sbb-size-element-m);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-3x)}:host([size=l]){--sbb-form-field-min-height:var(--sbb-size-element-l);--sbb-form-field-padding-inline:var(--sbb-spacing-responsive-xxxs)}:host(:is([size=m],[size=l])){--sbb-form-field-input-text-size:var(--sbb-text-font-size-m);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xs);--_sbb-form-field-input-margin-block-end:0;--_sbb-form-field-label-to-input-overlapping:var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform:.53125rem;--_sbb-form-field-spacer-margin-block-end:calc(-1 * var(--_sbb-form-field-label-to-input-overlapping))}@media (width>=64rem){:host(:is([size=m],[size=l])){--_sbb-form-field-floating-label-transform:.65625rem}}:host([error-space=reserve]){--sbb-form-field-hint-min-height:calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));--sbb-form-field-hint-padding-block-start-override:var(--sbb-form-field-hint-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color:var(--sbb-background-color-3);--sbb-form-field-border-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-form-field-arrow-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color:ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color:var(--sbb-background-color-3-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-arrow-color:var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm));--sbb-form-field-border-style:dashed}@media (forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:GrayText!important;--sbb-form-field-prefix-color:GrayText!important;--sbb-form-field-text-color:GrayText!important;--sbb-form-field-border-color:GrayText!important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color:var(--sbb-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color:var(--sbb-border-color-3);--sbb-form-field-prefix-color:var(--sbb-color-3);--sbb-form-field-border-width:var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color:var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color:Highlight;--sbb-form-field-prefix-color:Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error]),:is(:state(has-hint),[state--has-hint])))){--sbb-form-field-hint-padding-block-start:0}:host([floating-label]){--sbb-select-placeholder-color:transparent}@media (forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color:Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size:0rem;--_sbb-form-field-label-to-input-overlapping:0rem}:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))){--sbb-form-field-overflow:visible}.sbb-form-field__space-wrapper{flex-direction:column;height:100%;display:flex}.sbb-form-field__space-wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-form-field__wrapper{gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);flex:1;display:flex;position:relative}.sbb-form-field__wrapper:before{content:"";border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none;display:block;position:absolute;inset:0}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset,var(--sbb-focus-outline-offset))}@media (forced-colors:none){:host(:is([borderless],:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:#0000}.sbb-form-field__wrapper:after{border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-border-block-end-inset-inline,var(--sbb-form-field-padding-inline));z-index:var(--sbb-form-field-focus-underline-z-index,initial);position:absolute;inset-block-end:0}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:""}}::slotted([slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted([slot=prefix]),::slotted([slot=suffix]){min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);display:flex}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear),:host(:is(:state(has-error),[state--has-error])) slot[name=hint],:host(:where(:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors:active){::slotted([slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;pointer-events:none;color:var(--sbb-form-field-arrow-color);margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);display:none;position:absolute;inset-inline-end:0;translate:0 -50%}:host(:is(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon{display:inline-block}.sbb-form-field__input-container{flex-direction:column;flex:auto;min-width:0;margin-block-start:var(--sbb-form-field-margin-block-start);display:flex;position:relative}.sbb-form-field__label-spacer{height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:calc(var(--_sbb-form-field-spacer-margin-block-end) + var(--_sbb-form-field-spacer-margin-block-end-textarea,0px));display:flex}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sbb-form-field__label{max-width:100%;cursor:var(--sbb-cursor-default);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-letter-spacing-text);display:flex;position:absolute;inset-block-start:0}:host(:where(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform, font-size;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media (forced-colors:active){:host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-form-field__input{flex:1;align-items:start;display:flex}:host(:is(:is(:state(input-element-input),[state--input-element-input]),:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input{margin-block-end:var(--_sbb-form-field-input-margin-block-end)}.sbb-form-field__hint{min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-hint-padding-block-start-override,var(--sbb-form-field-hint-padding-block-start));margin-inline-start:var(--sbb-form-field-padding-inline);display:flex}
24
24
  `;let C=0;const w=new WeakMap,T=[`input`,`textarea`,`select`];var E=class extends Event{get control(){return this._control}constructor(e){super(`formfieldcontrol`),this._control=e}};let D=(()=>{let r=o(i),a,l=[],u=[],p,y=[],b=[],x,E=[],D=[],O,k=[],A=[],j,M=[],N=[],P,F=[],I=[],L,R=[],z=[],B,V=[],H=[],U,W=[],G=[],K,q=[],J=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[g({attribute:`error-space`,reflect:!0})],p=[g({reflect:!0})],x=[c(),g({reflect:!0,type:Boolean})],O=[g({reflect:!0})],j=[c(),g({attribute:`hidden-label`,reflect:!0,type:Boolean})],P=[c(),g({attribute:`floating-label`,reflect:!0,type:Boolean})],L=[_()],B=[_()],U=[_()],K=[_()],m(this,null,a,{kind:`accessor`,name:`errorSpace`,static:!1,private:!1,access:{has:e=>`errorSpace`in e,get:e=>e.errorSpace,set:(e,t)=>{e.errorSpace=t}},metadata:e},l,u),m(this,null,p,{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:e},y,b),m(this,null,x,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},E,D),m(this,null,O,{kind:`accessor`,name:`width`,static:!1,private:!1,access:{has:e=>`width`in e,get:e=>e.width,set:(e,t)=>{e.width=t}},metadata:e},k,A),m(this,null,j,{kind:`accessor`,name:`hiddenLabel`,static:!1,private:!1,access:{has:e=>`hiddenLabel`in e,get:e=>e.hiddenLabel,set:(e,t)=>{e.hiddenLabel=t}},metadata:e},M,N),m(this,null,P,{kind:`accessor`,name:`floatingLabel`,static:!1,private:!1,access:{has:e=>`floatingLabel`in e,get:e=>e.floatingLabel,set:(e,t)=>{e.floatingLabel=t}},metadata:e},F,I),m(this,null,L,{kind:`accessor`,name:`_errorElements`,static:!1,private:!1,access:{has:e=>`_errorElements`in e,get:e=>e._errorElements,set:(e,t)=>{e._errorElements=t}},metadata:e},R,z),m(this,null,B,{kind:`accessor`,name:`_hintElements`,static:!1,private:!1,access:{has:e=>`_hintElements`in e,get:e=>e._hintElements,set:(e,t)=>{e._hintElements=t}},metadata:e},V,H),m(this,null,U,{kind:`accessor`,name:`_input`,static:!1,private:!1,access:{has:e=>`_input`in e,get:e=>e._input,set:(e,t)=>{e._input=t}},metadata:e},W,G),m(this,null,K,{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:e},q,J),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-form-field`}static{this.elementDependencies=[v]}static{this.styles=[n(S)]}#e;get errorSpace(){return this.#e}set errorSpace(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get width(){return this.#r}set width(e){this.#r=e}#i;get hiddenLabel(){return this.#i}set hiddenLabel(e){this.#i=e}#a;get floatingLabel(){return this.#a}set floatingLabel(e){this.#a=e}#o;get _errorElements(){return this.#o}set _errorElements(e){this.#o=e}#s;get _hintElements(){return this.#s}set _hintElements(e){this.#s=e}#c;get _input(){return this.#c}set _input(e){this.#c=e}#l;get _label(){return this.#l}set _label(e){this.#l=e}get inputElement(){return this._input}get label(){return this._label}constructor(){super(),this._excludedFocusElements=[`button`,`sbb-popover`,`sbb-option`,`sbb-chip`],this._floatingLabelSupportedInputElements=[`input`,`select`,`textarea`,`sbb-select`],this._floatingLabelSupportedInputTypes=[`email`,`number`,`password`,`search`,`tel`,`text`,`url`],this.#e=h(this,l,`none`),this.#t=(h(this,u),h(this,y,null)),this.#n=(h(this,b),h(this,E,!1)),this.#r=(h(this,D),h(this,k,`default`)),this.#i=(h(this,A),h(this,M,!1)),this.#a=(h(this,N),h(this,F,!1)),this.#o=(h(this,I),h(this,R,[])),this.#s=(h(this,z),h(this,V,[])),this.#c=(h(this,H),h(this,W,null)),this.#l=(h(this,G),h(this,q,void 0)),this._formFieldAttributeObserver=(h(this,J),t?null:new MutationObserver(e=>{e.some(e=>e.type===`attributes`)&&this._input&&(this._readInputState(),this._registerInputFormListener(),this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinputattributechange`)))})),this._inputFormAbortController=new AbortController,this._control=null,this._previousType=null,this.addEventListener?.(`focusin`,e=>{(e.target===this.inputElement||e.target===this.inputElement?.inputElement)&&(this.internals.states.add(`focus`),this.internals.states.add(`focus-origin-${f.mostRecentModality}`))},{passive:!0}),this.addEventListener?.(`focusout`,e=>{if(e.target===this.inputElement||e.target===this.inputElement?.inputElement){this._checkAndUpdateInputEmpty(),this.internals.states.delete(`focus`);for(let e of this.internals.states)e.startsWith(`focus-origin-`)&&this.internals.states.delete(e)}},{passive:!0}),this.addEventListener(`input`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`displayvaluechange`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`invalid`,e=>e.preventDefault(),{capture:!0}),this.addEventListener(`formfieldcontrol`,e=>{this._control=e.control,this._connectInputElement()===`unchanged`&&(this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty())})}connectedCallback(){super.connectedCallback(),this._assignSlots(),this._connectInputElement(),this._syncNegative(),this._syncSize()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`size`)&&this._syncSize()}disconnectedCallback(){super.disconnectedCallback(),this._formFieldAttributeObserver?.disconnect(),this._inputFormAbortController.abort(),(this._input?.localName===`input`||this._input?.localName===`textarea`)&&this._unpatchInputValue()}_handleWrapperClick(e){this._isElementFocusExcluded(e)||(this._control?.onContainerClick?this._control?.onContainerClick(e):e.target.localName!==`label`&&(this._input?.localName===`sbb-select`&&e.target.localName!==`sbb-select`&&this._input.click(),this._input?.focus()))}_isElementFocusExcluded(e){return e.composedPath().some(e=>e instanceof window.HTMLElement&&(e.getAttribute(`tabindex`)===`0`||e.hasAttribute(`contenteditable`))||this._excludedFocusElements.includes(e.localName))}_onSlotLabelChange(){let e=Array.from(this.querySelectorAll(`label`));this._label=e[0],this._syncLabelInputReferences()}_onSlotInputChange(){this._assignSlots(),this._connectInputElement()}_assignSlots(){this.querySelectorAll(`label:not([slot])`).forEach(e=>e.setAttribute(`slot`,`label`)),this.querySelectorAll(`sbb-error:not([slot])`).forEach(e=>e.setAttribute(`slot`,`error`))}_connectInputElement(){let e;if(this._control?.element)e=this._control.element;else if(this._control?.id)e=this.getRootNode().getElementById(this._control.id);else{let t=Array.from(this.querySelectorAll(`*:not([slot],sbb-chip-group)`));e=(t.find(e=>this._isInputElement(e))||t[0])??null}return e===this._input?`unchanged`:(this._input&&(this.internals.states.delete(`input-element-${this._input.localName}`),(this._input.localName===`input`||this._input.localName===`textarea`)&&this._unpatchInputValue()),e?(this._input=e,this._registerInputFormListener(),this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty(),this._input.localName===`textarea`?(this._input.setAttribute(`rows`,this._input.getAttribute(`rows`)||`3`),this._patchInputValue()):this._input.localName===`input`?this._patchInputValue():(this._input.localName===`select`||this._input.localName===`sbb-select`)&&!this.hasUpdated&&this.hydrationComplete.then(()=>this.requestUpdate()),this._formFieldAttributeObserver?.disconnect(),this._formFieldAttributeObserver?.observe(this._input,{attributes:!0,attributeFilter:[`readonly`,`disabled`,`form`,`class`,`data-expanded`,`maxlength`]}),this.internals.states.add(`input-element-${this._input.localName}`),this._syncLabelInputReferences(),`changed`):(this._input=null,`no-input`))}_syncLabelInputReferences(){if(this._input&&this._label){if(T.includes(this._input.localName)||customElements.get(this._input.localName)?.formAssociated)this._input.id||=`sbb-form-field-input-${C++}`,this._label.htmlFor=this._input.id;else{this._label.id||=`sbb-form-field-label-${C++}`;let e=this._input.getAttribute(`aria-labelledby`)?.split(` `).filter(e=>!!e&&e!==this._label.id)??[];this._input.setAttribute(`aria-labelledby`,[...e,this._label.id].join(` `))}}}_isInputElement(e){return T.includes(e.localName)||!!customElements.get(e.localName)?.formAssociated}_readInputState(){this.toggleState(`readonly`,this._control?.readOnly??this._input.hasAttribute(`readonly`)),this.toggleState(`disabled`,this._control?.disabled??this._input.hasAttribute(`disabled`)),this.toggleState(`has-popup-open`,this._input.hasAttribute(`data-expanded`)),this.toggleState(`interacted`,!!this._control?.interacted),this.toggleState(`invalid`,!!this._control?.invalid),this._previousType&&this.internals.states.delete(`input-type-${this._previousType}`),this._previousType=this._control?.type??this._input.type??`text`,this.internals.states.add(`input-type-${this._previousType}`)}_registerInputFormListener(){this._inputFormAbortController.abort();let{signal:e}=this._inputFormAbortController=new AbortController;(this._input?.form??this._input?.closest(`form`))?.addEventListener(`reset`,()=>setTimeout(()=>this.reset()),{signal:e})}_patchInputValue(){let e=this._input;if(!e||w.has(e))return;let t=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),`value`);if(!t||!t.set||!t.get)return;w.set(e,t);let{get:n,set:r}=t,i=()=>{this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinput`))};Object.defineProperty(e,"value",{...t,get(){return n.call(this)},set(e){r.call(this,e),i()}})}_unpatchInputValue(){let e=this._input,t=w.get(e);t&&(Object.defineProperty(e,"value",t),w.delete(e))}_checkAndUpdateInputEmpty(){this.toggleState(`empty`,this._control?.empty??(((this._floatingLabelSupportedInputElements.includes(this._input?.localName)||this._input?.constructor?.formFieldAssociated)??!1)&&this._isInputEmpty()))}_isInputEmpty(){let e=this.querySelector(`sbb-chip-group`);return e?this._isInputValueEmpty()&&(Array.isArray(e.value)?e.value.length===0:!e.querySelector(`sbb-chip`)):this._input instanceof HTMLInputElement?this._floatingLabelSupportedInputTypes.includes(this._input.type)&&this._isInputValueEmpty():this._input instanceof HTMLSelectElement?this._input.selectedOptions?.item(0)?.label?.trim()===``:this._input?.localName===`sbb-select`?this._input.getDisplayValue?.()?.trim()===``:this._isInputValueEmpty()}_isInputValueEmpty(){let e=this._input.value;return[``,void 0,null].includes(e)||Array.isArray(e)&&e.length===0}_onSlotErrorChange(e){let t=e.target.assignedElements();this._input&&this._input.ariaDescribedByElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._errorElements??[],...this._hintElements??[])),this._errorElements=t;for(let e of this._errorElements)e.role||=`status`;this._assignAriaDescribedByElements(),this.toggleState(`has-error`,!!this._errorElements.length),this._syncNegative()}_onSlotHintChange(e){let t=e.target.assignedElements();this._input?.ariaDescribedByElements?.length&&this._hintElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._hintElements)),this._hintElements=t,this._assignAriaDescribedByElements(),this.toggleState(`has-hint`,!!this._hintElements.length),this._syncNegative()}_assignAriaDescribedByElements(){if(this._input){let e=this._errorElements.length?this._errorElements:this._hintElements;this._input.ariaDescribedByElements=s(this._input.ariaDescribedByElements,...e)}}reset(){this._checkAndUpdateInputEmpty()}clear(){this._input?.localName===`input`&&(this._input.value=``,this._checkAndUpdateInputEmpty())}_syncNegative(){this.querySelectorAll?.(`sbb-error,sbb-mini-button,sbb-mini-button-link,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group,sbb-hint,sbb-form-field-text-counter`).forEach(e=>e.toggleAttribute(`negative`,this.negative))}_syncSize(){this.querySelectorAll?.(`sbb-autocomplete,sbb-autocomplete-grid,sbb-select`).forEach(e=>e.size=this.size===`l`?`m`:this.size)}render(){return e`
25
25
  <div class="sbb-form-field__space-wrapper">
26
26
  ${``}
package/lean-off-brand-theme.css CHANGED
@@ -1302,6 +1302,9 @@ summary {
1302
1302
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1303
1303
  --sbb-divider-border-width: var(--sbb-border-width-1x);
1304
1304
  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
1305
+ --sbb-download-content-gap: var(--sbb-spacing-fixed-4x);
1306
+ --sbb-download-divider-margin-block: var(--sbb-divider-border-width);
1307
+ --sbb-download-label-font-size: var(--sbb-heading-font-size-5);
1305
1308
  --sbb-download-label-color: var(--sbb-color-3);
1306
1309
  --sbb-download-info-color: var(--sbb-color-granite);
1307
1310
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
@@ -1370,6 +1373,7 @@ summary {
1370
1373
  --sbb-form-field-arrow-color: var(--sbb-color-3);
1371
1374
  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
1372
1375
  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
1376
+ --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
1373
1377
  --sbb-form-field-min-height: var(--sbb-size-element-xs);
1374
1378
  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);
1375
1379
  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);
package/lean-safety-theme.css CHANGED
@@ -1322,6 +1322,9 @@ summary {
1322
1322
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1323
  --sbb-divider-border-width: var(--sbb-border-width-1x);
1324
1324
  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
1325
+ --sbb-download-content-gap: var(--sbb-spacing-fixed-4x);
1326
+ --sbb-download-divider-margin-block: var(--sbb-divider-border-width);
1327
+ --sbb-download-label-font-size: var(--sbb-heading-font-size-5);
1325
1328
  --sbb-download-label-color: var(--sbb-color-3);
1326
1329
  --sbb-download-info-color: var(--sbb-color-granite);
1327
1330
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
@@ -1390,6 +1393,7 @@ summary {
1390
1393
  --sbb-form-field-arrow-color: var(--sbb-color-3);
1391
1394
  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
1392
1395
  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
1396
+ --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
1393
1397
  --sbb-form-field-min-height: var(--sbb-size-element-xs);
1394
1398
  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);
1395
1399
  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);
package/lean-theme.css CHANGED
@@ -1322,6 +1322,9 @@ summary {
1322
1322
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1323
  --sbb-divider-border-width: var(--sbb-border-width-1x);
1324
1324
  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
1325
+ --sbb-download-content-gap: var(--sbb-spacing-fixed-4x);
1326
+ --sbb-download-divider-margin-block: var(--sbb-divider-border-width);
1327
+ --sbb-download-label-font-size: var(--sbb-heading-font-size-5);
1325
1328
  --sbb-download-label-color: var(--sbb-color-3);
1326
1329
  --sbb-download-info-color: var(--sbb-color-granite);
1327
1330
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
@@ -1390,6 +1393,7 @@ summary {
1390
1393
  --sbb-form-field-arrow-color: var(--sbb-color-3);
1391
1394
  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
1392
1395
  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
1396
+ --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
1393
1397
  --sbb-form-field-min-height: var(--sbb-size-element-xs);
1394
1398
  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);
1395
1399
  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);
package/off-brand-theme.css CHANGED
@@ -1302,6 +1302,9 @@ summary {
1302
1302
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1303
1303
  --sbb-divider-border-width: var(--sbb-border-width-1x);
1304
1304
  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
1305
+ --sbb-download-content-gap: var(--sbb-spacing-fixed-4x);
1306
+ --sbb-download-divider-margin-block: var(--sbb-divider-border-width);
1307
+ --sbb-download-label-font-size: var(--sbb-heading-font-size-5);
1305
1308
  --sbb-download-label-color: var(--sbb-color-3);
1306
1309
  --sbb-download-info-color: var(--sbb-color-granite);
1307
1310
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
@@ -1370,6 +1373,7 @@ summary {
1370
1373
  --sbb-form-field-arrow-color: var(--sbb-color-3);
1371
1374
  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
1372
1375
  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
1376
+ --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
1373
1377
  --sbb-form-field-min-height: var(--sbb-size-element-m);
1374
1378
  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
1375
1379
  --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.8.0-dev.1788866364",
3
+ "version": "5.8.0-dev.1788940504",
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/9f23d0fe62ae9901793aae146cc8d1bb7c849798"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/2e3be1f11f87ad6cb47ae8e3f5857ed363f26104"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1322,6 +1322,9 @@ summary {
1322
1322
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1323
  --sbb-divider-border-width: var(--sbb-border-width-1x);
1324
1324
  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
1325
+ --sbb-download-content-gap: var(--sbb-spacing-fixed-4x);
1326
+ --sbb-download-divider-margin-block: var(--sbb-divider-border-width);
1327
+ --sbb-download-label-font-size: var(--sbb-heading-font-size-5);
1325
1328
  --sbb-download-label-color: var(--sbb-color-3);
1326
1329
  --sbb-download-info-color: var(--sbb-color-granite);
1327
1330
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
@@ -1390,6 +1393,7 @@ summary {
1390
1393
  --sbb-form-field-arrow-color: var(--sbb-color-3);
1391
1394
  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
1392
1395
  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
1396
+ --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
1393
1397
  --sbb-form-field-min-height: var(--sbb-size-element-m);
1394
1398
  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
1395
1399
  --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);
package/standard-theme.css CHANGED
@@ -1322,6 +1322,9 @@ summary {
1322
1322
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1323
  --sbb-divider-border-width: var(--sbb-border-width-1x);
1324
1324
  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
1325
+ --sbb-download-content-gap: var(--sbb-spacing-fixed-4x);
1326
+ --sbb-download-divider-margin-block: var(--sbb-divider-border-width);
1327
+ --sbb-download-label-font-size: var(--sbb-heading-font-size-5);
1325
1328
  --sbb-download-label-color: var(--sbb-color-3);
1326
1329
  --sbb-download-info-color: var(--sbb-color-granite);
1327
1330
  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
@@ -1390,6 +1393,7 @@ summary {
1390
1393
  --sbb-form-field-arrow-color: var(--sbb-color-3);
1391
1394
  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
1392
1395
  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
1396
+ --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
1393
1397
  --sbb-form-field-min-height: var(--sbb-size-element-m);
1394
1398
  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
1395
1399
  --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);