npm - @teseor/css - Versions diffs - 1.6.0 → 1.8.0 - Mend

@teseor/css 1.6.0 → 1.8.0

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 (498) hide show

package/src/config/tokens/accessibility.docs.json ADDED Viewed

@@ -0,0 +1,104 @@
+{
+  "id": "accessibility",
+  "type": "guide",
+  "title": "Accessibility",
+  "description": "Built-in accessibility features: reduced motion, system theme detection, high contrast, and keyboard focus indicators",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Reduced Motion",
+      "description": "All animations and transitions respect prefers-reduced-motion. Duration tokens are set to 0ms, and component animations are disabled with animation: none.",
+      "examples": [
+        {
+          "title": "Duration tokens",
+          "code": "// Motion tokens (config/tokens/motion)\n:root {\n  --ui-duration-fast: 100ms;\n  --ui-duration-base: 150ms;\n  --ui-duration-slow: 250ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --ui-duration-fast: 0ms;\n    --ui-duration-base: 0ms;\n    --ui-duration-slow: 0ms;\n  }\n}"
+        },
+        {
+          "title": "Component animations",
+          "description": "Components with keyframe animations add explicit animation: none. Affected: spinner, skeleton, progress, progress-circle, toast, drawer, disclosure, button (loading), icon (spin), status (pulse).",
+          "code": "// Example: spinner\n@media (prefers-reduced-motion: reduce) {\n  .spinner {\n    animation: none;\n  }\n}"
+        }
+      ]
+    },
+    {
+      "title": "System Theme Detection",
+      "description": "Dark mode activates automatically when the OS is set to dark and no explicit data-theme attribute is present. Set data-theme to override.",
+      "examples": [
+        {
+          "title": "Automatic (default)",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-card",
+              "children": [
+                { "tag": "p", "text": "Follows system preference when no data-theme is set" }
+              ]
+            }
+          ],
+          "code": "<!-- Auto-detects system preference -->\n<html>\n  ...\n</html>"
+        },
+        {
+          "title": "Explicit override",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-card",
+              "attrs": { "data-theme": "dark" },
+              "children": [{ "tag": "p", "text": "Forced dark regardless of system preference" }]
+            }
+          ],
+          "code": "<!-- Always dark, ignores system preference -->\n<html data-theme=\"dark\">\n  ...\n</html>"
+        },
+        {
+          "title": "How it works",
+          "code": "// Explicit toggle (highest priority)\n[data-theme=\"dark\"] {\n  --ui-color-bg: var(--ui-color-neutral-900);\n  ...\n}\n\n// Auto-detect (only when no data-theme is set)\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --ui-color-bg: var(--ui-color-neutral-900);\n    ...\n  }\n}"
+        }
+      ]
+    },
+    {
+      "title": "Focus Indicators",
+      "description": "All interactive elements use :focus-visible for keyboard-only focus rings. Mouse clicks do not show focus outlines.",
+      "examples": [
+        {
+          "title": "Keyboard focus",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                { "tag": "button", "class": "ui-button ui-button--focus", "text": "Button" },
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--focus",
+                  "attrs": { "placeholder": "Input" }
+                },
+                {
+                  "tag": "select",
+                  "class": "ui-select ui-select--focus",
+                  "children": [{ "tag": "option", "text": "Select" }]
+                }
+              ]
+            }
+          ],
+          "code": "// :focus-visible only triggers on keyboard navigation\n.input:focus-visible {\n  border-color: var(--_border-color-focus);\n  box-shadow: 0 0 0 var(--ui-border-width-md)\n    var(--ui-color-focus);\n}"
+        }
+      ]
+    },
+    {
+      "title": "Forced Colors (High Contrast)",
+      "description": "Windows High Contrast Mode support. Focus rings use transparent outlines that become visible in forced-colors mode, and the focus color maps to the system Highlight color.",
+      "examples": [
+        {
+          "title": "Focus ring technique",
+          "description": "Components use box-shadow for focus rings in normal mode. A transparent outline provides the visible focus indicator in forced-colors mode (where box-shadow is removed by the browser).",
+          "code": "// Normal mode: box-shadow visible, outline transparent\n.input:focus-visible {\n  outline: var(--ui-border-width-md) solid transparent;\n  outline-offset: var(--ui-border-width-sm);\n  box-shadow: 0 0 0 var(--ui-border-width-md)\n    var(--ui-color-focus);\n}\n\n// Forced colors: browser removes box-shadow,\n// transparent outline becomes system-colored\n@media (forced-colors: active) {\n  :root {\n    --ui-color-focus: Highlight;\n  }\n}"
+        },
+        {
+          "title": "Affected components",
+          "description": "All form controls (input, select, checkbox, radio, slider) and interactive components (button, link, tabs) use this pattern.",
+          "code": "// Components with forced-colors support:\n// Forms: input, select, checkbox, radio, slider\n// Actions: button, close-button\n// Navigation: tabs, breadcrumb, pagination\n// Overlays: modal, drawer, dialog"
+        }
+      ]
+    }
+  ]
+}

package/src/config/tokens/borders/index.scss ADDED Viewed

@@ -0,0 +1,8 @@
+@layer tokens {
+  :root {
+    // Border widths - derived from unit (8px)
+    --ui-border-width-sm: calc(var(--ui-unit) * 0.125); // 1px
+    --ui-border-width-md: calc(var(--ui-unit) * 0.25); // 2px
+    --ui-border-width-lg: calc(var(--ui-unit) * 0.5); // 4px
+  }
+}

package/src/config/tokens/colors/colors.docs.json ADDED Viewed

@@ -0,0 +1,316 @@
+{
+  "id": "colors",
+  "type": "token",
+  "title": "Colors",
+  "description": "HSL-based color system with primitive and semantic tokens. Semantic tokens adapt to light/dark themes.",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Text Colors",
+      "description": "Use for typography and icons.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-text)" },
+              "text": "--ui-color-text: Default text"
+            },
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-text-muted)" },
+              "text": "--ui-color-text-muted: Secondary text, captions"
+            },
+            {
+              "tag": "p",
+              "class": "ui-p-1",
+              "style": {
+                "color": "var(--ui-color-text-inverse)",
+                "background": "var(--ui-color-neutral-900)",
+                "border-radius": "var(--ui-radius-sm)"
+              },
+              "text": "--ui-color-text-inverse: Text on dark backgrounds"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Background Colors",
+      "description": "Use for surfaces, cards, and containers.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg)",
+                "border": "1px solid var(--ui-color-border)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-bg: Base background"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg-subtle)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-bg-subtle: Subtle emphasis"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg-muted)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-bg-muted: Stronger emphasis, code blocks"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Border Colors",
+      "description": "Use for dividers, inputs, and card borders.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "border": "2px solid var(--ui-color-border)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-border: Default borders"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "border": "2px solid var(--ui-color-border-strong)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-border-strong: Emphasized borders"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Interactive Colors",
+      "description": "Use for links, buttons, and interactive elements.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-interactive)" },
+              "text": "--ui-color-interactive: Links, primary actions"
+            },
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-interactive-hover)" },
+              "text": "--ui-color-interactive-hover: Hover state"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-1",
+              "style": {
+                "display": "inline-block",
+                "outline": "3px solid var(--ui-color-focus)",
+                "outline-offset": "2px",
+                "border-radius": "var(--ui-radius-sm)"
+              },
+              "text": "--ui-color-focus: Focus rings"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Status Colors",
+      "description": "Use for feedback, alerts, and validation.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-success); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-success" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-warning); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-warning" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-danger); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-danger" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Primary Scale",
+      "description": "Brand color with light and dark variants.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-light); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-primary-light" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-primary" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-dark); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-primary-dark" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Neutral Scale",
+      "description": "Gray scale for text, backgrounds, and borders. Derived from primary hue for subtle warmth.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "attrs": { "style": "flex-wrap: wrap" },
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-50); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-100); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-200); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-300); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-400); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-500); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-600); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-700); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-800); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-900); border-radius: var(--ui-radius-sm)"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "50 → 100 → 200 → 300 → 400 → 500 → 600 → 700 → 800 → 900"
+        }
+      ]
+    }
+  ]
+}

package/src/config/tokens/colors/index.scss ADDED Viewed

@@ -0,0 +1,28 @@
+@layer tokens {
+  :root {
+    // Base colors - override these to customize the design system
+    --ui-color-primary: oklch(55% 0.22 250);
+    --ui-color-success: oklch(60% 0.18 145);
+    --ui-color-warning: oklch(75% 0.18 70);
+    --ui-color-danger: oklch(60% 0.22 25);
+    --ui-color-neutral: oklch(50% 0.02 250);
+    // Primary shades - auto-generated via color-mix
+    --ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);
+    --ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);
+    --ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);
+    --ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);
+    // Neutral scale - auto-generated via color-mix
+    --ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);
+    --ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);
+    --ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);
+    --ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);
+    --ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);
+    --ui-color-neutral-500: var(--ui-color-neutral);
+    --ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);
+    --ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);
+    --ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);
+    --ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black);
+  }
+}

package/src/{00-config → config}/tokens/grid/grid.docs.json RENAMED Viewed

@@ -8,7 +8,7 @@
     {
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",

package/src/config/tokens/grid/index.scss ADDED Viewed

@@ -0,0 +1,13 @@
+@layer tokens {
+  :root {
+    --ui-unit: 8px; // 8px
+    --ui-row: calc(var(--ui-unit) * 2);
+    --ui-row-1: var(--ui-row);
+    --ui-row-2: calc(var(--ui-row) * 2);
+    --ui-row-3: calc(var(--ui-row) * 3);
+    --ui-row-4: calc(var(--ui-row) * 4);
+    --ui-row-5: calc(var(--ui-row) * 5);
+    --ui-row-6: calc(var(--ui-row) * 6);
+  }
+}

package/src/config/tokens/radius/index.scss ADDED Viewed

@@ -0,0 +1,9 @@
+@layer tokens {
+  :root {
+    // Radius - derived from --unit (8px)
+    --ui-radius-sm: calc(var(--ui-unit) * 0.5); // 4px
+    --ui-radius-md: var(--ui-unit); // 8px
+    --ui-radius-lg: calc(var(--ui-unit) * 2); // 16px
+    --ui-radius-full: 9999px;
+  }
+}

package/src/config/tokens/semantic/colors/index.scss ADDED Viewed

@@ -0,0 +1,67 @@
+@layer tokens {
+  :root {
+    --ui-color-text: var(--ui-color-neutral-900);
+    --ui-color-text-muted: var(--ui-color-neutral-500);
+    --ui-color-text-inverse: var(--ui-color-neutral-50);
+    --ui-color-bg: var(--ui-color-neutral-50);
+    --ui-color-bg-subtle: var(--ui-color-neutral-100);
+    --ui-color-bg-muted: var(--ui-color-neutral-200);
+    --ui-color-border: var(--ui-color-neutral-200);
+    --ui-color-border-strong: var(--ui-color-neutral-300);
+    --ui-color-interactive: var(--ui-color-primary);
+    --ui-color-interactive-hover: var(--ui-color-primary-dark);
+    --ui-color-focus: var(--ui-color-primary-light);
+    // State opacity
+    --ui-opacity-disabled: 0.5;
+    --ui-opacity-loading: 0.7;
+    // Overlay backgrounds
+    --ui-overlay-bg: rgb(0 0 0 / 0.5);
+    --ui-overlay-bg-light: rgb(255 255 255 / 0.7);
+    --ui-overlay-bg-blur: rgb(0 0 0 / 0.3);
+    --ui-overlay-bg-subtle: rgb(0 0 0 / 0.1);
+  }
+}
+@layer themes {
+  [data-theme="dark"] {
+    --ui-color-text: var(--ui-color-neutral-100);
+    --ui-color-text-muted: var(--ui-color-neutral-400);
+    --ui-color-text-inverse: var(--ui-color-neutral-900);
+    --ui-color-bg: var(--ui-color-neutral-900);
+    --ui-color-bg-subtle: var(--ui-color-neutral-800);
+    --ui-color-bg-muted: var(--ui-color-neutral-700);
+    --ui-color-border: var(--ui-color-neutral-700);
+    --ui-color-border-strong: var(--ui-color-neutral-600);
+  }
+  // Auto-detect system dark mode when no explicit data-theme is set
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+      --ui-color-text: var(--ui-color-neutral-100);
+      --ui-color-text-muted: var(--ui-color-neutral-400);
+      --ui-color-text-inverse: var(--ui-color-neutral-900);
+      --ui-color-bg: var(--ui-color-neutral-900);
+      --ui-color-bg-subtle: var(--ui-color-neutral-800);
+      --ui-color-bg-muted: var(--ui-color-neutral-700);
+      --ui-color-border: var(--ui-color-neutral-700);
+      --ui-color-border-strong: var(--ui-color-neutral-600);
+    }
+  }
+  // Windows high contrast mode
+  @media (forced-colors: active) {
+    :root {
+      --ui-color-focus: Highlight;
+    }
+  }
+}

package/src/config/tokens/semantic/spacing/index.scss ADDED Viewed

@@ -0,0 +1,12 @@
+@layer tokens {
+  :root {
+    --ui-spacing-xs: var(--ui-space-1);
+    --ui-spacing-sm: var(--ui-space-2);
+    --ui-spacing-md: var(--ui-space-4);
+    --ui-spacing-lg: var(--ui-space-6);
+    --ui-spacing-xl: var(--ui-space-8);
+    --ui-spacing-gutter: var(--ui-space-4);
+    --ui-spacing-section: var(--ui-space-8);
+  }
+}

package/src/config/tokens/shadows/index.scss ADDED Viewed

@@ -0,0 +1,7 @@
+@layer tokens {
+  :root {
+    --ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.05);
+    --ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.1);
+    --ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.15);
+  }
+}

package/src/config/tokens/spacing/index.scss ADDED Viewed

@@ -0,0 +1,17 @@
+@layer tokens {
+  :root {
+    // Micro spacing
+    --ui-space-px: calc(var(--ui-unit) * 0.125); // 1px
+    --ui-space-quarter: calc(var(--ui-unit) * 0.25); // 2px
+    --ui-space-half: calc(var(--ui-unit) * 0.5); // 4px
+    --ui-space-0: calc(var(--ui-unit) * 0.5); // 4px (alias)
+    // Standard spacing
+    --ui-space-1: var(--ui-unit); // 8px
+    --ui-space-2: calc(var(--ui-unit) * 2); // 16px
+    --ui-space-3: calc(var(--ui-unit) * 3); // 24px
+    --ui-space-4: calc(var(--ui-unit) * 4); // 32px
+    --ui-space-6: calc(var(--ui-unit) * 6); // 48px
+    --ui-space-8: calc(var(--ui-unit) * 8); // 64px
+  }
+}

package/src/{00-config → config}/tokens/spacing/spacing.docs.json RENAMED Viewed

@@ -8,11 +8,11 @@
     {
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--xs",
+              "class": "ui-column ui-column--xs",
               "style": { "align-items": "center" },
               "children": [
                 {
@@ -28,7 +28,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--xs",
+              "class": "ui-column ui-column--xs",
               "style": { "align-items": "center" },
               "children": [
                 {
@@ -44,7 +44,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--xs",
+              "class": "ui-column ui-column--xs",
               "style": { "align-items": "center" },
               "children": [
                 {
@@ -60,7 +60,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--xs",
+              "class": "ui-column ui-column--xs",
               "style": { "align-items": "center" },
               "children": [
                 {
@@ -76,7 +76,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--xs",
+              "class": "ui-column ui-column--xs",
               "style": { "align-items": "center" },
               "children": [
                 {
@@ -92,7 +92,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--xs",
+              "class": "ui-column ui-column--xs",
               "style": { "align-items": "center" },
               "children": [
                 {