scu-web-components 0.0.9 → 0.0.10

package/dist/scw-icon/scw-icon.js

@@ -1,4 +1,4 @@
-import{a as h}from"../chunks/chunk.ZXAPH3YD.js";import{a as l,c as d}from"../chunks/chunk.NEXEO5GC.js";import{a as n}from"../chunks/chunk.C3ATQQAV.js";import{a as t}from"../chunks/chunk.N7MT3ZFK.js";import"../chunks/chunk.IF5XHJTB.js";import{a as v}from"../chunks/chunk.4RQHMHFC.js";import"../chunks/chunk.GOBVJQFJ.js";import"../chunks/chunk.KNBJLHZX.js";import"../chunks/chunk.HOJVKEO5.js";import{a as c,b as i,d as a,i as e}from"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import{a as g}from"../chunks/chunk.AYIEP2QZ.js";import{d as r}from"../chunks/chunk.U64II52Y.js";var u=a`
+import{a as w}from"../chunks/chunk.ZXAPH3YD.js";import{a as s,c as g}from"../chunks/chunk.NEXEO5GC.js";import{a as i}from"../chunks/chunk.C3ATQQAV.js";import{a as v}from"../chunks/chunk.IJGTQGRH.js";import"../chunks/chunk.IF5XHJTB.js";import{a as h}from"../chunks/chunk.4RQHMHFC.js";import"../chunks/chunk.GOBVJQFJ.js";import"../chunks/chunk.KNBJLHZX.js";import"../chunks/chunk.HOJVKEO5.js";import{a as c,b as e,d as t,i as a}from"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import{a as n}from"../chunks/chunk.AYIEP2QZ.js";import{d as r}from"../chunks/chunk.U64II52Y.js";var d=t`
 :host {
   /* scw element */
   position: relative;
@@ -16,20 +16,14 @@ import{a as h}from"../chunks/chunk.ZXAPH3YD.js";import{a as l,c as d}from"../chu
   outline: 2px solid red !important;
 }
 
-:host([color=default]) svg {
-  fill: var(--scw-color-icon);
-}
-:host([color=default]) svg * {
+:host([color=default]) svg, :host([color=default]) svg * {
   fill: var(--scw-color-icon);
 }
 
 :host([color=default][link]:hover) {
   background-color: var(--scw-color-grey-092);
 }
-:host([color=default][link]:hover) svg {
-  fill: var(--scw-color-icon);
-}
-:host([color=default][link]:hover) svg * {
+:host([color=default][link]:hover) svg, :host([color=default][link]:hover) svg * {
   fill: var(--scw-color-icon);
 }
 
@@ -37,770 +31,686 @@ import{a as h}from"../chunks/chunk.ZXAPH3YD.js";import{a as l,c as d}from"../chu
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-grey-10);
 }
-:host([color=default][link]:focus-visible) svg {
-  fill: var(--scw-color-icon);
-}
-:host([color=default][link]:focus-visible) svg * {
+:host([color=default][link]:focus-visible) svg, :host([color=default][link]:focus-visible) svg * {
   fill: var(--scw-color-icon);
 }
 
 :host([color=default][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([color=default][link][aria-disabled=true]) svg {
+:host([color=default][link][aria-disabled=true]) svg, :host([color=default][link][aria-disabled=true]) svg * {
   fill: var(--scw-color-grey-07);
 }
-:host([color=default][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
+
+:host([color]) svg .color-step-01 {
+  fill: var(--scw-color-theme-01, var(--scw-color-grey-01));
+}
+:host([color]) svg .color-step-02 {
+  fill: var(--scw-color-theme-02, var(--scw-color-grey-02));
+}
+:host([color]) svg .color-step-03 {
+  fill: var(--scw-color-theme-03, var(--scw-color-grey-03));
+}
+:host([color]) svg .color-step-04 {
+  fill: var(--scw-color-theme-04, var(--scw-color-grey-04));
+}
+:host([color]) svg .color-step-05,
+:host([color]) svg .color-step {
+  fill: var(--scw-color-theme-05, var(--scw-color-grey-05));
+}
+:host([color]) svg .color-step-06 {
+  fill: var(--scw-color-theme-06, var(--scw-color-grey-06));
+}
+:host([color]) svg .color-step-07 {
+  fill: var(--scw-color-theme-07, var(--scw-color-grey-07));
+}
+:host([color]) svg .color-step-08 {
+  fill: var(--scw-color-theme-08, var(--scw-color-grey-08));
+}
+:host([color]) svg .color-step-09 {
+  fill: var(--scw-color-theme-09, var(--scw-color-grey-09));
 }
 
-:host([color=primary]) svg {
-  fill: var(--scw-color-primary-03);
+:host([color]) svg .color-step-00 {
+  fill: var(--scw-color-theme-00, var(--scw-color-grey-00));
 }
-:host([color=primary]) svg * {
-  fill: var(--scw-color-primary-03);
+:host([color]) svg .color-step-10 {
+  fill: var(--scw-color-theme-10, var(--scw-color-grey-10));
+}
+
+:host([color=primary]) svg, :host([color=primary]) svg * {
+  fill: var(--scw-color-theme-03, var(--scw-color-primary-03));
 }
 
 :host([color=primary][link]:hover) {
   background-color: var(--scw-color-grey-092);
 }
-:host([color=primary][link]:hover) svg {
-  fill: var(--scw-color-primary-03);
-}
-:host([color=primary][link]:hover) svg * {
-  fill: var(--scw-color-primary-03);
+:host([color=primary][link]:hover) svg, :host([color=primary][link]:hover) svg * {
+  fill: var(--scw-color-theme-03, var(--scw-color-primary-03));
 }
 
 :host([color=primary][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-grey-10);
 }
-:host([color=primary][link]:focus-visible) svg {
-  fill: var(--scw-color-primary-03);
-}
-:host([color=primary][link]:focus-visible) svg * {
-  fill: var(--scw-color-primary-03);
+:host([color=primary][link]:focus-visible) svg, :host([color=primary][link]:focus-visible) svg * {
+  fill: var(--scw-color-theme-03, var(--scw-color-primary-03));
 }
 
 :host([color=primary][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([color=primary][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([color=primary][link][aria-disabled=true]) svg * {
+:host([color=primary][link][aria-disabled=true]) svg, :host([color=primary][link][aria-disabled=true]) svg * {
   fill: var(--scw-color-grey-07);
 }
 
-:host([color=mortgage]) svg {
-  fill: var(--scw-color-accent-mortgage);
+:host([color=primary]) svg .color-step-01 {
+  fill: var(--scw-color-theme-01, var(--scw-color-primary-01));
+}
+:host([color=primary]) svg .color-step-02 {
+  fill: var(--scw-color-theme-02, var(--scw-color-primary-02));
+}
+:host([color=primary]) svg .color-step-03 {
+  fill: var(--scw-color-theme-03, var(--scw-color-primary-03));
+}
+:host([color=primary]) svg .color-step-04 {
+  fill: var(--scw-color-theme-04, var(--scw-color-primary-04));
 }
-:host([color=mortgage]) svg * {
-  fill: var(--scw-color-accent-mortgage);
+:host([color=primary]) svg .color-step-05,
+:host([color=primary]) svg .color-step {
+  fill: var(--scw-color-theme-05, var(--scw-color-primary-05));
+}
+:host([color=primary]) svg .color-step-06 {
+  fill: var(--scw-color-theme-06, var(--scw-color-primary-06));
+}
+:host([color=primary]) svg .color-step-07 {
+  fill: var(--scw-color-theme-07, var(--scw-color-primary-07));
+}
+:host([color=primary]) svg .color-step-08 {
+  fill: var(--scw-color-theme-08, var(--scw-color-primary-08));
+}
+:host([color=primary]) svg .color-step-09 {
+  fill: var(--scw-color-theme-09, var(--scw-color-primary-09));
+}
+
+:host([color=mortgage]) svg, :host([color=mortgage]) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-mortgage));
 }
 
 :host([color=mortgage][link]:hover) {
   background-color: var(--scw-color-grey-092);
 }
-:host([color=mortgage][link]:hover) svg {
-  fill: var(--scw-color-accent-mortgage);
-}
-:host([color=mortgage][link]:hover) svg * {
-  fill: var(--scw-color-accent-mortgage);
+:host([color=mortgage][link]:hover) svg, :host([color=mortgage][link]:hover) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-mortgage));
 }
 
 :host([color=mortgage][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-grey-10);
 }
-:host([color=mortgage][link]:focus-visible) svg {
-  fill: var(--scw-color-accent-mortgage);
-}
-:host([color=mortgage][link]:focus-visible) svg * {
-  fill: var(--scw-color-accent-mortgage);
+:host([color=mortgage][link]:focus-visible) svg, :host([color=mortgage][link]:focus-visible) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-mortgage));
 }
 
 :host([color=mortgage][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([color=mortgage][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([color=mortgage][link][aria-disabled=true]) svg * {
+:host([color=mortgage][link][aria-disabled=true]) svg, :host([color=mortgage][link][aria-disabled=true]) svg * {
   fill: var(--scw-color-grey-07);
 }
 
-:host([color=investments]) svg {
-  fill: var(--scw-color-accent-investments);
+:host([color=mortgage]) svg .color-step-01 {
+  fill: var(--scw-color-theme-01, var(--scw-color-accent-mortgage-01));
+}
+:host([color=mortgage]) svg .color-step-02 {
+  fill: var(--scw-color-theme-02, var(--scw-color-accent-mortgage-02));
+}
+:host([color=mortgage]) svg .color-step-03 {
+  fill: var(--scw-color-theme-03, var(--scw-color-accent-mortgage-03));
+}
+:host([color=mortgage]) svg .color-step-04 {
+  fill: var(--scw-color-theme-04, var(--scw-color-accent-mortgage-04));
+}
+:host([color=mortgage]) svg .color-step-05,
+:host([color=mortgage]) svg .color-step {
+  fill: var(--scw-color-theme-05, var(--scw-color-accent-mortgage-05));
+}
+:host([color=mortgage]) svg .color-step-06 {
+  fill: var(--scw-color-theme-06, var(--scw-color-accent-mortgage-06));
+}
+:host([color=mortgage]) svg .color-step-07 {
+  fill: var(--scw-color-theme-07, var(--scw-color-accent-mortgage-07));
 }
-:host([color=investments]) svg * {
-  fill: var(--scw-color-accent-investments);
+:host([color=mortgage]) svg .color-step-08 {
+  fill: var(--scw-color-theme-08, var(--scw-color-accent-mortgage-08));
+}
+:host([color=mortgage]) svg .color-step-09 {
+  fill: var(--scw-color-theme-09, var(--scw-color-accent-mortgage-09));
+}
+
+:host([color=investments]) svg, :host([color=investments]) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-investments));
 }
 
 :host([color=investments][link]:hover) {
   background-color: var(--scw-color-grey-092);
 }
-:host([color=investments][link]:hover) svg {
-  fill: var(--scw-color-accent-investments);
-}
-:host([color=investments][link]:hover) svg * {
-  fill: var(--scw-color-accent-investments);
+:host([color=investments][link]:hover) svg, :host([color=investments][link]:hover) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-investments));
 }
 
 :host([color=investments][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-grey-10);
 }
-:host([color=investments][link]:focus-visible) svg {
-  fill: var(--scw-color-accent-investments);
-}
-:host([color=investments][link]:focus-visible) svg * {
-  fill: var(--scw-color-accent-investments);
+:host([color=investments][link]:focus-visible) svg, :host([color=investments][link]:focus-visible) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-investments));
 }
 
 :host([color=investments][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([color=investments][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([color=investments][link][aria-disabled=true]) svg * {
+:host([color=investments][link][aria-disabled=true]) svg, :host([color=investments][link][aria-disabled=true]) svg * {
   fill: var(--scw-color-grey-07);
 }
 
-:host([color=credit-cards]) svg {
-  fill: var(--scw-color-accent-credit-cards);
+:host([color=investments]) svg .color-step-01 {
+  fill: var(--scw-color-theme-01, var(--scw-color-accent-investments-01));
+}
+:host([color=investments]) svg .color-step-02 {
+  fill: var(--scw-color-theme-02, var(--scw-color-accent-investments-02));
 }
-:host([color=credit-cards]) svg * {
-  fill: var(--scw-color-accent-credit-cards);
+:host([color=investments]) svg .color-step-03 {
+  fill: var(--scw-color-theme-03, var(--scw-color-accent-investments-03));
+}
+:host([color=investments]) svg .color-step-04 {
+  fill: var(--scw-color-theme-04, var(--scw-color-accent-investments-04));
+}
+:host([color=investments]) svg .color-step-05,
+:host([color=investments]) svg .color-step {
+  fill: var(--scw-color-theme-05, var(--scw-color-accent-investments-05));
+}
+:host([color=investments]) svg .color-step-06 {
+  fill: var(--scw-color-theme-06, var(--scw-color-accent-investments-06));
+}
+:host([color=investments]) svg .color-step-07 {
+  fill: var(--scw-color-theme-07, var(--scw-color-accent-investments-07));
+}
+:host([color=investments]) svg .color-step-08 {
+  fill: var(--scw-color-theme-08, var(--scw-color-accent-investments-08));
+}
+:host([color=investments]) svg .color-step-09 {
+  fill: var(--scw-color-theme-09, var(--scw-color-accent-investments-09));
+}
+
+:host([color=credit-cards]) svg, :host([color=credit-cards]) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-credit-cards));
 }
 
 :host([color=credit-cards][link]:hover) {
   background-color: var(--scw-color-grey-092);
 }
-:host([color=credit-cards][link]:hover) svg {
-  fill: var(--scw-color-accent-credit-cards);
-}
-:host([color=credit-cards][link]:hover) svg * {
-  fill: var(--scw-color-accent-credit-cards);
+:host([color=credit-cards][link]:hover) svg, :host([color=credit-cards][link]:hover) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-credit-cards));
 }
 
 :host([color=credit-cards][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-grey-10);
 }
-:host([color=credit-cards][link]:focus-visible) svg {
-  fill: var(--scw-color-accent-credit-cards);
-}
-:host([color=credit-cards][link]:focus-visible) svg * {
-  fill: var(--scw-color-accent-credit-cards);
+:host([color=credit-cards][link]:focus-visible) svg, :host([color=credit-cards][link]:focus-visible) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-credit-cards));
 }
 
 :host([color=credit-cards][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([color=credit-cards][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([color=credit-cards][link][aria-disabled=true]) svg * {
+:host([color=credit-cards][link][aria-disabled=true]) svg, :host([color=credit-cards][link][aria-disabled=true]) svg * {
   fill: var(--scw-color-grey-07);
 }
 
-:host([color=student]) svg {
-  fill: var(--scw-color-accent-student);
+:host([color=credit-cards]) svg .color-step-01 {
+  fill: var(--scw-color-theme-01, var(--scw-color-accent-credit-cards-01));
+}
+:host([color=credit-cards]) svg .color-step-02 {
+  fill: var(--scw-color-theme-02, var(--scw-color-accent-credit-cards-02));
+}
+:host([color=credit-cards]) svg .color-step-03 {
+  fill: var(--scw-color-theme-03, var(--scw-color-accent-credit-cards-03));
+}
+:host([color=credit-cards]) svg .color-step-04 {
+  fill: var(--scw-color-theme-04, var(--scw-color-accent-credit-cards-04));
+}
+:host([color=credit-cards]) svg .color-step-05,
+:host([color=credit-cards]) svg .color-step {
+  fill: var(--scw-color-theme-05, var(--scw-color-accent-credit-cards-05));
 }
-:host([color=student]) svg * {
-  fill: var(--scw-color-accent-student);
+:host([color=credit-cards]) svg .color-step-06 {
+  fill: var(--scw-color-theme-06, var(--scw-color-accent-credit-cards-06));
+}
+:host([color=credit-cards]) svg .color-step-07 {
+  fill: var(--scw-color-theme-07, var(--scw-color-accent-credit-cards-07));
+}
+:host([color=credit-cards]) svg .color-step-08 {
+  fill: var(--scw-color-theme-08, var(--scw-color-accent-credit-cards-08));
+}
+:host([color=credit-cards]) svg .color-step-09 {
+  fill: var(--scw-color-theme-09, var(--scw-color-accent-credit-cards-09));
+}
+
+:host([color=student]) svg, :host([color=student]) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-student));
 }
 
 :host([color=student][link]:hover) {
   background-color: var(--scw-color-grey-092);
 }
-:host([color=student][link]:hover) svg {
-  fill: var(--scw-color-accent-student);
-}
-:host([color=student][link]:hover) svg * {
-  fill: var(--scw-color-accent-student);
+:host([color=student][link]:hover) svg, :host([color=student][link]:hover) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-student));
 }
 
 :host([color=student][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-grey-10);
 }
-:host([color=student][link]:focus-visible) svg {
-  fill: var(--scw-color-accent-student);
-}
-:host([color=student][link]:focus-visible) svg * {
-  fill: var(--scw-color-accent-student);
+:host([color=student][link]:focus-visible) svg, :host([color=student][link]:focus-visible) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-student));
 }
 
 :host([color=student][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([color=student][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([color=student][link][aria-disabled=true]) svg * {
+:host([color=student][link][aria-disabled=true]) svg, :host([color=student][link][aria-disabled=true]) svg * {
   fill: var(--scw-color-grey-07);
 }
 
-:host([color=savings]) svg {
-  fill: var(--scw-color-accent-savings);
+:host([color=student]) svg .color-step-01 {
+  fill: var(--scw-color-theme-01, var(--scw-color-accent-student-01));
+}
+:host([color=student]) svg .color-step-02 {
+  fill: var(--scw-color-theme-02, var(--scw-color-accent-student-02));
+}
+:host([color=student]) svg .color-step-03 {
+  fill: var(--scw-color-theme-03, var(--scw-color-accent-student-03));
+}
+:host([color=student]) svg .color-step-04 {
+  fill: var(--scw-color-theme-04, var(--scw-color-accent-student-04));
+}
+:host([color=student]) svg .color-step-05,
+:host([color=student]) svg .color-step {
+  fill: var(--scw-color-theme-05, var(--scw-color-accent-student-05));
+}
+:host([color=student]) svg .color-step-06 {
+  fill: var(--scw-color-theme-06, var(--scw-color-accent-student-06));
+}
+:host([color=student]) svg .color-step-07 {
+  fill: var(--scw-color-theme-07, var(--scw-color-accent-student-07));
+}
+:host([color=student]) svg .color-step-08 {
+  fill: var(--scw-color-theme-08, var(--scw-color-accent-student-08));
 }
-:host([color=savings]) svg * {
-  fill: var(--scw-color-accent-savings);
+:host([color=student]) svg .color-step-09 {
+  fill: var(--scw-color-theme-09, var(--scw-color-accent-student-09));
+}
+
+:host([color=savings]) svg, :host([color=savings]) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-savings));
 }
 
 :host([color=savings][link]:hover) {
   background-color: var(--scw-color-grey-092);
 }
-:host([color=savings][link]:hover) svg {
-  fill: var(--scw-color-accent-savings);
-}
-:host([color=savings][link]:hover) svg * {
-  fill: var(--scw-color-accent-savings);
+:host([color=savings][link]:hover) svg, :host([color=savings][link]:hover) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-savings));
 }
 
 :host([color=savings][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-grey-10);
 }
-:host([color=savings][link]:focus-visible) svg {
-  fill: var(--scw-color-accent-savings);
-}
-:host([color=savings][link]:focus-visible) svg * {
-  fill: var(--scw-color-accent-savings);
+:host([color=savings][link]:focus-visible) svg, :host([color=savings][link]:focus-visible) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-savings));
 }
 
 :host([color=savings][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([color=savings][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([color=savings][link][aria-disabled=true]) svg * {
+:host([color=savings][link][aria-disabled=true]) svg, :host([color=savings][link][aria-disabled=true]) svg * {
   fill: var(--scw-color-grey-07);
 }
 
-:host([color=checking]) svg {
-  fill: var(--scw-color-accent-checking);
+:host([color=savings]) svg .color-step-01 {
+  fill: var(--scw-color-theme-01, var(--scw-color-accent-savings-01));
+}
+:host([color=savings]) svg .color-step-02 {
+  fill: var(--scw-color-theme-02, var(--scw-color-accent-savings-02));
+}
+:host([color=savings]) svg .color-step-03 {
+  fill: var(--scw-color-theme-03, var(--scw-color-accent-savings-03));
 }
-:host([color=checking]) svg * {
-  fill: var(--scw-color-accent-checking);
+:host([color=savings]) svg .color-step-04 {
+  fill: var(--scw-color-theme-04, var(--scw-color-accent-savings-04));
+}
+:host([color=savings]) svg .color-step-05,
+:host([color=savings]) svg .color-step {
+  fill: var(--scw-color-theme-05, var(--scw-color-accent-savings-05));
+}
+:host([color=savings]) svg .color-step-06 {
+  fill: var(--scw-color-theme-06, var(--scw-color-accent-savings-06));
+}
+:host([color=savings]) svg .color-step-07 {
+  fill: var(--scw-color-theme-07, var(--scw-color-accent-savings-07));
+}
+:host([color=savings]) svg .color-step-08 {
+  fill: var(--scw-color-theme-08, var(--scw-color-accent-savings-08));
+}
+:host([color=savings]) svg .color-step-09 {
+  fill: var(--scw-color-theme-09, var(--scw-color-accent-savings-09));
+}
+
+:host([color=checking]) svg, :host([color=checking]) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-checking));
 }
 
 :host([color=checking][link]:hover) {
   background-color: var(--scw-color-grey-092);
 }
-:host([color=checking][link]:hover) svg {
-  fill: var(--scw-color-accent-checking);
-}
-:host([color=checking][link]:hover) svg * {
-  fill: var(--scw-color-accent-checking);
+:host([color=checking][link]:hover) svg, :host([color=checking][link]:hover) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-checking));
 }
 
 :host([color=checking][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-grey-10);
 }
-:host([color=checking][link]:focus-visible) svg {
-  fill: var(--scw-color-accent-checking);
-}
-:host([color=checking][link]:focus-visible) svg * {
-  fill: var(--scw-color-accent-checking);
+:host([color=checking][link]:focus-visible) svg, :host([color=checking][link]:focus-visible) svg * {
+  fill: var(--scw-color-theme, var(--scw-color-accent-checking));
 }
 
 :host([color=checking][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([color=checking][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([color=checking][link][aria-disabled=true]) svg * {
+:host([color=checking][link][aria-disabled=true]) svg, :host([color=checking][link][aria-disabled=true]) svg * {
   fill: var(--scw-color-grey-07);
 }
 
-:host([color=white]) svg {
-  fill: white;
+:host([color=checking]) svg .color-step-01 {
+  fill: var(--scw-color-theme-01, var(--scw-color-accent-checking-01));
 }
-:host([color=white]) svg * {
-  fill: white;
+:host([color=checking]) svg .color-step-02 {
+  fill: var(--scw-color-theme-02, var(--scw-color-accent-checking-02));
+}
+:host([color=checking]) svg .color-step-03 {
+  fill: var(--scw-color-theme-03, var(--scw-color-accent-checking-03));
+}
+:host([color=checking]) svg .color-step-04 {
+  fill: var(--scw-color-theme-04, var(--scw-color-accent-checking-04));
+}
+:host([color=checking]) svg .color-step-05,
+:host([color=checking]) svg .color-step {
+  fill: var(--scw-color-theme-05, var(--scw-color-accent-checking-05));
+}
+:host([color=checking]) svg .color-step-06 {
+  fill: var(--scw-color-theme-06, var(--scw-color-accent-checking-06));
+}
+:host([color=checking]) svg .color-step-07 {
+  fill: var(--scw-color-theme-07, var(--scw-color-accent-checking-07));
+}
+:host([color=checking]) svg .color-step-08 {
+  fill: var(--scw-color-theme-08, var(--scw-color-accent-checking-08));
+}
+:host([color=checking]) svg .color-step-09 {
+  fill: var(--scw-color-theme-09, var(--scw-color-accent-checking-09));
 }
 
-:host([color=white][link]:hover) svg {
+:host([color=white]) svg, :host([color=white]) svg * {
   fill: white;
 }
-:host([color=white][link]:hover) svg * {
+
+:host([color=white][link]:hover) svg, :host([color=white][link]:hover) svg * {
   fill: white;
 }
 
 :host([color=white][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
 }
-:host([color=white][link]:focus-visible) svg {
+:host([color=white][link]:focus-visible) svg, :host([color=white][link]:focus-visible) svg * {
   fill: white;
 }
-:host([color=white][link]:focus-visible) svg * {
+
+:host([color=white][link][aria-disabled=true]) svg, :host([color=white][link][aria-disabled=true]) svg * {
   fill: white;
 }
 
-:host([color=white][link][aria-disabled=true]) svg {
-  fill: white;
+:host([color=white]) svg .color-step-01 {
+  fill: var(--scw-color-theme-01, var(--scw-color-grey-01));
 }
-:host([color=white][link][aria-disabled=true]) svg * {
-  fill: white;
+:host([color=white]) svg .color-step-02 {
+  fill: var(--scw-color-theme-02, var(--scw-color-grey-02));
 }
-
-:host([background-color=primary]) {
-  background-color: var(--scw-color-primary);
+:host([color=white]) svg .color-step-03 {
+  fill: var(--scw-color-theme-03, var(--scw-color-grey-03));
+}
+:host([color=white]) svg .color-step-04 {
+  fill: var(--scw-color-theme-04, var(--scw-color-grey-04));
+}
+:host([color=white]) svg .color-step-05,
+:host([color=white]) svg .color-step {
+  fill: var(--scw-color-theme-05, var(--scw-color-grey-05));
 }
-:host([background-color=primary]) svg {
-  fill: var(--scw-color-grey-10);
+:host([color=white]) svg .color-step-06 {
+  fill: var(--scw-color-theme-06, var(--scw-color-grey-06));
 }
-:host([background-color=primary]) svg * {
-  fill: var(--scw-color-grey-10);
+:host([color=white]) svg .color-step-07 {
+  fill: var(--scw-color-theme-07, var(--scw-color-grey-07));
+}
+:host([color=white]) svg .color-step-08 {
+  fill: var(--scw-color-theme-08, var(--scw-color-grey-08));
+}
+:host([color=white]) svg .color-step-09 {
+  fill: var(--scw-color-theme-09, var(--scw-color-grey-09));
 }
 
-:host([background-color=primary][link]:hover) {
-  background-color: var(--scw-color-primary-06);
+:host(:not([background-color=default])) svg, :host(:not([background-color=default])) svg * {
+  fill: var(--scw-color-theme-10, var(--scw-color-grey-10));
+}
+
+:host([background-color=error]) svg, :host([background-color=error]) svg *,
+:host([background-color=information]) svg,
+:host([background-color=information]) svg *,
+:host([background-color=success]) svg,
+:host([background-color=success]) svg *,
+:host([background-color=warning]) svg,
+:host([background-color=warning]) svg * {
+  fill: var(--scw-color-theme-02, var(--scw-color-grey-02));
 }
-:host([background-color=primary][link]:hover) svg {
-  fill: var(--scw-color-grey-10);
+
+:host([background-color=primary]) {
+  background-color: var(--scw-color-theme, var(--scw-color-primary));
 }
-:host([background-color=primary][link]:hover) svg * {
-  fill: var(--scw-color-grey-10);
+
+:host([background-color=primary][link]:hover) {
+  background-color: var(--scw-color-theme-06, var(--scw-color-primary-06));
 }
 
 :host([background-color=primary][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
-  background-color: var(--scw-color-primary);
-}
-:host([background-color=primary][link]:focus-visible) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=primary][link]:focus-visible) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-primary));
 }
 
 :host([background-color=primary][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=primary][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=primary][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=mortgage]) {
-  background-color: var(--scw-color-accent-mortgage);
-}
-:host([background-color=mortgage]) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=mortgage]) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-mortgage));
 }
 
 :host([background-color=mortgage][link]:hover) {
-  background-color: var(--scw-color-accent-mortgage-06);
-}
-:host([background-color=mortgage][link]:hover) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=mortgage][link]:hover) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme-06, var(--scw-color-accent-mortgage-06));
 }
 
 :host([background-color=mortgage][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
-  background-color: var(--scw-color-accent-mortgage);
-}
-:host([background-color=mortgage][link]:focus-visible) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=mortgage][link]:focus-visible) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-mortgage));
 }
 
 :host([background-color=mortgage][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=mortgage][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=mortgage][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=investments]) {
-  background-color: var(--scw-color-accent-investments);
-}
-:host([background-color=investments]) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=investments]) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-investments));
 }
 
 :host([background-color=investments][link]:hover) {
-  background-color: var(--scw-color-accent-investments-06);
-}
-:host([background-color=investments][link]:hover) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=investments][link]:hover) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme-06, var(--scw-color-accent-investments-06));
 }
 
 :host([background-color=investments][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
-  background-color: var(--scw-color-accent-investments);
-}
-:host([background-color=investments][link]:focus-visible) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=investments][link]:focus-visible) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-investments));
 }
 
 :host([background-color=investments][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=investments][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=investments][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=credit-cards]) {
-  background-color: var(--scw-color-accent-credit-cards);
-}
-:host([background-color=credit-cards]) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=credit-cards]) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-credit-cards));
 }
 
 :host([background-color=credit-cards][link]:hover) {
-  background-color: var(--scw-color-accent-credit-cards-06);
-}
-:host([background-color=credit-cards][link]:hover) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=credit-cards][link]:hover) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme-06, var(--scw-color-accent-credit-cards-06));
 }
 
 :host([background-color=credit-cards][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
-  background-color: var(--scw-color-accent-credit-cards);
-}
-:host([background-color=credit-cards][link]:focus-visible) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=credit-cards][link]:focus-visible) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-credit-cards));
 }
 
 :host([background-color=credit-cards][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=credit-cards][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=credit-cards][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=student]) {
-  background-color: var(--scw-color-accent-student);
-}
-:host([background-color=student]) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=student]) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-student));
 }
 
 :host([background-color=student][link]:hover) {
-  background-color: var(--scw-color-accent-student-06);
-}
-:host([background-color=student][link]:hover) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=student][link]:hover) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme-06, var(--scw-color-accent-student-06));
 }
 
 :host([background-color=student][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
-  background-color: var(--scw-color-accent-student);
-}
-:host([background-color=student][link]:focus-visible) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=student][link]:focus-visible) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-student));
 }
 
 :host([background-color=student][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=student][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=student][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=savings]) {
-  background-color: var(--scw-color-accent-savings);
-}
-:host([background-color=savings]) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=savings]) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-savings));
 }
 
 :host([background-color=savings][link]:hover) {
-  background-color: var(--scw-color-accent-savings-06);
-}
-:host([background-color=savings][link]:hover) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=savings][link]:hover) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme-06, var(--scw-color-accent-savings-06));
 }
 
 :host([background-color=savings][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
-  background-color: var(--scw-color-accent-savings);
-}
-:host([background-color=savings][link]:focus-visible) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=savings][link]:focus-visible) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-savings));
 }
 
 :host([background-color=savings][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=savings][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=savings][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=checking]) {
-  background-color: var(--scw-color-accent-checking);
-}
-:host([background-color=checking]) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=checking]) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-checking));
 }
 
 :host([background-color=checking][link]:hover) {
-  background-color: var(--scw-color-accent-checking-06);
-}
-:host([background-color=checking][link]:hover) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=checking][link]:hover) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme-06, var(--scw-color-accent-checking-06));
 }
 
 :host([background-color=checking][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
-  background-color: var(--scw-color-accent-checking);
-}
-:host([background-color=checking][link]:focus-visible) svg {
-  fill: var(--scw-color-grey-10);
-}
-:host([background-color=checking][link]:focus-visible) svg * {
-  fill: var(--scw-color-grey-10);
+  background-color: var(--scw-color-theme, var(--scw-color-accent-checking));
 }
 
 :host([background-color=checking][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=checking][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=checking][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=information]) {
   background-color: var(--scw-color-information-light);
 }
-:host([background-color=information]) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=information]) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=information][link]:hover) {
   background-color: var(--scw-color-information);
 }
-:host([background-color=information][link]:hover) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=information][link]:hover) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=information][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-information-light);
 }
-:host([background-color=information][link]:focus-visible) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=information][link]:focus-visible) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=information][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=information][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=information][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=warning]) {
   background-color: var(--scw-color-warning-light);
 }
-:host([background-color=warning]) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=warning]) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=warning][link]:hover) {
   background-color: var(--scw-color-warning);
 }
-:host([background-color=warning][link]:hover) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=warning][link]:hover) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=warning][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-warning-light);
 }
-:host([background-color=warning][link]:focus-visible) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=warning][link]:focus-visible) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=warning][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=warning][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=warning][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=error]) {
   background-color: var(--scw-color-error-light);
 }
-:host([background-color=error]) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=error]) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=error][link]:hover) {
   background-color: var(--scw-color-error);
 }
-:host([background-color=error][link]:hover) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=error][link]:hover) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=error][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-error-light);
 }
-:host([background-color=error][link]:focus-visible) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=error][link]:focus-visible) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=error][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=error][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=error][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host([background-color=success]) {
   background-color: var(--scw-color-success-light);
 }
-:host([background-color=success]) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=success]) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=success][link]:hover) {
   background-color: var(--scw-color-success);
 }
-:host([background-color=success][link]:hover) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=success][link]:hover) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=success][link]:focus-visible) {
   box-shadow: var(--scw-effect-focus-shadow);
   background-color: var(--scw-color-success-light);
 }
-:host([background-color=success][link]:focus-visible) svg {
-  fill: var(--scw-color-icon);
-}
-:host([background-color=success][link]:focus-visible) svg * {
-  fill: var(--scw-color-icon);
-}
 
 :host([background-color=success][link][aria-disabled=true]) {
   background-color: var(--scw-color-grey-09);
 }
-:host([background-color=success][link][aria-disabled=true]) svg {
-  fill: var(--scw-color-grey-07);
-}
-:host([background-color=success][link][aria-disabled=true]) svg * {
-  fill: var(--scw-color-grey-07);
-}
 
 :host {
   outline: none;
@@ -874,7 +784,7 @@ import{a as h}from"../chunks/chunk.ZXAPH3YD.js";import{a as l,c as d}from"../chu
 :host([size="100"]) {
   width: 100px;
   height: 100px;
-}`;var o=class extends v{constructor(){super();this.size=d.size50;this.backgroundColor=l.default;this.color=l.default;this._svgInfo="";this.element=g.icon}static get styles(){return[super.styles,u]}parseAndValidateLightDom(){super.parseAndValidateLightDom(),h(this),t(this.icon,s=>{s===!1?this.warn(`scw-icon could not find ${this.icon}`):this._svgInfo=s})}render(){return e`
-      ${n(this._svgInfo)}
-    `}};r([c({type:String,reflect:!0})],o.prototype,"icon",2),r([c({type:String,reflect:!0})],o.prototype,"size",2),r([c({type:String,reflect:!0,attribute:"background-color"})],o.prototype,"backgroundColor",2),r([c({type:String,reflect:!0,attribute:"color"})],o.prototype,"color",2),r([i()],o.prototype,"_svgInfo",2);export{o as default};
+}`;var o=class extends h{constructor(){super();this.size=g.size50;this.backgroundColor=s.default;this.color=s.default;this._svgInfo="";this.element=n.icon}static get styles(){return[super.styles,d]}parseAndValidateLightDom(){super.parseAndValidateLightDom(),w(this),v(this.icon,l=>{l===!1?this.warn(`scw-icon could not find ${this.icon}`):this._svgInfo=l})}render(){return a`
+      ${i(this._svgInfo)}
+    `}};r([c({type:String,reflect:!0})],o.prototype,"icon",2),r([c({type:String,reflect:!0})],o.prototype,"size",2),r([c({type:String,reflect:!0,attribute:"background-color"})],o.prototype,"backgroundColor",2),r([c({type:String,reflect:!0,attribute:"color"})],o.prototype,"color",2),r([e()],o.prototype,"_svgInfo",2);export{o as default};
 //# sourceMappingURL=scw-icon.js.map