@sbb-esta/lyne-elements-experimental 4.6.0 → 4.7.0

package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.js

@@ -1,15 +1,15 @@
-import { __esDecorate as o, __runInitializers as c } from "tslib";
+import { __esDecorate as i, __runInitializers as c } from "tslib";
 import { SbbElementInternalsMixin as m } from "@sbb-esta/lyne-elements/core/mixins.js";
 import { boxSizingStyles as n } from "@sbb-esta/lyne-elements/core/styles.js";
-import { css as b, LitElement as u, html as p } from "lit";
+import { css as b, LitElement as p, html as u } from "lit";
 import { customElement as d } from "lit/decorators.js";
-const f = b`:host{display:block}.sbb-autocomplete-grid-cell{display:flex;column-gap:var(--sbb-spacing-fixed-6x)}`;
+const f = b`:host{--sbb-autocomplete-grid-cell-gap: var(--sbb-spacing-fixed-6x);display:block}.sbb-autocomplete-grid-cell{display:flex;column-gap:var(--sbb-autocomplete-grid-cell-gap)}`;
 let h = (() => {
   var t;
-  let i = [d("sbb-autocomplete-grid-cell")], a, s = [], e, r = m(u);
+  let o = [d("sbb-autocomplete-grid-cell")], a, s = [], e, r = m(p);
   return t = class extends r {
     render() {
-      return p`
+      return u`
       <span class="sbb-autocomplete-grid-cell">
         <slot></slot>
       </span>
@@ -17,7 +17,7 @@ let h = (() => {
     }
   }, e = t, (() => {
     const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    o(null, a = { value: e }, i, { kind: "class", name: e.name, metadata: l }, null, s), e = a.value, l && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+    i(null, a = { value: e }, o, { kind: "class", name: e.name, metadata: l }, null, s), e = a.value, l && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
   })(), t.role = "gridcell", t.styles = [n, f], c(e, s), e;
 })();
 export {

package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js

@@ -1,19 +1,19 @@
-import { __esDecorate as n, __runInitializers as c } from "tslib";
+import { __esDecorate as b, __runInitializers as c } from "tslib";
 import { SbbPropertyWatcherController as l } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { ɵstateController as b } from "@sbb-esta/lyne-elements/core/mixins.js";
-import { boxSizingStyles as p } from "@sbb-esta/lyne-elements/core/styles.js";
-import { SbbOptionBaseElement as d } from "@sbb-esta/lyne-elements/option.js";
+import { ɵstateController as r } from "@sbb-esta/lyne-elements/core/mixins.js";
+import { boxSizingStyles as d } from "@sbb-esta/lyne-elements/core/styles.js";
+import { SbbOptionBaseElement as p } from "@sbb-esta/lyne-elements/option.js";
 import { customElement as h } from "lit/decorators.js";
-import { css as m } from "lit";
-const u = m`:host{--sbb-option-color: var(--sbb-color-3);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host(:is(:state(negative),[state--negative])){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}.sbb-option{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;min-height:var(--sbb-option-min-height);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`, g = "sbb-autocomplete-grid-option";
+import { css as u } from "lit";
+const m = u`:host{display:block}:host(:is(:state(negative),[state--negative])){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}.sbb-option{font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);position:relative;display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;min-height:var(--sbb-option-min-height);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`, g = "sbb-autocomplete-grid-option";
 let z = (() => {
   var o;
-  let r = [h("sbb-autocomplete-grid-option")], e, s = [], i, a = d;
+  let n = [h("sbb-autocomplete-grid-option")], i, s = [], e, a = p;
   return o = class extends a {
     constructor() {
       super(), this.optionId = g, this.addController(new l(this, () => this.closest("sbb-autocomplete-grid-optgroup"), {
         disabled: (t) => {
-          this.disabledFromGroup = t.disabled, b(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled();
+          this.disabledFromGroup = t.disabled, r(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled();
         },
         label: (t) => this.groupLabel = t.label
       })), this.addController(new l(this, () => this.closest("sbb-autocomplete-grid"), {
@@ -21,7 +21,7 @@ let z = (() => {
       }));
     }
     willUpdate(t) {
-      super.willUpdate(t), t.has("disabled") && (b(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled());
+      super.willUpdate(t), t.has("disabled") && (r(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled());
     }
     selectByClick(t) {
       if (this.disabled || this.disabledFromGroup) {
@@ -30,10 +30,10 @@ let z = (() => {
       }
       this.selectViaUserInteraction(!0);
     }
-  }, i = o, (() => {
+  }, e = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    n(null, e = { value: i }, r, { kind: "class", name: i.name, metadata: t }, null, s), i = e.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.role = "gridcell", o.styles = [p, u], c(i, s), i;
+    b(null, i = { value: e }, n, { kind: "class", name: e.name, metadata: t }, null, s), e = i.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "gridcell", o.styles = [d, m], c(e, s), e;
 })();
 export {
   z as SbbAutocompleteGridOptionElement,

package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js

@@ -1,27 +1,27 @@
-import { __esDecorate as l, __runInitializers as i } from "tslib";
-import { SbbElementInternalsMixin as c } from "@sbb-esta/lyne-elements/core/mixins.js";
-import { boxSizingStyles as d } from "@sbb-esta/lyne-elements/core/styles.js";
-import { css as n, LitElement as u, html as g } from "lit";
-import { customElement as m } from "lit/decorators.js";
-const p = n`:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-3);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-border-color: light-dark( var(--sbb-color-graphite), var(--sbb-color-smoke) );--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-pointer);display:block}:host(:is(:state(negative),[state--negative])){--sbb-autocomplete-grid-row-color: var(--sbb-color-3-negative);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3-negative);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-border-color-5);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media(any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host(:is(:state(disabled),[state--disabled])){--sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x));overflow-x:hidden}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host(:is(:state(disabled),[state--disabled])) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host(:is(:state(disabled),[state--disabled])) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled])) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
+import { __esDecorate as i, __runInitializers as b } from "tslib";
+import { SbbElementInternalsMixin as d } from "@sbb-esta/lyne-elements/core/mixins.js";
+import { boxSizingStyles as c } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as n, LitElement as u, html as m } from "lit";
+import { customElement as p } from "lit/decorators.js";
+const g = n`:host{display:block}:host(:is(:state(negative),[state--negative])){--sbb-autocomplete-grid-row-color: var(--sbb-color-3-negative);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3-negative);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-border-color-5);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media(any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host(:is(:state(disabled),[state--disabled])){--sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x));overflow-x:hidden}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color, inherit);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host(:is(:state(disabled),[state--disabled])) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host(:is(:state(disabled),[state--disabled])) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled])) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
 let v = 0, y = (() => {
   var o;
-  let b = [m("sbb-autocomplete-grid-row")], t, a = [], e, s = c(u);
+  let l = [p("sbb-autocomplete-grid-row")], r, a = [], e, s = d(u);
   return o = class extends s {
     connectedCallback() {
       super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-row-${++v}`;
     }
     render() {
-      return g`
+      return m`
       <span class="sbb-autocomplete-grid-row">
         <slot></slot>
       </span>
     `;
     }
   }, e = o, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    l(null, t = { value: e }, b, { kind: "class", name: e.name, metadata: r }, null, a), e = t.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), o.role = "row", o.styles = [d, p], i(e, a), e;
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    i(null, r = { value: e }, l, { kind: "class", name: e.name, metadata: t }, null, a), e = r.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "row", o.styles = [c, g], b(e, a), e;
 })();
 export {
   y as SbbAutocompleteGridRowElement

package/core/styles/core.scss

@@ -0,0 +1,13 @@
+$theme: 'standard' !default;
+
+@use 'sass:string';
+
+@use '../../autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.global' as
+  autocomplete-grid-row with (
+  $theme: $theme
+);
+
+// Core variables
+:root {
+  @include autocomplete-grid-row.base;
+}

package/core/styles/lean-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'lean'
+);

package/core/styles/off-brand-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'off-brand'
+);

package/core/styles/safety-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'safety'
+);

package/core/styles/standard-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'standard'
+);

package/core/styles/theme.scss

@@ -0,0 +1,5 @@
+$theme: 'standard' !default;
+
+@use './core' with (
+  $theme: $theme
+);

package/core.css

@@ -0,0 +1,13 @@
+:root {
+  --sbb-autocomplete-grid-row-color: var(--sbb-color-3);
+  --sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3);
+  --sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);
+  --sbb-autocomplete-grid-row-disabled-border-color: light-dark(
+    var(--sbb-color-graphite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3);
+  --sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
+  --sbb-autocomplete-grid-row-justify-content: space-between;
+  --sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-pointer);
+}