scu-web-components 0.0.94 → 0.0.95

package/dist/tokens/source/scssVariables/components-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-.json

@@ -0,0 +1,122 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-vars",
+    "namespace": "state-default-size-small-container-scw-icon-vars"
+  },
+  "background-color": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-background-color: rgba(0,0,0,0);",
+    "outputSegment": "$background-color: rgba(0,0,0,0);",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$background-color"
+  },
+  "width": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-width: 50px;",
+    "outputSegment": "$width: 50px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$width"
+  },
+  "height": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-height: 50px;",
+    "outputSegment": "$height: 50px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$height"
+  },
+  "constraint-horizontal": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-constraint-horizontal: MIN;",
+    "outputSegment": "$constraint-horizontal: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$constraint-horizontal"
+  },
+  "constraint-vertical": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-constraint-vertical: MIN;",
+    "outputSegment": "$constraint-vertical: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$constraint-vertical"
+  },
+  "constrain-proportions": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-constrain-proportions: false;",
+    "outputSegment": "$constrain-proportions: false;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$constrain-proportions"
+  },
+  "layout-context": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-layout-context: ABSOLUTE;",
+    "outputSegment": "$layout-context: ABSOLUTE;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$layout-context"
+  },
+  "layout-mode": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-layout-mode: NONE;",
+    "outputSegment": "$layout-mode: NONE;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$layout-mode"
+  },
+  "primary-axis-align-items": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-primary-axis-align-items: MIN;",
+    "outputSegment": "$primary-axis-align-items: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$primary-axis-align-items"
+  },
+  "counter-axis-align-items": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-counter-axis-align-items: MIN;",
+    "outputSegment": "$counter-axis-align-items: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$counter-axis-align-items"
+  },
+  "item-spacing": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-item-spacing: 0px;",
+    "outputSegment": "$item-spacing: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$item-spacing"
+  },
+  "layout-align": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-layout-align: MIN;",
+    "outputSegment": "$layout-align: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$layout-align"
+  },
+  "layout-grow": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-layout-grow: 0;",
+    "outputSegment": "$layout-grow: 0;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$layout-grow"
+  },
+  "top": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-top: 0px;",
+    "outputSegment": "$top: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$top"
+  },
+  "top-percent": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-top-percent: 34.25%;",
+    "outputSegment": "$top-percent: 34.25%;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$top-percent"
+  },
+  "bottom": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-bottom: calc( var( --scw-spacing-1 ) * 2.3 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 2.3 );",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$bottom"
+  },
+  "left": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-left: var( --scw-spacing-4 );",
+    "outputSegment": "$left: var( --scw-spacing-4 );",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$left"
+  },
+  "left-percent": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-left-percent: 50%;",
+    "outputSegment": "$left-percent: 50%;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$left-percent"
+  },
+  "right": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-right: var( --scw-spacing-4 );",
+    "outputSegment": "$right: var( --scw-spacing-4 );",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$right"
+  },
+  "padding-left": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-padding-left: 0px;",
+    "outputSegment": "$padding-left: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$padding-left"
+  },
+  "padding-right": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-padding-right: 0px;",
+    "outputSegment": "$padding-right: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$padding-right"
+  },
+  "padding-top": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-padding-top: 0px;",
+    "outputSegment": "$padding-top: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$padding-top"
+  },
+  "padding-bottom": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-padding-bottom: 0px;",
+    "outputSegment": "$padding-bottom: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-vars.$padding-bottom"
+  }
+}

package/dist/tokens/source/scssVariables/components-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-.json

@@ -0,0 +1,122 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-vars",
+    "namespace": "state-default-size-small-container-scw-icon-icon-vars"
+  },
+  "background-color": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-background-color: rgba(0,0,0,0);",
+    "outputSegment": "$background-color: rgba(0,0,0,0);",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$background-color"
+  },
+  "width": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-width: 50px;",
+    "outputSegment": "$width: 50px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$width"
+  },
+  "height": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-height: 50px;",
+    "outputSegment": "$height: 50px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$height"
+  },
+  "constraint-horizontal": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-constraint-horizontal: STRETCH;",
+    "outputSegment": "$constraint-horizontal: STRETCH;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$constraint-horizontal"
+  },
+  "constraint-vertical": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-constraint-vertical: STRETCH;",
+    "outputSegment": "$constraint-vertical: STRETCH;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$constraint-vertical"
+  },
+  "constrain-proportions": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-constrain-proportions: false;",
+    "outputSegment": "$constrain-proportions: false;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$constrain-proportions"
+  },
+  "layout-context": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-layout-context: ABSOLUTE;",
+    "outputSegment": "$layout-context: ABSOLUTE;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$layout-context"
+  },
+  "layout-mode": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-layout-mode: NONE;",
+    "outputSegment": "$layout-mode: NONE;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$layout-mode"
+  },
+  "primary-axis-align-items": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-primary-axis-align-items: MIN;",
+    "outputSegment": "$primary-axis-align-items: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$primary-axis-align-items"
+  },
+  "counter-axis-align-items": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-counter-axis-align-items: MIN;",
+    "outputSegment": "$counter-axis-align-items: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$counter-axis-align-items"
+  },
+  "item-spacing": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-item-spacing: 0px;",
+    "outputSegment": "$item-spacing: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$item-spacing"
+  },
+  "layout-align": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-layout-align: MIN;",
+    "outputSegment": "$layout-align: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$layout-align"
+  },
+  "layout-grow": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-layout-grow: 0;",
+    "outputSegment": "$layout-grow: 0;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$layout-grow"
+  },
+  "top": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-top: 0px;",
+    "outputSegment": "$top: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$top"
+  },
+  "top-percent": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-top-percent: 50%;",
+    "outputSegment": "$top-percent: 50%;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$top-percent"
+  },
+  "bottom": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-bottom: 0px;",
+    "outputSegment": "$bottom: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$bottom"
+  },
+  "left": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-left: 0px;",
+    "outputSegment": "$left: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$left"
+  },
+  "left-percent": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-left-percent: 50%;",
+    "outputSegment": "$left-percent: 50%;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$left-percent"
+  },
+  "right": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-right: 0px;",
+    "outputSegment": "$right: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$right"
+  },
+  "padding-left": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-padding-left: 0px;",
+    "outputSegment": "$padding-left: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$padding-left"
+  },
+  "padding-right": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-padding-right: 0px;",
+    "outputSegment": "$padding-right: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$padding-right"
+  },
+  "padding-top": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-padding-top: 0px;",
+    "outputSegment": "$padding-top: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$padding-top"
+  },
+  "padding-bottom": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-padding-bottom: 0px;",
+    "outputSegment": "$padding-bottom: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vars.$padding-bottom"
+  }
+}

package/dist/tokens/source/scssVariables/components-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-.json

@@ -0,0 +1,127 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-vector-vars",
+    "namespace": "state-default-size-small-container-scw-icon-icon-vector-vars"
+  },
+  "background-color": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-background-color: var( --scw-color-grey-02 );",
+    "outputSegment": "$background-color: var( --scw-color-grey-02 );",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$background-color"
+  },
+  "blend-mode": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-blend-mode: NORMAL;",
+    "outputSegment": "$blend-mode: NORMAL;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$blend-mode"
+  },
+  "width": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-width: 44.6429px;",
+    "outputSegment": "$width: 44.6429px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$width"
+  },
+  "height": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-height: 39.5416px;",
+    "outputSegment": "$height: 39.5416px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$height"
+  },
+  "constraint-horizontal": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-constraint-horizontal: STRETCH;",
+    "outputSegment": "$constraint-horizontal: STRETCH;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$constraint-horizontal"
+  },
+  "constraint-vertical": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-constraint-vertical: STRETCH;",
+    "outputSegment": "$constraint-vertical: STRETCH;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$constraint-vertical"
+  },
+  "constrain-proportions": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-constrain-proportions: false;",
+    "outputSegment": "$constrain-proportions: false;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$constrain-proportions"
+  },
+  "layout-context": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-layout-context: ABSOLUTE;",
+    "outputSegment": "$layout-context: ABSOLUTE;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$layout-context"
+  },
+  "layout-mode": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-layout-mode: NONE;",
+    "outputSegment": "$layout-mode: NONE;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$layout-mode"
+  },
+  "primary-axis-align-items": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-primary-axis-align-items: MIN;",
+    "outputSegment": "$primary-axis-align-items: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$primary-axis-align-items"
+  },
+  "counter-axis-align-items": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-counter-axis-align-items: MIN;",
+    "outputSegment": "$counter-axis-align-items: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$counter-axis-align-items"
+  },
+  "item-spacing": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-item-spacing: 0px;",
+    "outputSegment": "$item-spacing: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$item-spacing"
+  },
+  "layout-align": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-layout-align: MIN;",
+    "outputSegment": "$layout-align: MIN;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$layout-align"
+  },
+  "layout-grow": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-layout-grow: 0;",
+    "outputSegment": "$layout-grow: 0;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$layout-grow"
+  },
+  "top": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );",
+    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 0.5228515625 );",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$top"
+  },
+  "top-percent": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-top-percent: 50%;",
+    "outputSegment": "$top-percent: 50%;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$top-percent"
+  },
+  "bottom": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$bottom"
+  },
+  "left": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );",
+    "outputSegment": "$left: calc( var( --scw-spacing-1 ) * 0.26787109375 );",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$left"
+  },
+  "left-percent": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-left-percent: 50%;",
+    "outputSegment": "$left-percent: 50%;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$left-percent"
+  },
+  "right": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );",
+    "outputSegment": "$right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$right"
+  },
+  "padding-left": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-padding-left: 0px;",
+    "outputSegment": "$padding-left: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$padding-left"
+  },
+  "padding-right": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-padding-right: 0px;",
+    "outputSegment": "$padding-right: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$padding-right"
+  },
+  "padding-top": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-padding-top: 0px;",
+    "outputSegment": "$padding-top: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$padding-top"
+  },
+  "padding-bottom": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector-padding-bottom: 0px;",
+    "outputSegment": "$padding-bottom: 0px;",
+    "outputSegmentRef": "state-default-size-small-container-scw-icon-icon-vector-vars.$padding-bottom"
+  }
+}

package/dist/tokens/source/scssVariables/components-scw-horizontal-nav-item-state-default-style-button-.json

@@ -15,8 +15,8 @@
     "outputSegmentRef": "state-default-style-button-vars.$width"
   },
   "height": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-height: 87px;",
-    "outputSegment": "$height: 87px;",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-height: 137px;",
+    "outputSegment": "$height: 137px;",
     "outputSegmentRef": "state-default-style-button-vars.$height"
   },
   "constraint-horizontal": {
@@ -70,33 +70,33 @@
     "outputSegmentRef": "state-default-style-button-vars.$layout-grow"
   },
   "top": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-top: calc( var( --scw-spacing-1 ) * 12.3 );",
-    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 12.3 );",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-top: calc( var( --scw-spacing-1 ) * 16.083984375 );",
+    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 16.083984375 );",
     "outputSegmentRef": "state-default-style-button-vars.$top"
   },
   "top-percent": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-top-percent: 39.08%;",
-    "outputSegment": "$top-percent: 39.08%;",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-top-percent: 34.91%;",
+    "outputSegment": "$top-percent: 34.91%;",
     "outputSegmentRef": "state-default-style-button-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-bottom: calc( var( --scw-spacing-1 ) * 21.6 );",
-    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 21.6 );",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-bottom: calc( var( --scw-spacing-1 ) * 35.916015625 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 35.916015625 );",
     "outputSegmentRef": "state-default-style-button-vars.$bottom"
   },
   "left": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-left: calc( var( --scw-spacing-1 ) * 21.8 );",
-    "outputSegment": "$left: calc( var( --scw-spacing-1 ) * 21.8 );",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-left: calc( var( --scw-spacing-1 ) * 52.5 );",
+    "outputSegment": "$left: calc( var( --scw-spacing-1 ) * 52.5 );",
     "outputSegmentRef": "state-default-style-button-vars.$left"
   },
   "left-percent": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-left-percent: 38.87%;",
-    "outputSegment": "$left-percent: 38.87%;",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-left-percent: 70%;",
+    "outputSegment": "$left-percent: 70%;",
     "outputSegmentRef": "state-default-style-button-vars.$left-percent"
   },
   "right": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-right: calc( var( --scw-spacing-1 ) * 38.3 );",
-    "outputSegment": "$right: calc( var( --scw-spacing-1 ) * 38.3 );",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-right: calc( var( --scw-spacing-1 ) * 18.5 );",
+    "outputSegment": "$right: calc( var( --scw-spacing-1 ) * 18.5 );",
     "outputSegmentRef": "state-default-style-button-vars.$right"
   },
   "padding-left": {

package/dist/tokens/source/scssVariables/components-scw-horizontal-nav-item-state-default-style-button-container-.json

@@ -30,8 +30,8 @@
     "outputSegmentRef": "state-default-style-button-container-vars.$width"
   },
   "height": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-height: 47px;",
-    "outputSegment": "$height: 47px;",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-height: 97px;",
+    "outputSegment": "$height: 97px;",
     "outputSegmentRef": "state-default-style-button-container-vars.$height"
   },
   "constraint-horizontal": {
@@ -55,8 +55,8 @@
     "outputSegmentRef": "state-default-style-button-container-vars.$layout-context"
   },
   "layout-mode": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-layout-mode: HORIZONTAL;",
-    "outputSegment": "$layout-mode: HORIZONTAL;",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-layout-mode: VERTICAL;",
+    "outputSegment": "$layout-mode: VERTICAL;",
     "outputSegmentRef": "state-default-style-button-container-vars.$layout-mode"
   },
   "primary-axis-align-items": {
@@ -70,8 +70,8 @@
     "outputSegmentRef": "state-default-style-button-container-vars.$counter-axis-align-items"
   },
   "item-spacing": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );",
-    "outputSegment": "$item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-item-spacing: 0px;",
+    "outputSegment": "$item-spacing: 0px;",
     "outputSegmentRef": "state-default-style-button-container-vars.$item-spacing"
   },
   "layout-align": {

package/dist/tokens/source/scssVariables/components-scw-horizontal-nav-item-state-default-style-button-container-label-.json

@@ -40,8 +40,8 @@
     "outputSegmentRef": "state-default-style-button-container-label-vars.$layout-context"
   },
   "layout-mode": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-label-layout-mode: HORIZONTAL;",
-    "outputSegment": "$layout-mode: HORIZONTAL;",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-label-layout-mode: VERTICAL;",
+    "outputSegment": "$layout-mode: VERTICAL;",
     "outputSegmentRef": "state-default-style-button-container-label-vars.$layout-mode"
   },
   "primary-axis-align-items": {
@@ -70,13 +70,13 @@
     "outputSegmentRef": "state-default-style-button-container-label-vars.$layout-grow"
   },
   "top": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-label-top: 0px;",
-    "outputSegment": "$top: 0px;",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-label-top: var( --scw-spacing-5 );",
+    "outputSegment": "$top: var( --scw-spacing-5 );",
     "outputSegmentRef": "state-default-style-button-container-label-vars.$top"
   },
   "top-percent": {
-    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-label-top-percent: 50%;",
-    "outputSegment": "$top-percent: 50%;",
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-label-top-percent: 75.77%;",
+    "outputSegment": "$top-percent: 75.77%;",
     "outputSegmentRef": "state-default-style-button-container-label-vars.$top-percent"
   },
   "bottom": {

package/dist/tokens/source/scssVariables/components-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-.json

@@ -0,0 +1,122 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-vars",
+    "namespace": "state-default-style-button-container-scw-icon-vars"
+  },
+  "background-color": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-background-color: rgba(0,0,0,0);",
+    "outputSegment": "$background-color: rgba(0,0,0,0);",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$background-color"
+  },
+  "width": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-width: 50px;",
+    "outputSegment": "$width: 50px;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$width"
+  },
+  "height": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-height: 50px;",
+    "outputSegment": "$height: 50px;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$height"
+  },
+  "constraint-horizontal": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-constraint-horizontal: MIN;",
+    "outputSegment": "$constraint-horizontal: MIN;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$constraint-horizontal"
+  },
+  "constraint-vertical": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-constraint-vertical: MIN;",
+    "outputSegment": "$constraint-vertical: MIN;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$constraint-vertical"
+  },
+  "constrain-proportions": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-constrain-proportions: false;",
+    "outputSegment": "$constrain-proportions: false;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$constrain-proportions"
+  },
+  "layout-context": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-layout-context: FLEX;",
+    "outputSegment": "$layout-context: FLEX;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$layout-context"
+  },
+  "layout-mode": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-layout-mode: NONE;",
+    "outputSegment": "$layout-mode: NONE;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$layout-mode"
+  },
+  "primary-axis-align-items": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-primary-axis-align-items: MIN;",
+    "outputSegment": "$primary-axis-align-items: MIN;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$primary-axis-align-items"
+  },
+  "counter-axis-align-items": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-counter-axis-align-items: MIN;",
+    "outputSegment": "$counter-axis-align-items: MIN;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$counter-axis-align-items"
+  },
+  "item-spacing": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-item-spacing: 0px;",
+    "outputSegment": "$item-spacing: 0px;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$item-spacing"
+  },
+  "layout-align": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-layout-align: INHERIT;",
+    "outputSegment": "$layout-align: INHERIT;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$layout-align"
+  },
+  "layout-grow": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-layout-grow: 0;",
+    "outputSegment": "$layout-grow: 0;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$layout-grow"
+  },
+  "top": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-top: 0px;",
+    "outputSegment": "$top: 0px;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$top"
+  },
+  "top-percent": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-top-percent: 25.77%;",
+    "outputSegment": "$top-percent: 25.77%;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$top-percent"
+  },
+  "bottom": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-bottom: calc( var( --scw-spacing-1 ) * 4.7 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 4.7 );",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$bottom"
+  },
+  "left": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-left: calc( var( --scw-spacing-1 ) * 3.5 );",
+    "outputSegment": "$left: calc( var( --scw-spacing-1 ) * 3.5 );",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$left"
+  },
+  "left-percent": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-left-percent: 50%;",
+    "outputSegment": "$left-percent: 50%;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$left-percent"
+  },
+  "right": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-right: calc( var( --scw-spacing-1 ) * 3.5 );",
+    "outputSegment": "$right: calc( var( --scw-spacing-1 ) * 3.5 );",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$right"
+  },
+  "padding-left": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-padding-left: 0px;",
+    "outputSegment": "$padding-left: 0px;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$padding-left"
+  },
+  "padding-right": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-padding-right: 0px;",
+    "outputSegment": "$padding-right: 0px;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$padding-right"
+  },
+  "padding-top": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-padding-top: 0px;",
+    "outputSegment": "$padding-top: 0px;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$padding-top"
+  },
+  "padding-bottom": {
+    "output": "$comp-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-padding-bottom: 0px;",
+    "outputSegment": "$padding-bottom: 0px;",
+    "outputSegmentRef": "state-default-style-button-container-scw-icon-vars.$padding-bottom"
+  }
+}