@sbb-esta/lyne-elements-dev 4.6.0-dev.1772463840 → 4.6.0-dev.1772464299

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 (22) hide show
  1. package/autocomplete/autocomplete-base-element.js +17 -17
  2. package/core/styles/core.scss +15 -16
  3. package/core/styles/mixins/overlay.scss +25 -15
  4. package/core.css +46 -12
  5. package/custom-elements.json +1840 -1840
  6. package/development/autocomplete/autocomplete-base-element.js +11 -16
  7. package/development/option/optgroup/optgroup-base-element.js +4 -13
  8. package/development/option/option/option-base-element.d.ts.map +1 -1
  9. package/development/option/option/option-base-element.js +12 -14
  10. package/development/option/option/option.component.js +4 -28
  11. package/development/option/option-hint/option-hint.component.d.ts.map +1 -1
  12. package/development/option/option-hint/option-hint.component.js +11 -26
  13. package/development/select/select.component.js +11 -16
  14. package/off-brand-theme.css +46 -12
  15. package/option/optgroup/optgroup-base-element.js +22 -22
  16. package/option/option/option-base-element.js +11 -13
  17. package/option/option/option.component.js +15 -15
  18. package/option/option-hint/option-hint.component.js +16 -18
  19. package/package.json +2 -2
  20. package/safety-theme.css +46 -12
  21. package/select/select.component.js +18 -18
  22. package/standard-theme.css +46 -12
package/standard-theme.css CHANGED
@@ -1572,6 +1572,40 @@ summary {
1572
1572
  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
1573
1573
  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
1574
1574
  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
1575
+ --sbb-option-color: var(--sbb-color-3);
1576
+ --sbb-option-background-color: inherit;
1577
+ --sbb-option-background-color-hover: var(--sbb-background-color-3);
1578
+ --sbb-option-background-color-active: var(--sbb-background-color-4);
1579
+ --sbb-option-disabled-border-color: var(--sbb-color-graphite);
1580
+ --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
1581
+ --sbb-option-disabled-background-color: var(--sbb-background-color-3);
1582
+ --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
1583
+ --sbb-option-min-height: var(--sbb-size-element-s);
1584
+ --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
1585
+ --sbb-option-justify-content: start;
1586
+ --sbb-option-cursor: var(--sbb-cursor-pointer);
1587
+ --sbb-option-border-radius: var(--sbb-border-radius-4x);
1588
+ --sbb-option-icon-color: var(--sbb-color-metal);
1589
+ --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1590
+ --sbb-option-focus-outline-color: transparent;
1591
+ --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
1592
+ --sbb-option-font-size: var(--sbb-text-font-size-s);
1593
+ --sbb-option-hint-color: var(--sbb-color-metal);
1594
+ --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1595
+ --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
1596
+ --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
1597
+ --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
1598
+ --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
1599
+ --sbb-optgroup-label-color: var(--sbb-color-metal);
1600
+ --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1601
+ --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
1602
+ --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);
1603
+ --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
1604
+ --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
1605
+ --sbb-options-panel-animation-timing-function: ease;
1606
+ --sbb-options-panel-background-color: var(--sbb-background-color-1);
1607
+ --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
1608
+ --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
1575
1609
  --sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
1576
1610
  --sbb-radio-button-label-color: var(--sbb-color-3);
1577
1611
  --sbb-radio-button-background-color: var(--sbb-background-color-1);
@@ -1839,6 +1873,18 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
1839
1873
  padding-inline-end: 0;
1840
1874
  }
1841
1875
 
1876
+ :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
1877
+ --sbb-option-min-height: var(--sbb-size-element-xxs);
1878
+ --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
1879
+ --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
1880
+ }
1881
+ :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
1882
+ --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
1883
+ }
1884
+ :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
1885
+ --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
1886
+ }
1887
+
1842
1888
  sbb-tab-nav-bar .sbb-tab-amount {
1843
1889
  margin: 0;
1844
1890
  color: var(--sbb-tab-label-amount-color);
@@ -2283,18 +2329,6 @@ sbb-toggle:has(:focus-visible) {
2283
2329
  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
2284
2330
  }
2285
2331
 
2286
- :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
2287
- --sbb-option-min-height: var(--sbb-size-element-xxs);
2288
- --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
2289
- --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
2290
- }
2291
- :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
2292
- --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
2293
- }
2294
- :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
2295
- --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
2296
- }
2297
-
2298
2332
  sbb-notification:has(sbb-title) {
2299
2333
  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
2300
2334
  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);