@sbb-esta/lyne-elements-dev 5.13.0-dev.1793630348 → 5.13.0-dev.1793630843

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 (10) hide show
  1. package/development/status.pure.js +1 -1
  2. package/lean-off-brand-theme.css +42 -0
  3. package/lean-safety-theme.css +42 -0
  4. package/lean-theme.css +42 -0
  5. package/off-brand-theme.css +42 -0
  6. package/package.json +2 -2
  7. package/safety-theme.css +42 -0
  8. package/standard-theme.css +42 -0
  9. package/status/_status.global.scss +42 -0
  10. package/status.pure.js +1 -1
package/development/status.pure.js CHANGED
@@ -5,7 +5,7 @@ import { SbbElement } from "./core.js";
5
5
  import { SbbIconNameMixin } from "./icon.pure.js";
6
6
 
7
7
  // src/elements/status/status.scss?inline
8
- var status_default = ":host {\n --sbb-status-text-color: var(--sbb-status-color);\n display: flex;\n gap: var(--sbb-status-gap);\n color: var(--sbb-status-text-color);\n font-size: var(--sbb-status-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([type=error]) {\n --sbb-status-color: var(--sbb-color-error);\n}\n\n:host([type=success]) {\n --sbb-status-color: var(--sbb-color-success);\n}\n\n:host([type=warning]) {\n --sbb-status-color: var(--sbb-color-2);\n}\n\n:host([type=pending]) {\n --sbb-status-color: var(--sbb-color-sky);\n}\n\n:host([type=incomplete]) {\n --sbb-status-color: var(--sbb-color-error);\n}\n\n:host([type=not-started]) {\n --sbb-status-color: var(--sbb-color-5);\n --sbb-status-text-color: var(--sbb-color-2);\n}\n\n:host([type=in-progress]) {\n --sbb-status-color: var(--sbb-color-pink);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])) {\n --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);\n --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);\n --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);\n color: var(--sbb-status-title-color);\n}\n\n.sbb-status__icon {\n display: flex;\n flex-shrink: 0;\n color: var(--sbb-status-color);\n margin-block-start: calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n.sbb-status__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}\n";
8
+ var status_default = ":host {\n --sbb-status-text-color: var(--sbb-status-color);\n display: flex;\n gap: var(--sbb-status-gap);\n color: var(--sbb-status-text-color);\n font-size: var(--sbb-status-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([type=error]) {\n --sbb-status-color: var(--sbb-status-color-error);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-error);\n}\n\n:host([type=success]) {\n --sbb-status-color: var(--sbb-status-color-success);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-success);\n}\n\n:host([type=warning]) {\n --sbb-status-color: var(--sbb-status-color-warning);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-warning);\n}\n\n:host([type=pending]) {\n --sbb-status-color: var(--sbb-status-color-pending);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-pending);\n}\n\n:host([type=incomplete]) {\n --sbb-status-color: var(--sbb-status-color-incomplete);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-incomplete);\n}\n\n:host([type=not-started]) {\n --sbb-status-color: var(--sbb-status-color-not-started);\n --sbb-status-text-color: var(--sbb-status-text-color-not-started);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-not-started);\n}\n\n:host([type=in-progress]) {\n --sbb-status-color: var(--sbb-status-color-in-progress);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-in-progress);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])) {\n --sbb-status-gap: var(--sbb-status-gap-with-title);\n --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);\n --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);\n color: var(--sbb-status-title-color);\n}\n\n.sbb-status__icon {\n display: flex;\n flex-shrink: 0;\n color: var(--sbb-status-color);\n margin-block-start: calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n.sbb-status__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}\n\nsbb-icon {\n --sbb-icon-svg-width: var(--sbb-status-icon-dimension);\n --sbb-icon-svg-height: var(--sbb-status-icon-dimension);\n height: fit-content;\n background: radial-gradient(circle, var(--sbb-status-icon-background-color) calc(100% - 0.4375rem), transparent calc(100% - 0.4375rem));\n}\n";
9
9
 
10
10
  // src/elements/status/status.component.ts
11
11
  /**
package/lean-off-brand-theme.css CHANGED
@@ -1855,9 +1855,51 @@ summary {
1855
1855
  --sbb-slider-padding-block: 0.125rem;
1856
1856
  --sbb-status-color: var(--sbb-color-4);
1857
1857
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1858
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1858
1859
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1859
1860
  --sbb-status-title-color: var(--sbb-color-granite);
1860
1861
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1862
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1863
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1864
+ --sbb-status-color-error: var(--sbb-color-error);
1865
+ --sbb-status-icon-background-color-error: color-mix(
1866
+ in srgb,
1867
+ var(--sbb-color-error) 10%,
1868
+ transparent
1869
+ );
1870
+ --sbb-status-color-success: var(--sbb-color-success);
1871
+ --sbb-status-icon-background-color-success: color-mix(
1872
+ in srgb,
1873
+ var(--sbb-color-success) 10%,
1874
+ transparent
1875
+ );
1876
+ --sbb-status-color-warning: var(--sbb-color-2);
1877
+ --sbb-status-icon-background-color-warning: color-mix(
1878
+ in srgb,
1879
+ var(--sbb-color-peach) 30%,
1880
+ transparent
1881
+ );
1882
+ --sbb-status-color-pending: var(--sbb-color-sky);
1883
+ --sbb-status-icon-background-color-pending: color-mix(
1884
+ in srgb,
1885
+ var(--sbb-color-sky) 10%,
1886
+ transparent
1887
+ );
1888
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1889
+ --sbb-status-icon-background-color-incomplete: color-mix(
1890
+ in srgb,
1891
+ var(--sbb-color-error) 10%,
1892
+ transparent
1893
+ );
1894
+ --sbb-status-color-not-started: var(--sbb-color-5);
1895
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1896
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1897
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1898
+ --sbb-status-icon-background-color-in-progress: color-mix(
1899
+ in srgb,
1900
+ var(--sbb-color-sky) 10%,
1901
+ transparent
1902
+ );
1861
1903
  --sbb-step-label-color: var(--sbb-color-4);
1862
1904
  --sbb-step-label-prefix-border-style: solid;
1863
1905
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/lean-safety-theme.css CHANGED
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/lean-theme.css CHANGED
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/off-brand-theme.css CHANGED
@@ -1855,9 +1855,51 @@ summary {
1855
1855
  --sbb-slider-padding-block: 0.125rem;
1856
1856
  --sbb-status-color: var(--sbb-color-4);
1857
1857
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1858
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1858
1859
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1859
1860
  --sbb-status-title-color: var(--sbb-color-granite);
1860
1861
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1862
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1863
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1864
+ --sbb-status-color-error: var(--sbb-color-error);
1865
+ --sbb-status-icon-background-color-error: color-mix(
1866
+ in srgb,
1867
+ var(--sbb-color-error) 10%,
1868
+ transparent
1869
+ );
1870
+ --sbb-status-color-success: var(--sbb-color-success);
1871
+ --sbb-status-icon-background-color-success: color-mix(
1872
+ in srgb,
1873
+ var(--sbb-color-success) 10%,
1874
+ transparent
1875
+ );
1876
+ --sbb-status-color-warning: var(--sbb-color-2);
1877
+ --sbb-status-icon-background-color-warning: color-mix(
1878
+ in srgb,
1879
+ var(--sbb-color-peach) 30%,
1880
+ transparent
1881
+ );
1882
+ --sbb-status-color-pending: var(--sbb-color-sky);
1883
+ --sbb-status-icon-background-color-pending: color-mix(
1884
+ in srgb,
1885
+ var(--sbb-color-sky) 10%,
1886
+ transparent
1887
+ );
1888
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1889
+ --sbb-status-icon-background-color-incomplete: color-mix(
1890
+ in srgb,
1891
+ var(--sbb-color-error) 10%,
1892
+ transparent
1893
+ );
1894
+ --sbb-status-color-not-started: var(--sbb-color-5);
1895
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1896
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1897
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1898
+ --sbb-status-icon-background-color-in-progress: color-mix(
1899
+ in srgb,
1900
+ var(--sbb-color-sky) 10%,
1901
+ transparent
1902
+ );
1861
1903
  --sbb-step-label-color: var(--sbb-color-4);
1862
1904
  --sbb-step-label-prefix-border-style: solid;
1863
1905
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.13.0-dev.1793630348",
3
+ "version": "5.13.0-dev.1793630843",
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/bdd296604869c12c0caa5184bea352ef9af8d770"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/faf81772232ccd117dacc3794d761a652f992d88"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/standard-theme.css CHANGED
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/status/_status.global.scss CHANGED
@@ -5,6 +5,48 @@ $theme: 'standard' !default;
5
5
  @mixin base {
6
6
  --sbb-status-color: var(--sbb-color-4);
7
7
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
8
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
8
9
  --sbb-status-font-size: var(--sbb-text-font-size-s);
9
10
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
11
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
12
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
13
+ --sbb-status-color-error: var(--sbb-color-error);
14
+ --sbb-status-icon-background-color-error: color-mix(
15
+ in srgb,
16
+ var(--sbb-color-error) 10%,
17
+ transparent
18
+ );
19
+ --sbb-status-color-success: var(--sbb-color-success);
20
+ --sbb-status-icon-background-color-success: color-mix(
21
+ in srgb,
22
+ var(--sbb-color-success) 10%,
23
+ transparent
24
+ );
25
+ --sbb-status-color-warning: var(--sbb-color-2);
26
+ --sbb-status-icon-background-color-warning: color-mix(
27
+ in srgb,
28
+ var(--sbb-color-peach) 30%,
29
+ transparent
30
+ );
31
+ --sbb-status-color-pending: var(--sbb-color-sky);
32
+ --sbb-status-icon-background-color-pending: color-mix(
33
+ in srgb,
34
+ var(--sbb-color-sky) 10%,
35
+ transparent
36
+ );
37
+ --sbb-status-color-incomplete: var(--sbb-color-error);
38
+ --sbb-status-icon-background-color-incomplete: color-mix(
39
+ in srgb,
40
+ var(--sbb-color-error) 10%,
41
+ transparent
42
+ );
43
+ --sbb-status-color-not-started: var(--sbb-color-5);
44
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
45
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
46
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
47
+ --sbb-status-icon-background-color-in-progress: color-mix(
48
+ in srgb,
49
+ var(--sbb-color-sky) 10%,
50
+ transparent
51
+ );
10
52
  }
package/status.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a}from"./core.js";import{SbbIconNameMixin as o}from"./icon.pure.js";var s=`:host{--sbb-status-text-color:var(--sbb-status-color);gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex}:host([type=error]){--sbb-status-color:var(--sbb-color-error)}:host([type=success]){--sbb-status-color:var(--sbb-color-success)}:host([type=warning]){--sbb-status-color:var(--sbb-color-2)}:host([type=pending]){--sbb-status-color:var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color:var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color:var(--sbb-color-5);--sbb-status-text-color:var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color:var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap:var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size:var(--sbb-heading-font-size-5);--_sbb-status-title-line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{color:var(--sbb-status-color);flex-shrink:0;margin-block-start:calc((var(--_sbb-status-title-font-size,var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height,var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);display:flex}.sbb-status__content-slot{margin:0;padding:0;display:inline}::slotted(sbb-title){margin-block:0}
1
+ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a}from"./core.js";import{SbbIconNameMixin as o}from"./icon.pure.js";var s=`:host{--sbb-status-text-color:var(--sbb-status-color);gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex}:host([type=error]){--sbb-status-color:var(--sbb-status-color-error);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-error)}:host([type=success]){--sbb-status-color:var(--sbb-status-color-success);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-success)}:host([type=warning]){--sbb-status-color:var(--sbb-status-color-warning);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-warning)}:host([type=pending]){--sbb-status-color:var(--sbb-status-color-pending);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-pending)}:host([type=incomplete]){--sbb-status-color:var(--sbb-status-color-incomplete);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-incomplete)}:host([type=not-started]){--sbb-status-color:var(--sbb-status-color-not-started);--sbb-status-text-color:var(--sbb-status-text-color-not-started);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-not-started)}:host([type=in-progress]){--sbb-status-color:var(--sbb-status-color-in-progress);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-in-progress)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap:var(--sbb-status-gap-with-title);--_sbb-status-title-font-size:var(--sbb-heading-font-size-5);--_sbb-status-title-line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{color:var(--sbb-status-color);flex-shrink:0;margin-block-start:calc((var(--_sbb-status-title-font-size,var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height,var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);display:flex}.sbb-status__content-slot{margin:0;padding:0;display:inline}::slotted(sbb-title){margin-block:0}sbb-icon{--sbb-icon-svg-width:var(--sbb-status-icon-dimension);--sbb-icon-svg-height:var(--sbb-status-icon-dimension);background:radial-gradient(circle, var(--sbb-status-icon-background-color) calc(100% - .4375rem), transparent calc(100% - .4375rem));height:fit-content}
2
2
  `;let c=(()=>{let c=o(a),l,u=[],d=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[i({reflect:!0})],e(this,null,l,{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},u,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-status`}static{this.styles=[r(s)]}#e;get type(){return this.#e}set type(e){this.#e=e}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-title`);e&&(e.slot=`title`)}_configureTitle(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-title`);t&&(customElements.upgrade(t),t.visualLevel=`5`)}renderIconName(){return super.renderIconName()||this._statusTypes.get(this.type)}render(){return n`
3
3
  <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
4
4
  <span class="sbb-status__content">