@stainless-api/ui-primitives 0.1.0-beta.9 → 1.0.0-beta.55

package/dist/styles.css

@@ -0,0 +1,1184 @@
+@layer stl-ui.tokens {
+  :root {
+    --stl-typography-font: "Geist", system-ui, sans-serif;
+    --stl-typography-font-mono: "Geist Mono", ui-monospace, monospace;
+    --stl-typography-font-heading: var(--stl-typography-font);
+    --stl-typography-line-height: 1.5;
+    --stl-typography-line-height-heading: 1.2;
+    --stl-typography-text-body: var(--stl-typography-scale-base);
+    --stl-typography-text-body-sm: var(--stl-typography-scale-sm);
+    --stl-typography-text-body-xs: var(--stl-typography-scale-xs);
+    --stl-typography-text-code: max(.875em, var(--stl-typography-scale-xs));
+    --stl-typography-text-h1: var(--stl-typography-scale-5xl);
+    --stl-typography-text-h2: var(--stl-typography-scale-4xl);
+    --stl-typography-text-h3: var(--stl-typography-scale-3xl);
+    --stl-typography-text-h4: var(--stl-typography-scale-2xl);
+    --stl-typography-text-h5: var(--stl-typography-scale-xl);
+    --stl-typography-scale-xs: 12px;
+    --stl-typography-scale-sm: 14px;
+    --stl-typography-scale-base: 16px;
+    --stl-typography-scale-lg: 18px;
+    --stl-typography-scale-xl: 20px;
+    --stl-typography-scale-2xl: 24px;
+    --stl-typography-scale-3xl: 29px;
+    --stl-typography-scale-4xl: 35px;
+    --stl-typography-scale-5xl: 42px;
+    --stl-typography-scale-6xl: 64px;
+    --stl-color-text-selection-foreground: /* unset by default; text colors are unchanged */;
+    --stl-color-text-selection-background: light-dark(rgb(from var(--stl-color-text-selection) r g b / calc(alpha * .15)), rgb(from var(--stl-color-text-selection) r g b / calc(alpha * .35)));
+    --stl-ui-layout-border-radius-xs: 4px;
+    --stl-ui-layout-border-radius-sml: 8px;
+    --stl-ui-layout-border-radius: 12px;
+    --stl-ui-layout-border-radius-med: 16px;
+    --stl-ui-layout-border-radius-max: 100vmax;
+    --stl-ui-left-content-indent: 24px;
+    --stl-ui-page-padding-inline: 20px;
+    --stl-opacity-level-080: .8;
+    --stl-opacity-level-040: .4;
+    --stl-opacity-level-016: .16;
+    --stl-opacity-level-008: .08;
+    --stl-opacity-level-004: .04;
+    --stl-color-background: light-dark(#fff, #0a0a0a);
+    --stl-color-background-hover: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))));
+    --stl-color-muted-background: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-muted-background-hover: rgb(from var(--stl-color-muted-background) r g b/calc(alpha * 2));
+    --stl-color-faint-background: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)));
+    --stl-color-faint-background-hover: rgb(from var(--stl-color-faint-background) r g b/calc(alpha * 2));
+    --stl-color-ui-background: light-dark(var(--stl-color-background), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))));
+    --stl-color-ui-background-hover: light-dark(var(--stl-color-background-hover), rgb(from var(--stl-color-ui-background) r g b/calc(alpha * 2)));
+    --stl-color-foreground: light-dark(#262626, #f5f5f5);
+    --stl-color-foreground-reduced: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-foreground-muted: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-inverse-background: var(--stl-color-foreground);
+    --stl-color-inverse-background-hover: rgb(from var(--stl-color-inverse-background) r g b/calc(alpha * .9));
+    --stl-color-inverse-foreground: var(--stl-color-background);
+    --stl-color-border: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016)));
+    --stl-color-border-faint: rgb(from var(--stl-color-border) r g b/calc(alpha * .5));
+    --stl-color-border-strong: rgb(from var(--stl-color-border) r g b/calc(alpha * 2.5));
+    --stl-color-accent: light-dark(#155dfc, #2b7fff);
+    --stl-color-accent-foreground: var(--stl-color-accent);
+    --stl-color-accent-foreground-reduced: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-accent-foreground-muted: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-accent-muted-background: light-dark(rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-accent-muted-background-hover: rgb(from var(--stl-color-accent-muted-background) r g b/calc(alpha * 2));
+    --stl-color-accent-border: light-dark(rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-accent) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-accent-border-faint: rgb(from var(--stl-color-accent-border) r g b/calc(alpha * .5));
+    --stl-color-accent-border-strong: var(--stl-color-accent);
+    --stl-color-accent-inverse-background: var(--stl-color-accent);
+    --stl-color-accent-inverse-background-hover: rgb(from var(--stl-color-accent-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-accent-inverse-foreground: #fff;
+    --stl-color-red: light-dark(#d01e22, #e34041);
+    --stl-color-red-foreground: var(--stl-color-red);
+    --stl-color-red-foreground-reduced: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-red-foreground-muted: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-red-muted-background: light-dark(rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-red-muted-background-hover: rgb(from var(--stl-color-red-muted-background) r g b/calc(alpha * 2));
+    --stl-color-red-border: light-dark(rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-red) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-red-border-faint: rgb(from var(--stl-color-red-border) r g b/calc(alpha * .5));
+    --stl-color-red-border-strong: var(--stl-color-red);
+    --stl-color-red-inverse-background: var(--stl-color-red);
+    --stl-color-red-inverse-background-hover: rgb(from var(--stl-color-red-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-red-inverse-foreground: #fff;
+    --stl-color-green: light-dark(#16a34a, #22c55e);
+    --stl-color-green-foreground: var(--stl-color-green);
+    --stl-color-green-foreground-reduced: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-green-foreground-muted: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-green-muted-background: light-dark(rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-green-muted-background-hover: rgb(from var(--stl-color-green-muted-background) r g b/calc(alpha * 2));
+    --stl-color-green-border: light-dark(rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-green) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-green-border-faint: rgb(from var(--stl-color-green-border) r g b/calc(alpha * .5));
+    --stl-color-green-border-strong: var(--stl-color-green);
+    --stl-color-green-inverse-background: var(--stl-color-green);
+    --stl-color-green-inverse-background-hover: rgb(from var(--stl-color-green-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-green-inverse-foreground: #fff;
+    --stl-color-blue: light-dark(#155dfc, #2b7fff);
+    --stl-color-blue-foreground: var(--stl-color-blue);
+    --stl-color-blue-foreground-reduced: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-blue-foreground-muted: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-blue-muted-background: light-dark(rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-blue-muted-background-hover: rgb(from var(--stl-color-blue-muted-background) r g b/calc(alpha * 2));
+    --stl-color-blue-border: light-dark(rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-blue) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-blue-border-faint: rgb(from var(--stl-color-blue-border) r g b/calc(alpha * .5));
+    --stl-color-blue-border-strong: var(--stl-color-blue);
+    --stl-color-blue-inverse-background: var(--stl-color-blue);
+    --stl-color-blue-inverse-background-hover: rgb(from var(--stl-color-blue-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-blue-inverse-foreground: #fff;
+    --stl-color-yellow: light-dark(#ca8a04, #eab308);
+    --stl-color-yellow-foreground: var(--stl-color-yellow);
+    --stl-color-yellow-foreground-reduced: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-foreground-muted: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-yellow-muted-background: light-dark(rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-yellow-muted-background-hover: rgb(from var(--stl-color-yellow-muted-background) r g b/calc(alpha * 2));
+    --stl-color-yellow-border: light-dark(rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-yellow) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-yellow-border-faint: rgb(from var(--stl-color-yellow-border) r g b/calc(alpha * .5));
+    --stl-color-yellow-border-strong: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background-hover: rgb(from var(--stl-color-yellow-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-inverse-foreground: #fff;
+    --stl-color-orange: light-dark(#ea580c, #f97316);
+    --stl-color-orange-foreground: var(--stl-color-orange);
+    --stl-color-orange-foreground-reduced: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-orange-foreground-muted: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-orange-muted-background: light-dark(rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-orange-muted-background-hover: rgb(from var(--stl-color-orange-muted-background) r g b/calc(alpha * 2));
+    --stl-color-orange-border: light-dark(rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-orange) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-orange-border-faint: rgb(from var(--stl-color-orange-border) r g b/calc(alpha * .5));
+    --stl-color-orange-border-strong: var(--stl-color-orange);
+    --stl-color-orange-inverse-background: var(--stl-color-orange);
+    --stl-color-orange-inverse-background-hover: rgb(from var(--stl-color-orange-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-orange-inverse-foreground: #fff;
+    --stl-color-purple: light-dark(#9333ea, #a855f7);
+    --stl-color-purple-foreground: var(--stl-color-purple);
+    --stl-color-purple-foreground-reduced: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-purple-foreground-muted: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-purple-muted-background: light-dark(rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-purple-muted-background-hover: rgb(from var(--stl-color-purple-muted-background) r g b/calc(alpha * 2));
+    --stl-color-purple-border: light-dark(rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-purple) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-purple-border-faint: rgb(from var(--stl-color-purple-border) r g b/calc(alpha * .5));
+    --stl-color-purple-border-strong: var(--stl-color-purple);
+    --stl-color-purple-inverse-background: var(--stl-color-purple);
+    --stl-color-purple-inverse-background-hover: rgb(from var(--stl-color-purple-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-purple-inverse-foreground: #fff;
+    --stl-color-cyan: light-dark(#0891b2, #06b6d4);
+    --stl-color-cyan-foreground: var(--stl-color-cyan);
+    --stl-color-cyan-foreground-reduced: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-cyan-foreground-muted: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-cyan-muted-background: light-dark(rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-cyan-muted-background-hover: rgb(from var(--stl-color-cyan-muted-background) r g b/calc(alpha * 2));
+    --stl-color-cyan-border: light-dark(rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-cyan) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-cyan-border-faint: rgb(from var(--stl-color-cyan-border) r g b/calc(alpha * .5));
+    --stl-color-cyan-border-strong: var(--stl-color-cyan);
+    --stl-color-cyan-inverse-background: var(--stl-color-cyan);
+    --stl-color-cyan-inverse-background-hover: rgb(from var(--stl-color-cyan-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-cyan-inverse-foreground: #fff;
+    --stl-color-pink: light-dark(#ec4899, #ec4899);
+    --stl-color-pink-foreground: var(--stl-color-pink);
+    --stl-color-pink-foreground-reduced: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-pink-foreground-muted: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-pink-muted-background: light-dark(rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-pink-muted-background-hover: rgb(from var(--stl-color-pink-muted-background) r g b/calc(alpha * 2));
+    --stl-color-pink-border: light-dark(rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-pink) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-pink-border-faint: rgb(from var(--stl-color-pink-border) r g b/calc(alpha * .5));
+    --stl-color-pink-border-strong: var(--stl-color-pink);
+    --stl-color-pink-inverse-background: var(--stl-color-pink);
+    --stl-color-pink-inverse-background-hover: rgb(from var(--stl-color-pink-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-pink-inverse-foreground: #fff;
+  }
+
+  :root[data-theme="dark"], .stl-theme-dark {
+    color-scheme: dark;
+    background: var(--stl-color-background);
+    color: var(--stl-color-foreground);
+  }
+
+  :root[data-theme="light"], .stl-theme-light {
+    color-scheme: light;
+    background: var(--stl-color-background);
+    color: var(--stl-color-foreground);
+  }
+
+  :root {
+    --stl-color-link-foreground: var(--stl-color-accent-foreground);
+    --stl-color-text-selection: var(--stl-color-accent-inverse-background);
+  }
+}
+
+body {
+  font-family: var(--stl-typography-font);
+}
+
+@scope (.stl-ui-prose) to (.stl-ui-not-prose) {
+  :scope {
+    letter-spacing: -.01em;
+    font-weight: 400;
+    line-height: var(--stl-typography-line-height);
+    font-size: var(--stl-typography-text-body);
+    color: var(--stl-color-foreground-reduced);
+
+    &.small {
+      font-size: var(--stl-typography-scale-sm);
+      letter-spacing: normal;
+    }
+  }
+
+  :where(strong) {
+    color: rgb(from currentColor r g b / 1);
+  }
+
+  :where(a) {
+    color: var(--stl-color-link-foreground);
+    text-decoration-color: rgb(from currentColor r g b / calc(alpha * var(--stl-opacity-level-040)));
+    transition: text-decoration-color .1s ease-out;
+
+    &:hover {
+      text-decoration-color: currentColor;
+    }
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--stl-color-foreground);
+    font-weight: 500;
+    line-height: var(--stl-typography-line-height-heading);
+    font-family: var(--stl-typography-font-heading);
+    text-wrap: pretty;
+  }
+
+  :where(h1, h2, h3) {
+    text-wrap: balance;
+  }
+
+  :where(h1) {
+    font-size: var(--stl-typography-text-h1);
+    letter-spacing: -.03em;
+    margin-top: 1.5em;
+  }
+
+  :where(h2) {
+    font-size: var(--stl-typography-text-h2);
+    letter-spacing: -.03em;
+    margin-top: 1.35em;
+  }
+
+  :where(h3) {
+    font-size: var(--stl-typography-text-h3);
+    letter-spacing: -.02em;
+    margin-top: 1.35em;
+  }
+
+  :where(h4) {
+    font-size: var(--stl-typography-text-h4);
+    letter-spacing: -.02em;
+    margin-top: 1.35em;
+  }
+
+  :where(h5) {
+    font-size: var(--stl-typography-text-h5);
+    letter-spacing: -.02em;
+    margin-top: 1.2em;
+  }
+
+  :scope.smaller-headings {
+    --stl-typography-text-h1: var(--stl-typography-scale-3xl);
+    --stl-typography-text-h2: var(--stl-typography-scale-2xl);
+    --stl-typography-text-h3: var(--stl-typography-scale-xl);
+    --stl-typography-text-h4: var(--stl-typography-scale-lg);
+    --stl-typography-text-h5: var(--stl-typography-scale-base);
+
+    & :where(h1) {
+      margin-top: 1.5em;
+    }
+
+    & :where(h2, h3, h4) {
+      margin-top: 1.25em;
+    }
+
+    & :where(h5) {
+      margin-top: 1em;
+    }
+  }
+
+  :where(ol, ul) {
+    padding-left: 26px;
+  }
+
+  :where(li + li) {
+    margin-block-start: 8px;
+  }
+
+  :where(code) {
+    font-family: var(--stl-typography-font-mono);
+    font-feature-settings: "ss01" on,
+      "ss03" on,
+      "ss04" on,
+      "ss06" on;
+    font-size: var(--stl-typography-text-code);
+    font-weight: inherit;
+    letter-spacing: normal;
+    white-space: pre;
+  }
+
+  &:where(code:not(pre > code)) {
+    color: var(--stl-color-foreground);
+    background-color: rgb(from var(--stl-color-foreground) r g b / .1);
+    border-radius: .2em;
+    padding: 0 .2em;
+  }
+
+  :where(pre:not(.expressive-code *)) {
+    border-radius: var(--stl-ui-layout-border-radius-sml);
+    border: 1px solid var(--stl-color-border);
+    background-color: var(--stl-color-faint-background);
+    margin-bottom: 1rem;
+    padding: 12px 20px;
+    overflow: auto;
+  }
+
+  :where(ol, ul, aside, img, figure, details) {
+    margin-top: 16px;
+  }
+}
+
+:where(:is(.stl-ui-prose, .stl-ui-prose > .sl-markdown-content) > :not(:first-child)) {
+  margin-top: 16px;
+}
+
+:where(.stl-ui-not-prose) {
+  letter-spacing: initial;
+  font-weight: initial;
+  line-height: initial;
+  font-size: initial;
+  color: initial;
+}
+
+@layer starlight.content {
+  .stl-ui-prose .sl-markdown-content {
+    & a, & a:hover {
+      color: revert-layer;
+    }
+  }
+
+  .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
+    & details, & summary, & summary:before, & summary::marker {
+      all: revert-layer;
+    }
+  }
+}
+
+::selection {
+  background-color: var(--stl-color-text-selection-background);
+  color: var(--stl-color-text-selection-foreground);
+}
+
+.stl-ui-button {
+  border-radius: var(--stl-ui-layout-border-radius-sml);
+  height: 32px;
+  font-weight: 500;
+  line-height: 150%;
+  font-size: var(--stl-typography-text-body-sm);
+  font-family: var(--stl-typography-font);
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--stl-color-inverse-foreground);
+  background-color: var(--stl-color-inverse-background);
+  border: 1px solid #0000;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  padding: 8px 10px;
+  display: inline-flex;
+
+  &:hover {
+    background-color: var(--stl-color-inverse-background-hover);
+  }
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.stl-ui-button--accent {
+  color: var(--stl-color-accent-inverse-foreground);
+  background-color: var(--stl-color-accent-inverse-background);
+
+  &:hover {
+    background-color: var(--stl-color-accent-inverse-background-hover);
+  }
+}
+
+.stl-ui-button--accent-muted {
+  color: var(--stl-color-accent-foreground);
+  background-color: var(--stl-color-accent-muted-background);
+
+  &:hover {
+    background-color: var(--stl-color-accent-muted-background-hover);
+  }
+
+  &.stl-ui-button--with-border {
+    border-color: var(--stl-color-accent-border);
+  }
+}
+
+.stl-ui-button--muted {
+  color: var(--stl-color-foreground);
+  background-color: var(--stl-color-muted-background);
+
+  &:hover {
+    background-color: var(--stl-color-muted-background-hover);
+  }
+
+  &.stl-ui-button--with-border {
+    border-color: var(--stl-color-border);
+  }
+}
+
+.stl-ui-button--outline {
+  color: var(--stl-color-foreground);
+  background-color: var(--stl-color-ui-background);
+  border-color: var(--stl-color-border);
+
+  &:hover {
+    background: linear-gradient(var(--stl-color-ui-background-hover), var(--stl-color-ui-background-hover)),
+      linear-gradient(var(--stl-color-ui-background), var(--stl-color-ui-background));
+  }
+}
+
+.stl-ui-button--ghost {
+  color: var(--stl-color-foreground);
+  background-color: #0000;
+
+  &:hover {
+    background-color: var(--stl-color-background-hover);
+  }
+
+  &.stl-ui-button--with-border {
+    border-color: var(--stl-color-border);
+  }
+}
+
+.stl-ui-button--success {
+  color: var(--stl-color-green-inverse-foreground);
+  background-color: var(--stl-color-green-inverse-background);
+
+  &:hover {
+    background-color: var(--stl-color-green-inverse-background-hover);
+  }
+}
+
+.stl-ui-button--destructive {
+  color: var(--stl-color-red-inverse-foreground);
+  background-color: var(--stl-color-red-inverse-background);
+
+  &:hover {
+    background-color: var(--stl-color-red-inverse-background-hover);
+  }
+}
+
+.stl-ui-button--loading {
+  -webkit-text-fill-color: transparent;
+  position: relative;
+
+  & * {
+    color: #0000;
+  }
+
+  &:before {
+    content: "";
+    background: currentColor;
+    width: 16px;
+    height: 16px;
+    animation: 1s linear infinite stl-ui-button--loading-spin;
+    position: absolute;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvYWRlci1jaXJjbGUtaWNvbiBsdWNpZGUtbG9hZGVyLWNpcmNsZSI+PHBhdGggZD0iTTIxIDEyYTkgOSAwIDEgMS02LjIxOS04LjU2Ii8+PC9zdmc+");
+    mask-position: center;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+  }
+}
+
+@keyframes stl-ui-button--loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.stl-ui-button--size-sm {
+  border-radius: var(--stl-ui-layout-border-radius-xs);
+  height: 24px;
+  font-weight: 500;
+  line-height: 100%;
+  font-size: var(--stl-typography-text-body-xs);
+  padding: 0 6px;
+}
+
+.stl-ui-button--size-lg {
+  border-radius: var(--stl-ui-layout-border-radius);
+  height: 40px;
+  font-weight: 500;
+  line-height: 150%;
+  font-size: var(--stl-typography-text-body);
+  padding: 8px 14px;
+}
+
+.stl-ui-button__icon {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  & svg {
+    margin-top: 0;
+  }
+}
+
+.stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
+  margin-left: -4px;
+  margin-right: 4px;
+}
+
+.stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
+  margin-left: 4px;
+  margin-right: -4px;
+
+  &:first-child {
+    margin-left: -4px;
+    margin-right: 4px;
+  }
+}
+
+.stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(.stl-ui-button__icon:first-child) {
+  aspect-ratio: 1;
+
+  & .stl-ui-button__icon {
+    margin-left: -4px;
+    margin-right: -4px;
+  }
+}
+
+a.stl-ui-button {
+  text-align: center;
+  text-decoration: none;
+}
+
+.stl-ui-dropdown {
+  --stl-ui-dropdown-button-color: var(--stl-color-foreground);
+  --stl-ui-dropdown-button-background-color: var(--stl-color-ui-background);
+  --stl-ui-dropdown-button-border-color: var(--stl-color-border);
+  --stl-ui-dropdown-button-border-radius: var(--stl-ui-layout-border-radius-sml);
+  --stl-ui-dropdown-button-font-size: var(--stl-typography-scale-sm);
+  --stl-ui-dropdown-button-height: 2rem;
+  --stl-ui-dropdown-button-padding-inline: calc(.75rem - 1px);
+  --stl-ui-dropdown-button-line-height: 100%;
+  --stl-ui-dropdown-button-font-weight: 500;
+  color: var(--stl-ui-dropdown-button-color);
+  font-size: var(--stl-ui-dropdown-button-font-size);
+  align-items: center;
+  gap: 0;
+  display: inline-flex;
+  position: relative;
+
+  & hr {
+    --stl-ui-dropdown-button__divider-height: 1px;
+    --stl-ui-dropdown-button__divider-color: var(--stl-color-border);
+    height: var(--stl-ui-dropdown-button__divider-height);
+    background-color: var(--stl-ui-dropdown-button__divider-color);
+    border: none;
+    width: calc(100% + 8px);
+    margin: 4px 0;
+    transform: translateX(-4px);
+  }
+
+  & .stl-ui-dropdown__button {
+    background-color: var(--stl-ui-dropdown-button-background-color);
+    border: 1px solid var(--stl-ui-dropdown-button-border-color);
+    border-radius: var(--stl-ui-dropdown-button-border-radius);
+    height: var(--stl-ui-dropdown-button-height);
+    padding-inline: var(--stl-ui-dropdown-button-padding-inline);
+    line-height: var(--stl-ui-dropdown-button-line-height);
+    font-weight: var(--stl-ui-dropdown-button-font-weight);
+    cursor: pointer;
+    color: inherit;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+
+    &:focus {
+      outline: 1px auto highlight;
+    }
+
+    &:hover {
+      background-color: var(--stl-color-ui-background-hover);
+    }
+
+    & .stl-ui-dropdown__trigger-icon {
+      justify-content: center;
+      align-items: center;
+      margin-left: 4px;
+      margin-right: -4px;
+      display: flex;
+    }
+  }
+
+  & .stl-ui-dropdown__icon {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+
+    & svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  & .stl-ui-dropdown-button--action {
+    border-right-width: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    align-items: center;
+    gap: 8px;
+    display: flex;
+
+    &:hover {
+      background-color: var(--stl-color-ui-background-hover);
+      z-index: 1;
+      border-right-width: 1px;
+
+      & + .stl-ui-dropdown-button__trigger {
+        border-left-width: 0;
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      background-color: var(--stl-color-ui-background);
+    }
+  }
+
+  & .stl-ui-dropdown-button__trigger {
+    border-radius: 0;
+    border-top-right-radius: var(--stl-ui-dropdown-button-border-radius);
+    border-bottom-right-radius: var(--stl-ui-dropdown-button-border-radius);
+
+    &:hover {
+      background-color: var(--stl-color-ui-background-hover);
+    }
+  }
+
+  & .stl-ui-dropdown__trigger-selected {
+    align-items: center;
+    gap: 8px;
+    display: flex;
+  }
+
+  & .stl-ui-dropdown-menu {
+    --stl-ui-dropdown-menu-background-color: var(--stl-color-ui-background);
+    --stl-ui-dropdown-menu-border-color: var(--stl-color-border);
+    --stl-ui-dropdown-menu-box-shadow: 0px 4px 4px -2px #00000014;
+    --stl-ui-dropdown-menu-border-radius: var(--stl-ui-layout-border-radius-sml);
+    background-color: var(--stl-color-background);
+    background-image: linear-gradient(to right,
+      var(--stl-ui-dropdown-menu-background-color),
+      var(--stl-ui-dropdown-menu-background-color));
+    border: 1px solid var(--stl-ui-dropdown-menu-border-color);
+    box-shadow: var(--stl-ui-dropdown-menu-box-shadow);
+    border-radius: var(--stl-ui-dropdown-menu-border-radius);
+    z-index: 1000;
+    width: max-content;
+    min-width: 100%;
+    padding: 4px;
+    display: none;
+    position: absolute;
+    right: 0;
+
+    &.stl-ui-dropdown-menu--above {
+      margin-bottom: 4px;
+      top: auto;
+      bottom: 100%;
+    }
+
+    &.stl-ui-dropdown-menu--below {
+      margin-top: 4px;
+      top: 100%;
+      bottom: auto;
+    }
+
+    &[data-state="open"] {
+      display: block;
+    }
+
+    & .stl-ui-dropdown-menu__item {
+      --stl-ui-dropdown-menu__item-border-radius: var(--stl-ui-dropdown-button-border-radius);
+      --stl-ui-dropdown-menu__item-height: var(--stl-ui-dropdown-button-height);
+      --stl-ui-dropdown-menu__item-line-height: var(--stl-ui-dropdown-button-line-height);
+      --stl-ui-dropdown-menu__item-hover-background-color: var(--stl-color-ui-background-hover);
+      border-radius: var(--stl-ui-dropdown-menu__item-border-radius);
+      height: var(--stl-ui-dropdown-menu__item-height);
+      line-height: var(--stl-ui-dropdown-menu__item-line-height);
+      cursor: pointer;
+      background: none;
+      border: none;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+      width: 100%;
+      padding: 8px;
+      display: flex;
+
+      &:hover, &:focus-visible {
+        background-color: var(--stl-ui-dropdown-menu__item-hover-background-color);
+      }
+
+      &:hover, &:focus-visible, &:focus {
+        color: var(--stl-color-foreground);
+      }
+
+      &.stl-ui-dropdown-menu__item-link {
+        justify-content: space-between;
+        align-items: center;
+        gap: 16px;
+        width: 100%;
+        display: flex;
+
+        &:hover {
+          color: var(--stl-color-foreground);
+        }
+      }
+
+      & .stl-ui-dropdown-menu__item-icon {
+        display: flex;
+      }
+
+      & .stl-ui-dropdown-menu__item-content {
+        align-items: center;
+        gap: 8px;
+        display: flex;
+      }
+
+      & .stl-ui-dropdown-menu__item-text {
+        white-space: nowrap;
+      }
+
+      & .stl-ui-dropdown-menu__item-text--subtle {
+        color: var(--stl-color-foreground-muted);
+      }
+
+      & strong {
+        color: var(--stl-color-foreground);
+        font-weight: 500;
+      }
+
+      & .stl-ui-dropdown-menu__item-subtle-icon {
+        --stl-ui-dropdown-menu__item-subtle-icon-color: rgb(from var(--stl-color-foreground) r g b / .25);
+
+        & svg {
+          color: var(--stl-ui-dropdown-menu__item-subtle-icon-color);
+        }
+      }
+    }
+  }
+}
+
+.stl-ui-callout {
+  --stl-ui-callout-background-color: var(--stl-color-faint-background);
+  --stl-ui-callout-border-color: var(--stl-color-border);
+  --stl-ui-callout-accent-color: var(--stl-color-foreground);
+  border: 1px solid var(--stl-ui-callout-border-color);
+  background-color: var(--stl-ui-callout-background-color);
+  border-radius: var(--stl-ui-layout-border-radius);
+  line-height: var(--stl-typography-line-height);
+  font-weight: 400;
+  font-size: var(--stl-typography-text-body);
+  color: var(--stl-color-foreground);
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  display: flex;
+
+  & :where(a, strong) {
+    color: var(--stl-ui-callout-strong-color, var(--stl-ui-callout-accent-color));
+  }
+
+  & :where(a) {
+    text-decoration-color: rgba(from currentColor r g b / .4);
+    transition: text-decoration-color .1s;
+
+    &:hover {
+      text-decoration-color: rgba(from currentColor r g b / .8);
+    }
+  }
+
+  & ::selection {
+    background-color: light-dark(rgb(from var(--stl-ui-callout-background-color) r g b / .2), rgb(from var(--stl-ui-callout-background-color) r g b / .35));
+    color: var(--stl-color-foreground);
+  }
+}
+
+.stl-ui-callout--info {
+  --stl-ui-callout-background-color: var(--stl-color-faint-background);
+  --stl-ui-callout-border-color: var(--stl-color-border);
+  --stl-ui-callout-accent-color: var(--stl-color-foreground-reduced);
+  --stl-ui-callout-strong-color: var(--stl-color-foreground);
+}
+
+.stl-ui-callout--note {
+  --stl-ui-callout-background-color: var(--stl-color-blue-muted-background);
+  --stl-ui-callout-border-color: var(--stl-color-blue-border);
+  --stl-ui-callout-accent-color: var(--stl-color-blue-foreground);
+}
+
+.stl-ui-callout--tip {
+  --stl-ui-callout-background-color: var(--stl-color-purple-muted-background);
+  --stl-ui-callout-border-color: var(--stl-color-purple-border);
+  --stl-ui-callout-accent-color: var(--stl-color-purple-foreground);
+}
+
+.stl-ui-callout--success {
+  --stl-ui-callout-background-color: var(--stl-color-green-muted-background);
+  --stl-ui-callout-border-color: var(--stl-color-green-border);
+  --stl-ui-callout-accent-color: var(--stl-color-green-foreground);
+}
+
+.stl-ui-callout--warning {
+  --stl-ui-callout-background-color: var(--stl-color-yellow-muted-background);
+  --stl-ui-callout-border-color: var(--stl-color-yellow-border);
+  --stl-ui-callout-accent-color: var(--stl-color-yellow-foreground);
+}
+
+.stl-ui-callout--danger {
+  --stl-ui-callout-background-color: var(--stl-color-red-muted-background);
+  --stl-ui-callout-border-color: var(--stl-color-red-border);
+  --stl-ui-callout-accent-color: var(--stl-color-red-foreground);
+}
+
+.stl-ui-callout__icon {
+  color: var(--stl-ui-callout-accent-color);
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  margin: calc(.5lh - .5em);
+}
+
+.stl-ui-callout__content {
+  flex: 1;
+  margin-top: 0;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+}
+
+.stl-ui-accordion {
+  --stl-ui-accordion-padding: 12px;
+  --stl-ui-accordion-content-padding-bottom: 4px;
+  --stl-ui-accordion-marker-size: 1em;
+  --stl-ui-accordion-marker-margin: calc((1lh - var(--stl-ui-accordion-marker-size)) / 2);
+  --stl-ui-accordion-marker-color: var(--stl-color-border-strong);
+  --stl-ui-accordion-row-gap: 8px;
+  --stl-ui-accordion-summary-column-gap: 8px;
+  --stl-ui-accordion-border-radius: var(--stl-ui-layout-border-radius);
+  --stl-ui--internal--accordion-padding-start: calc(var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-marker-size) +
+      var(--stl-ui-accordion-marker-margin) * 2 + var(--stl-ui-accordion-summary-column-gap));
+  background-color: var(--stl-color-ui-background);
+  border: 1px solid var(--stl-color-border);
+  border-radius: var(--stl-ui-accordion-border-radius);
+  font-size: var(--stl-typography-text-body);
+  padding: var(--stl-ui-accordion-padding);
+  padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
+
+  & > .stl-ui-accordion__summary {
+    padding: var(--stl-ui-accordion-padding);
+    margin: calc(-1 * var(--stl-ui-accordion-padding));
+    cursor: pointer;
+    border-radius: var(--stl-ui-accordion-border-radius);
+    margin-inline-start: calc(-1 * var(--stl-ui--internal--accordion-padding-start));
+    padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
+    font-weight: 500;
+    list-style: none;
+    display: block;
+
+    &:before {
+      content: "";
+      width: var(--stl-ui-accordion-marker-size);
+      height: var(--stl-ui-accordion-marker-size);
+      margin: var(--stl-ui-accordion-marker-margin);
+      background-color: var(--stl-ui-accordion-marker-color);
+      --stl-ui-accordion--internal--marker-width: calc(var(--stl-ui-accordion-marker-size) + var(--stl-ui-accordion-marker-margin) * 2);
+      --stl-ui-accordion--internal--summary-marker-transform: translateX(calc(-1 * var(--stl-ui-accordion--internal--marker-width) - var(--stl-ui-accordion-summary-column-gap)));
+      transform: var(--stl-ui-accordion--internal--summary-marker-transform);
+      --lucide-chevron-right: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==");
+      mask-image: var(--lucide-chevron-right);
+      transition: transform .1s ease-out;
+      display: block;
+      position: absolute;
+      mask-size: contain;
+      mask-repeat: no-repeat;
+    }
+
+    & > :first-child {
+      margin-top: 0;
+    }
+  }
+
+  &[open] {
+    border-color: var(--stl-color-border-strong);
+    padding-bottom: calc(var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-content-padding-bottom));
+
+    & > .stl-ui-accordion__summary {
+      --stl-ui--internal--summary-padding-bottom: min(var(--stl-ui-accordion-padding),
+        var(--stl-ui-accordion-row-gap));
+      padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
+      margin-bottom: calc(var(--stl-ui-accordion-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+
+      &:before {
+        transform: var(--stl-ui-accordion--internal--summary-marker-transform) rotate(90deg);
+      }
+    }
+  }
+
+  &:has( > .stl-ui-accordion__summary:hover) {
+    background-color: var(--stl-color-ui-background-hover);
+  }
+
+  & > .stl-ui-accordion__summary + * {
+    margin-top: 0;
+  }
+}
+
+.stl-ui-accordion-group {
+  & > .stl-ui-accordion:has( + .stl-ui-accordion) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+
+    & > .stl-ui-accordion__summary {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  & > .stl-ui-accordion + .stl-ui-accordion {
+    border-top-width: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-top: 0;
+
+    & > .stl-ui-accordion__summary {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  & .stl-ui-accordion:not(:hover, [open]):has( + .stl-ui-accordion:hover) {
+    border-bottom-width: 0;
+  }
+
+  & .stl-ui-accordion:not(:hover, [open]) + .stl-ui-accordion:hover {
+    border-top-width: 1px;
+  }
+
+  & .stl-ui-accordion:not([open]):has( + .stl-ui-accordion[open]) {
+    border-bottom-width: 0;
+  }
+
+  & .stl-ui-accordion:not([open]) + .stl-ui-accordion[open] {
+    border-top-width: 1px;
+  }
+}
+
+.stl-ui-steps {
+  padding-left: 0;
+}
+
+.stl-ui-steps__step {
+  --step-icon-width: 24px;
+  --step-padding: 12px;
+  padding: var(--step-padding);
+  padding-left: calc(var(--step-icon-width) + var(--step-padding));
+  margin: 0;
+  list-style: none;
+  position: relative;
+
+  &:before {
+    content: counter(list-item);
+    left: 0;
+    top: var(--step-padding);
+    width: var(--step-icon-width);
+    height: var(--step-icon-width);
+    border: 1px solid var(--stl-color-border);
+    background: var(--stl-color-bg);
+    z-index: 1;
+    font-size: var(--stl-typography-text-body-xs);
+    border-radius: 100%;
+    justify-content: center;
+    align-items: center;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100%;
+    display: flex;
+    position: absolute;
+  }
+
+  &:after {
+    content: "";
+    left: calc(var(--step-icon-width) / 2 - .5px);
+    top: calc(var(--step-icon-width) + var(--step-padding));
+    bottom: calc(-1 * (var(--step-padding)));
+    background: var(--stl-color-border);
+    width: 1px;
+    position: absolute;
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+
+    &:after {
+      display: none;
+    }
+  }
+}
+
+.stl-ui-steps__step-title {
+  font-weight: 600;
+}
+
+.stl-ui-steps__step-content {
+  margin-top: 4px;
+  margin-bottom: 0;
+}
+
+.stl-ui-badge {
+  letter-spacing: normal;
+  border-style: solid;
+  border-width: 1px;
+  align-items: center;
+  gap: .125em;
+  font-weight: 500;
+  display: inline-flex;
+
+  &.stl-ui-badge--size-sm {
+    height: 20px;
+    font-size: var(--stl-typography-scale-xs);
+    border-radius: var(--stl-ui-layout-border-radius-xs);
+    --stl-ui-badge-icon-size: 14px;
+    padding: 0 2px;
+  }
+
+  &, &.stl-ui-badge--size-md {
+    height: 24px;
+    font-size: var(--stl-typography-scale-sm);
+    border-radius: var(--stl-ui-layout-border-radius-xs);
+    --stl-ui-badge-icon-size: 14px;
+    padding: 0 4px;
+  }
+
+  &.stl-ui-badge--size-lg {
+    height: 32px;
+    font-size: var(--stl-typography-scale-md);
+    border-radius: var(--stl-ui-layout-border-radius-sml);
+    --stl-ui-badge-icon-size: 16px;
+    padding: 0 6px;
+  }
+
+  &.stl-ui-badge--intent-none {
+    background-color: var(--stl-color-ui-background);
+    color: var(--stl-color-foreground-muted);
+    --stl-ui-badge-icon-opacity: var(--stl-opacity-level-040);
+    border-color: var(--stl-color-border);
+  }
+
+  &.stl-ui-badge--intent-info {
+    background-color: var(--stl-color-muted-background);
+    color: var(--stl-color-foreground);
+    border-color: var(--stl-color-border);
+
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-inverse-background);
+      color: var(--stl-color-inverse-foreground);
+      --stl-ui-badge-icon-opacity: 1;
+    }
+  }
+
+  &.stl-ui-badge--intent-success, &.stl-ui-badge--http-get {
+    background-color: var(--stl-color-green-muted-background);
+    color: var(--stl-color-green-foreground);
+    border-color: var(--stl-color-green-border);
+
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-green-inverse-background);
+      color: var(--stl-color-green-inverse-foreground);
+    }
+  }
+
+  &.stl-ui-badge--intent-warning {
+    background-color: var(--stl-color-yellow-muted-background);
+    color: var(--stl-color-yellow-foreground);
+    border-color: var(--stl-color-yellow-border);
+
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-yellow-inverse-background);
+      color: var(--stl-color-yellow-inverse-foreground);
+    }
+  }
+
+  &.stl-ui-badge--intent-danger, &.stl-ui-badge--http-delete {
+    background-color: var(--stl-color-red-muted-background);
+    color: var(--stl-color-red-foreground);
+    border-color: var(--stl-color-red-border);
+
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-red-inverse-background);
+      color: var(--stl-color-red-inverse-foreground);
+    }
+  }
+
+  &.stl-ui-badge--intent-note, &.stl-ui-badge--http-post {
+    background-color: var(--stl-color-blue-muted-background);
+    color: var(--stl-color-blue-foreground);
+    border-color: var(--stl-color-blue-border);
+
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-blue-inverse-background);
+      color: var(--stl-color-blue-inverse-foreground);
+    }
+  }
+
+  &.stl-ui-badge--intent-tip {
+    background-color: var(--stl-color-purple-muted-background);
+    color: var(--stl-color-purple-foreground);
+    border-color: var(--stl-color-purple-border);
+
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-purple-inverse-background);
+      color: var(--stl-color-purple-inverse-foreground);
+    }
+  }
+
+  &.stl-ui-badge--intent-accent {
+    background-color: var(--stl-color-accent-muted-background);
+    color: var(--stl-color-accent-foreground);
+    border-color: var(--stl-color-accent-border);
+
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-accent-inverse-background);
+      color: var(--stl-color-accent-inverse-foreground);
+    }
+  }
+
+  &.stl-ui-badge--http-put, &.stl-ui-badge--http-patch {
+    background-color: var(--stl-color-orange-muted-background);
+    color: var(--stl-color-orange-foreground);
+    border-color: var(--stl-color-orange-border);
+
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-orange-inverse-background);
+      color: var(--stl-color-orange-inverse-foreground);
+    }
+  }
+
+  & .stl-ui-badge__content {
+    padding: .25em;
+    display: inline-block;
+  }
+
+  & svg {
+    color: rgb(from currentColor r g b / 1);
+    opacity: var(--stl-ui-badge-icon-opacity, 1);
+    width: var(--stl-ui-badge-icon-size);
+    height: var(--stl-ui-badge-icon-size);
+    flex-shrink: 0;
+    display: inline-block;
+  }
+
+  &:has( > svg:only-child) {
+    aspect-ratio: 1;
+    justify-content: center;
+    padding: 0;
+  }
+
+  &.stl-ui-badge--http {
+    font-family: var(--stl-typography-font-mono);
+    font-variant-numeric: tabular-nums;
+    text-transform: uppercase;
+  }
+}