elements-kit 0.6.0 → 0.6.2

package/dist/ui/button/button.css

@@ -19,215 +19,35 @@
   position: relative;
 }
 
-.x-button:where(:not([data-variant="ghost"])) {
+.x-button:where(:not([data-variant="text"])) {
   height: var(--base-button-height);
 }
 
-.x-button:where([data-variant="ghost"]) {
+.x-button:where([data-variant="text"]) {
   box-sizing: content-box;
   height: fit-content;
 }
 
 .x-button:where([data-size="1"]) {
-  --base-button-classic-active-padding-top: 1px;
   --base-button-height: var(--space-5);
   border-radius: max(var(--radius-1), var(--radius-pill));
 }
 
 .x-button:where([data-size="2"]) {
-  --base-button-classic-active-padding-top: 2px;
   --base-button-height: var(--space-6);
   border-radius: max(var(--radius-2), var(--radius-pill));
 }
 
 .x-button:where([data-size="3"]) {
-  --base-button-classic-active-padding-top: 2px;
   --base-button-height: var(--space-7);
   border-radius: max(var(--radius-3), var(--radius-pill));
 }
 
 .x-button:where([data-size="4"]) {
-  --base-button-classic-active-padding-top: 2px;
   --base-button-height: var(--space-8);
   border-radius: max(var(--radius-4), var(--radius-pill));
 }
 
-:where(:root) {
-  --base-button-classic-after-inset: 2px;
-  --base-button-classic-box-shadow-top: inset 0 0 0 1px var(--base-color-a4),
-    inset 0 -2px 1px var(--base-color-a3);
-  --base-button-classic-box-shadow-bottom: inset 0 4px 2px -2px var(--white-a9),
-    inset 0 2px 1px -1px var(--white-a9);
-  --base-button-classic-disabled-box-shadow: var(--base-button-classic-box-shadow-top),
-    var(--base-button-classic-box-shadow-bottom);
-  --base-button-classic-active-filter: brightness(.92) saturate(1.1);
-  --base-button-classic-high-contrast-hover-filter: contrast(.88) saturate(1.1) brightness(1.1);
-  --base-button-classic-high-contrast-active-filter: contrast(.82) saturate(1.2) brightness(1.16);
-}
-
-:is(.dark, .dark-theme), :is(.dark, .dark-theme) :where(:root:not(.light, .light-theme)) {
-  --base-button-classic-after-inset: 1px;
-  --base-button-classic-box-shadow-top: inset 0 0 0 1px var(--white-a2),
-    inset 0 4px 2px -2px var(--white-a3),
-    inset 0 1px 1px var(--white-a6),
-    inset 0 -1px 1px var(--black-a6);
-  --base-button-classic-box-shadow-bottom: 0 0 transparent;
-  --base-button-classic-disabled-box-shadow: inset 0 0 0 1px var(--base-color-a5),
-    inset 0 4px 2px -2px var(--base-color-a2),
-    inset 0 1px 1px var(--base-color-a5),
-    inset 0 -1px 1px var(--black-a3),
-    inset 0 0 0 1px var(--base-color-a2);
-  --base-button-classic-active-filter: brightness(1.08);
-  --base-button-classic-high-contrast-hover-filter: contrast(.88) saturate(1.3) brightness(1.14);
-  --base-button-classic-high-contrast-active-filter: brightness(.95) saturate(1.2);
-}
-
-.x-button:where([data-variant="classic"]) {
-  background-color: var(--color-9);
-  color: var(--accent-contrast);
-  z-index: 0;
-  background-image: linear-gradient(to bottom, transparent 50%, var(--base-color-a4)),
-    linear-gradient(to bottom, transparent 50%, var(--color-9) 80%);
-  box-shadow: var(--base-button-classic-box-shadow-top),
-    inset 0 0 0 1px var(--color-9),
-    var(--base-button-classic-box-shadow-bottom);
-  position: relative;
-}
-
-.x-button:where([data-variant="classic"]):after {
-  content: "";
-  border-radius: inherit;
-  pointer-events: none;
-  z-index: -1;
-  border: var(--base-button-classic-after-inset) solid transparent;
-  background-clip: content-box;
-  background-color: inherit;
-  background-image: linear-gradient(var(--black-a1),
-      transparent,
-      var(--white-a2));
-  box-shadow: inset 0 2px 3px -1px var(--white-a4);
-  position: absolute;
-  inset: 0;
-}
-
-.x-button:where([data-variant="classic"]):where([data-high-contrast]) {
-  background-color: var(--color-12);
-  color: var(--base-color-1);
-  background-image: linear-gradient(to bottom, transparent 50%, var(--base-color-a4)),
-      linear-gradient(to bottom, transparent 50%, var(--color-12) 80%);
-  box-shadow: var(--base-button-classic-box-shadow-top),
-      inset 0 0 0 1px var(--color-12),
-      var(--base-button-classic-box-shadow-bottom);
-}
-
-.x-button:where([data-variant="classic"]):where([data-high-contrast]):after {
-  background-image: linear-gradient(var(--black-a3),
-        transparent,
-        var(--white-a2));
-}
-
-@media (pointer: coarse) {
-  .x-button:where([data-variant="classic"]):where(:active:not([data-state="open"])) {
-    outline: .5em solid var(--color-a4);
-    outline-offset: 0;
-  }
-}
-
-.x-button:where([data-variant="classic"]):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-
-@media (hover: hover) {
-  .x-button:where([data-variant="classic"]):where(:hover):after {
-    background-color: var(--color-10);
-    background-image: linear-gradient(var(--black-a2) -15%,
-          transparent,
-          var(--white-a3));
-  }
-
-  .x-button:where([data-variant="classic"]):where(:hover):where([data-high-contrast]) {
-    filter: var(--base-button-classic-high-contrast-hover-filter);
-  }
-
-  .x-button:where([data-variant="classic"]):where(:hover):where([data-high-contrast]):after {
-    background-color: var(--color-12);
-    background-image: linear-gradient(var(--black-a5),
-            transparent,
-            var(--white-a2));
-  }
-}
-
-.x-button:where([data-variant="classic"]):where([data-state="open"]):after {
-  background-color: var(--color-10);
-  background-image: linear-gradient(var(--black-a2) -15%,
-        transparent,
-        var(--white-a3));
-}
-
-.x-button:where([data-variant="classic"]):where([data-state="open"]):where([data-high-contrast]) {
-  filter: var(--base-button-classic-high-contrast-hover-filter);
-}
-
-.x-button:where([data-variant="classic"]):where([data-state="open"]):where([data-high-contrast]):after {
-  background-color: var(--color-12);
-  background-image: linear-gradient(var(--black-a5),
-          transparent,
-          var(--white-a2));
-}
-
-.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])) {
-  background-color: var(--color-9);
-  background-image: linear-gradient(var(--black-a1), transparent);
-  padding-top: var(--base-button-classic-active-padding-top);
-  box-shadow: inset 0 4px 2px -2px var(--base-color-a4),
-      inset 0 1px 1px var(--base-color-a7),
-      inset 0 0 0 1px var(--base-color-a5),
-      inset 0 0 0 1px var(--color-9),
-      inset 0 3px 2px var(--base-color-a3),
-      inset 0 0 0 1px var(--white-a7),
-      inset 0 -2px 1px var(--white-a5);
-}
-
-.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):after {
-  box-shadow: none;
-  background-color: inherit;
-  background-image: linear-gradient(var(--black-a2),
-        transparent,
-        var(--white-a3));
-}
-
-.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):where([data-high-contrast]) {
-  background-color: var(--color-12);
-  filter: var(--base-button-classic-high-contrast-active-filter);
-  box-shadow: var(--base-button__classic-active__shadow-front-layer),
-        inset 0 0 0 1px var(--color-12),
-        var(--base-button__classic-active__shadow-bottom-layer);
-}
-
-.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):where([data-high-contrast]):after {
-  background-image: linear-gradient(var(--black-a5),
-          transparent,
-          var(--white-a3));
-}
-
-.x-button:where([data-variant="classic"]):where([data-disabled]) {
-  color: var(--base-color-a8);
-  background-color: var(--base-color-2);
-  box-shadow: var(--base-button-classic-disabled-box-shadow);
-  filter: none;
-  background-image: none;
-  outline: none;
-}
-
-.x-button:where([data-variant="classic"]):where([data-disabled]):after {
-  box-shadow: none;
-  background-color: var(--base-color-a2);
-  background-image: linear-gradient(var(--black-a1) -20%,
-        transparent,
-        var(--white-a1));
-}
-
 :where(:root) {
   --base-button-solid-active-filter: brightness(.92) saturate(1.1);
   --base-button-solid-high-contrast-hover-filter: contrast(.88) saturate(1.1)
@@ -305,15 +125,15 @@
   outline: none;
 }
 
-.x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]) {
+.x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]) {
   color: var(--color-a11);
 }
 
-.x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]):where([data-high-contrast]) {
+.x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]):where([data-high-contrast]) {
   color: var(--color-12);
 }
 
-.x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
+.x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
   color: var(--base-color-a8);
   background-color: var(--base-color-a3);
 }
@@ -347,25 +167,25 @@
 }
 
 @media (hover: hover) {
-  .x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:hover) {
+  .x-button:where([data-variant="text"], [data-variant="borderless"]):where(:hover) {
     background-color: var(--color-a3);
   }
 }
 
-.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:focus-visible) {
+.x-button:where([data-variant="text"], [data-variant="borderless"]):where(:focus-visible) {
   outline: 2px solid var(--focus-8);
   outline-offset: -1px;
 }
 
-.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where([data-state="open"]) {
+.x-button:where([data-variant="text"], [data-variant="borderless"]):where([data-state="open"]) {
   background-color: var(--color-a3);
 }
 
-.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:active:not([data-state="open"])) {
+.x-button:where([data-variant="text"], [data-variant="borderless"]):where(:active:not([data-state="open"])) {
   background-color: var(--color-a4);
 }
 
-.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
+.x-button:where([data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
   color: var(--base-color-a8);
   background-color: #0000;
 }
@@ -442,30 +262,30 @@
   background-color: var(--base-color-a2);
 }
 
-.x-button:where(:not([data-variant="ghost"])) :where(svg) {
+.x-button:where(:not([data-variant="text"])) :where(svg) {
   opacity: .9;
 }
 
-.x-button:where([data-variant="ghost"]) {
-  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
+.x-button:where([data-variant="text"]) {
+  padding: var(--button-text-padding-y) var(--button-text-padding-x);
   --margin-top: 0px;
   --margin-right: 0px;
   --margin-bottom: 0px;
   --margin-left: 0px;
-  --margin-top-override: calc(var(--margin-top) - var(--button-ghost-padding-y));
-  --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
-  --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));
+  --margin-top-override: calc(var(--margin-top) - var(--button-text-padding-y));
+  --margin-right-override: calc(var(--margin-right) - var(--button-text-padding-x));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--button-text-padding-y));
+  --margin-left-override: calc(var(--margin-left) - var(--button-text-padding-x));
 }
 
-:where(.x-button:where([data-variant="ghost"])) > * {
+:where(.x-button:where([data-variant="text"])) > * {
   --margin-top-override: initial;
   --margin-right-override: initial;
   --margin-bottom-override: initial;
   --margin-left-override: initial;
 }
 
-.x-button:where([data-variant="ghost"]) {
+.x-button:where([data-variant="text"]) {
   margin: var(--margin-top-override) var(--margin-right-override)
       var(--margin-bottom-override) var(--margin-left-override);
 }
@@ -477,15 +297,15 @@
   letter-spacing: var(--letter-spacing-1);
 }
 
-.x-button:where([data-size="1"]):where(:not([data-variant="ghost"])) {
+.x-button:where([data-size="1"]):where(:not([data-variant="text"])) {
   padding-left: var(--space-2);
   padding-right: var(--space-2);
 }
 
-.x-button:where([data-size="1"]):where([data-variant="ghost"]) {
+.x-button:where([data-size="1"]):where([data-variant="text"]) {
   gap: var(--space-1);
-  --button-ghost-padding-x: var(--space-2);
-  --button-ghost-padding-y: var(--space-1);
+  --button-text-padding-x: var(--space-2);
+  --button-text-padding-y: var(--space-1);
 }
 
 .x-button:where([data-size="2"]) {
@@ -495,15 +315,15 @@
   letter-spacing: var(--letter-spacing-2);
 }
 
-.x-button:where([data-size="2"]):where(:not([data-variant="ghost"])) {
+.x-button:where([data-size="2"]):where(:not([data-variant="text"])) {
   padding-left: var(--space-3);
   padding-right: var(--space-3);
 }
 
-.x-button:where([data-size="2"]):where([data-variant="ghost"]) {
+.x-button:where([data-size="2"]):where([data-variant="text"]) {
   gap: var(--space-1);
-  --button-ghost-padding-x: var(--space-2);
-  --button-ghost-padding-y: var(--space-1);
+  --button-text-padding-x: var(--space-2);
+  --button-text-padding-y: var(--space-1);
 }
 
 .x-button:where([data-size="3"]) {
@@ -513,15 +333,15 @@
   letter-spacing: var(--letter-spacing-3);
 }
 
-.x-button:where([data-size="3"]):where(:not([data-variant="ghost"])) {
+.x-button:where([data-size="3"]):where(:not([data-variant="text"])) {
   padding-left: var(--space-4);
   padding-right: var(--space-4);
 }
 
-.x-button:where([data-size="3"]):where([data-variant="ghost"]) {
+.x-button:where([data-size="3"]):where([data-variant="text"]) {
   gap: var(--space-2);
-  --button-ghost-padding-x: var(--space-3);
-  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
+  --button-text-padding-x: var(--space-3);
+  --button-text-padding-y: calc(var(--space-1) * 1.5);
 }
 
 .x-button:where([data-size="4"]) {
@@ -531,17 +351,17 @@
   letter-spacing: var(--letter-spacing-4);
 }
 
-.x-button:where([data-size="4"]):where(:not([data-variant="ghost"])) {
+.x-button:where([data-size="4"]):where(:not([data-variant="text"])) {
   padding-left: var(--space-5);
   padding-right: var(--space-5);
 }
 
-.x-button:where([data-size="4"]):where([data-variant="ghost"]) {
+.x-button:where([data-size="4"]):where([data-variant="text"]) {
   gap: var(--space-2);
-  --button-ghost-padding-x: var(--space-4);
-  --button-ghost-padding-y: var(--space-2);
+  --button-text-padding-x: var(--space-4);
+  --button-text-padding-y: var(--space-2);
 }
 
-.x-button:where(:not([data-variant="ghost"])) {
+.x-button:where(:not([data-variant="text"])) {
   font-weight: var(--font-weight-medium);
 }

package/dist/ui/card/card.css

@@ -0,0 +1,129 @@
+.x-card {
+  border-radius: var(--card-border-radius);
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-regular);
+  text-align: start;
+  padding: var(--card-padding);
+  box-sizing: border-box;
+  font-style: normal;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.x-card:before, .x-card:after {
+  content: "";
+  pointer-events: none;
+  border-radius: calc(var(--card-border-radius) - var(--card-border-width));
+  inset: var(--card-border-width);
+  transition: inherit;
+  position: absolute;
+}
+
+.x-card:before {
+  z-index: -1;
+}
+
+.x-card {
+  contain: paint;
+}
+
+.x-card, .x-card:where([data-size="3"]) {
+  --card-padding: var(--space-5);
+  --card-border-radius: var(--radius-5);
+}
+
+.x-card:where([data-size="1"]) {
+  --card-padding: var(--space-3);
+  --card-border-radius: var(--radius-4);
+}
+
+.x-card:where([data-size="2"]) {
+  --card-padding: var(--space-4);
+  --card-border-radius: var(--radius-4);
+}
+
+.x-card:where([data-size="4"]) {
+  --card-padding: var(--space-6);
+  --card-border-radius: var(--radius-5);
+}
+
+.x-card:where([data-size="5"]) {
+  --card-padding: var(--space-8);
+  --card-border-radius: var(--radius-6);
+}
+
+.x-card, .x-card:where([data-variant="surface"]) {
+  --card-border-width: 1px;
+}
+
+:is(.x-card, .x-card:where([data-variant="surface"])):before {
+  background-color: var(--color-material, var(--color-surface));
+  -webkit-backdrop-filter: var(--backdrop-filter-material, none);
+  backdrop-filter: var(--backdrop-filter-material, none);
+}
+
+:is(.x-card, .x-card:where([data-variant="surface"])):after {
+  box-shadow: 0 0 0 1px var(--base-color-a5);
+}
+
+@media (hover: hover) {
+  :is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where(:hover):after {
+    box-shadow: 0 0 0 1px var(--base-color-a7);
+  }
+}
+
+:is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where(:active:not([data-state="open"])):after {
+  box-shadow: 0 0 0 1px var(--base-color-a6);
+}
+
+.x-card:where([data-variant="elevated"]) {
+  --card-border-width: 1px;
+  box-shadow: var(--shadow-2);
+  transition: box-shadow .12s;
+}
+
+.x-card:where([data-variant="elevated"]):before {
+  background-color: var(--color-material, var(--color-surface));
+  -webkit-backdrop-filter: var(--backdrop-filter-material, none);
+  backdrop-filter: var(--backdrop-filter-material, none);
+}
+
+.x-card:where([data-variant="elevated"]):after {
+  box-shadow: 0 0 0 1px var(--base-color-a3);
+}
+
+@media (hover: hover) {
+  .x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:hover) {
+    box-shadow: var(--shadow-3);
+    transition-duration: 40ms;
+  }
+}
+
+.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
+  box-shadow: var(--shadow-2);
+  transition-duration: 40ms;
+}
+
+.x-card:where([data-variant="borderless"]) {
+  --card-border-width: 0px;
+}
+
+@media (hover: hover) {
+  .x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:hover) {
+    background-color: var(--base-color-a3);
+  }
+}
+
+.x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
+  background-color: var(--base-color-a4);
+}
+
+.x-card:where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+
+.x-card:where(:focus-visible):after {
+  outline: inherit;
+}

package/dist/ui/marketing/marketing.css

@@ -1,4 +1,4 @@
-.hero :is(h1, h2, h3, h4, h5, h6, p), .section-header :is(h1, h2, h3, h4, h5, h6, p), .section-heading, .section-paragraph, .river-content :is(h1, h2, h3, h4, h5, h6, p), .pillar :is(h1, h2, h3, h4, h5, h6, p, [data-heading], [data-paragraph]) {
+.hero :is(h1, h2, h3, h4, h5, h6, p), .section-header :is(h1, h2, h3, h4, h5, h6, p), .section-heading, .section-paragraph, .river-content :is(h1, h2, h3, h4, h5, h6, p), .pillar :is(h1, h2, h3, h4, h5, h6, p, [data-heading], [data-paragraph]), .cta-banner :is(h1, h2, h3, h4, h5, h6, p), .testimonial :is(blockquote, figcaption, cite, p), .statistic :is(p, [data-leading], [data-heading], [data-description]) {
   margin: 0;
 }
 
@@ -69,7 +69,7 @@
   }
 }
 
-.page-bounds {
+.page-container {
   box-sizing: border-box;
   padding-left: var(--page-padding-left, 1rem);
   padding-right: var(--page-padding-right, 1rem);
@@ -385,8 +385,226 @@
   margin-top: 1rem;
 }
 
-.pillar[data-border] {
-  border-radius: var(--radius-5);
-  border: 1px solid var(--base-color-a6);
-  padding: 2rem;
+.testimonial {
+  --card-padding: 2rem;
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+@media (min-width: 64rem) {
+  .testimonial {
+    --card-padding: 6rem 8rem;
+  }
+}
+
+.testimonial > blockquote {
+  font-family: var(--font-heading);
+  font-size: var(--font-size-6);
+  letter-spacing: var(--letter-spacing-9);
+  text-wrap: pretty;
+  color: var(--base-color-11);
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+@media (min-width: 48rem) {
+  .testimonial > blockquote {
+    font-size: var(--font-size-7);
+  }
+}
+
+.testimonial > blockquote em {
+  color: var(--base-color-12);
+  font-style: normal;
+}
+
+.testimonial > blockquote:before {
+  content: "“";
+  font-size: calc(96px * var(--scaling, 1));
+  color: var(--color-9);
+  font-weight: 700;
+  line-height: 1;
+  display: block;
+}
+
+.testimonial > blockquote:after {
+  content: "”";
+}
+
+.testimonial > figcaption {
+  flex-direction: column;
+  margin-top: 4rem;
+  display: flex;
+}
+
+.testimonial > figcaption > cite {
+  font-family: var(--font-heading);
+  font-size: var(--font-size-5);
+  line-height: var(--line-height-5);
+  letter-spacing: var(--letter-spacing-9);
+  color: var(--base-color-12);
+  font-style: normal;
+  font-weight: 600;
+}
+
+.testimonial > figcaption > [data-title] {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  color: var(--base-color-11);
+}
+
+.cta-banner {
+  --card-padding: 3rem 1.5rem;
+  text-align: center;
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+@media (min-width: 48rem) {
+  .cta-banner {
+    --card-padding: 5rem 2.5rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .cta-banner {
+    --card-padding: 8rem 4.5rem;
+  }
+}
+
+.cta-banner :is(.section-heading, .section-paragraph) {
+  text-align: center;
+  text-wrap: balance;
+  max-width: 42ch;
+}
+
+.cta-banner .section-paragraph {
+  margin-top: 1.5rem;
+}
+
+.cta-banner > [data-cta] {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1rem;
+  width: 100%;
+  margin-top: 2.5rem;
+  display: flex;
+}
+
+@media (min-width: 40rem) {
+  .cta-banner > [data-cta] {
+    flex-flow: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem 1.5rem;
+    width: auto;
+  }
+}
+
+.cta-banner[data-align="start"] {
+  text-align: start;
+  align-items: flex-start;
+}
+
+.cta-banner[data-align="start"] :is(.section-heading, .section-paragraph) {
+  text-align: start;
+}
+
+.cta-banner[data-align="start"] > [data-cta] {
+  width: 100%;
+}
+
+@media (min-width: 40rem) {
+  .cta-banner[data-align="start"] > [data-cta] {
+    justify-content: flex-start;
+    width: auto;
+  }
+}
+
+.statistic {
+  text-align: start;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  max-width: 50ch;
+  display: flex;
+}
+
+.statistic > [data-leading] {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-9);
+  color: var(--base-color-11);
+  margin: 0 0 .25rem;
+}
+
+.statistic > [data-heading] {
+  font-family: var(--font-heading);
+  font-size: calc(48px * var(--scaling, 1));
+  letter-spacing: -.04em;
+  color: var(--base-color-12);
+  margin: 0;
+  font-weight: 550;
+  line-height: 1;
+}
+
+@media (min-width: 64rem) {
+  .statistic > [data-heading] {
+    font-size: var(--font-size-9);
+  }
+}
+
+.statistic > [data-description] {
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  color: var(--base-color-11);
+  margin-top: .5rem;
+}
+
+.statistic[data-size="1"] > [data-leading] {
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+}
+
+.statistic[data-size="1"] > [data-heading] {
+  font-size: calc(28px * var(--scaling, 1));
+  letter-spacing: var(--letter-spacing-9);
+  font-weight: 600;
+  line-height: 1.1;
+}
+
+@media (min-width: 64rem) {
+  .statistic[data-size="1"] > [data-heading] {
+    font-size: var(--font-size-7);
+  }
+}
+
+.statistic[data-size="1"] > [data-description] {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+}
+
+.statistic[data-size="3"] > [data-heading] {
+  font-size: var(--font-size-9);
+}
+
+@media (min-width: 64rem) {
+  .statistic[data-size="3"] > [data-heading] {
+    font-size: calc(72px * var(--scaling, 1));
+  }
+}
+
+.statistic[data-size="3"] > [data-description] {
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+  margin-top: .75rem;
+}
+
+.statistic[data-align="center"] {
+  text-align: center;
+  align-items: safe center;
 }

package/dist/ui/styles/base/gray.css

@@ -0,0 +1,30 @@
+[data-base-color="gray"] {
+  --base-color-1: var(--gray-1);
+  --base-color-2: var(--gray-2);
+  --base-color-3: var(--gray-3);
+  --base-color-4: var(--gray-4);
+  --base-color-5: var(--gray-5);
+  --base-color-6: var(--gray-6);
+  --base-color-7: var(--gray-7);
+  --base-color-8: var(--gray-8);
+  --base-color-9: var(--gray-9);
+  --base-color-10: var(--gray-10);
+  --base-color-11: var(--gray-11);
+  --base-color-12: var(--gray-12);
+  --base-color-a1: var(--gray-a1);
+  --base-color-a2: var(--gray-a2);
+  --base-color-a3: var(--gray-a3);
+  --base-color-a4: var(--gray-a4);
+  --base-color-a5: var(--gray-a5);
+  --base-color-a6: var(--gray-a6);
+  --base-color-a7: var(--gray-a7);
+  --base-color-a8: var(--gray-a8);
+  --base-color-a9: var(--gray-a9);
+  --base-color-a10: var(--gray-a10);
+  --base-color-a11: var(--gray-a11);
+  --base-color-a12: var(--gray-a12);
+  --base-color-surface: var(--gray-surface);
+  --base-color-indicator: var(--gray-indicator);
+  --base-color-track: var(--gray-track);
+  --base-color-contrast: var(--gray-contrast);
+}

package/dist/ui/styles/base/mauve.css

@@ -1,4 +1,4 @@
-[data-gray-color="mauve"] {
+[data-base-color="mauve"] {
   --base-color-1: var(--mauve-1);
   --base-color-2: var(--mauve-2);
   --base-color-3: var(--mauve-3);

package/dist/ui/styles/base/olive.css

@@ -1,4 +1,4 @@
-[data-gray-color="olive"] {
+[data-base-color="olive"] {
   --base-color-1: var(--olive-1);
   --base-color-2: var(--olive-2);
   --base-color-3: var(--olive-3);

package/dist/ui/styles/base/sage.css

@@ -1,4 +1,4 @@
-[data-gray-color="sage"] {
+[data-base-color="sage"] {
   --base-color-1: var(--sage-1);
   --base-color-2: var(--sage-2);
   --base-color-3: var(--sage-3);

package/dist/ui/styles/base/sand.css

@@ -1,4 +1,4 @@
-[data-gray-color="sand"] {
+[data-base-color="sand"] {
   --base-color-1: var(--sand-1);
   --base-color-2: var(--sand-2);
   --base-color-3: var(--sand-3);

package/dist/ui/styles/base/slate.css

@@ -1,4 +1,4 @@
-[data-gray-color="slate"] {
+[data-base-color="slate"] {
   --base-color-1: var(--slate-1);
   --base-color-2: var(--slate-2);
   --base-color-3: var(--slate-3);

package/dist/ui/styles/theme.css

@@ -1,162 +1,3 @@
-:root, .light, .light-theme {
-  --gray-1: #fcfcfc;
-  --gray-2: #f9f9f9;
-  --gray-3: #f0f0f0;
-  --gray-4: #e8e8e8;
-  --gray-5: #e0e0e0;
-  --gray-6: #d9d9d9;
-  --gray-7: #cecece;
-  --gray-8: #bbb;
-  --gray-9: #8d8d8d;
-  --gray-10: #838383;
-  --gray-11: #646464;
-  --gray-12: #202020;
-  --gray-a1: #00000003;
-  --gray-a2: #00000006;
-  --gray-a3: #0000000f;
-  --gray-a4: #00000017;
-  --gray-a5: #0000001f;
-  --gray-a6: #00000026;
-  --gray-a7: #00000031;
-  --gray-a8: #0004;
-  --gray-a9: #00000072;
-  --gray-a10: #0000007c;
-  --gray-a11: #0000009b;
-  --gray-a12: #000000df;
-  --gray-surface: #fffc;
-  --gray-indicator: var(--gray-9);
-  --gray-track: var(--gray-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --gray-1: color(display-p3 .988 .988 .988);
-      --gray-2: color(display-p3 .975 .975 .975);
-      --gray-3: color(display-p3 .939 .939 .939);
-      --gray-4: color(display-p3 .908 .908 .908);
-      --gray-5: color(display-p3 .88 .88 .88);
-      --gray-6: color(display-p3 .849 .849 .849);
-      --gray-7: color(display-p3 .807 .807 .807);
-      --gray-8: color(display-p3 .732 .732 .732);
-      --gray-9: color(display-p3 .553 .553 .553);
-      --gray-10: color(display-p3 .512 .512 .512);
-      --gray-11: color(display-p3 .392 .392 .392);
-      --gray-12: color(display-p3 .125 .125 .125);
-      --gray-a1: color(display-p3 0 0 0 / .012);
-      --gray-a2: color(display-p3 0 0 0 / .024);
-      --gray-a3: color(display-p3 0 0 0 / .063);
-      --gray-a4: color(display-p3 0 0 0 / .09);
-      --gray-a5: color(display-p3 0 0 0 / .122);
-      --gray-a6: color(display-p3 0 0 0 / .153);
-      --gray-a7: color(display-p3 0 0 0 / .192);
-      --gray-a8: color(display-p3 0 0 0 / .267);
-      --gray-a9: color(display-p3 0 0 0 / .447);
-      --gray-a10: color(display-p3 0 0 0 / .486);
-      --gray-a11: color(display-p3 0 0 0 / .608);
-      --gray-a12: color(display-p3 0 0 0 / .875);
-      --gray-surface: color(display-p3 1 1 1 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --gray-1: #111;
-  --gray-2: #191919;
-  --gray-3: #222;
-  --gray-4: #2a2a2a;
-  --gray-5: #313131;
-  --gray-6: #3a3a3a;
-  --gray-7: #484848;
-  --gray-8: #606060;
-  --gray-9: #6e6e6e;
-  --gray-10: #7b7b7b;
-  --gray-11: #b4b4b4;
-  --gray-12: #eee;
-  --gray-a1: #0000;
-  --gray-a2: #ffffff09;
-  --gray-a3: #ffffff12;
-  --gray-a4: #ffffff1b;
-  --gray-a5: #fff2;
-  --gray-a6: #ffffff2c;
-  --gray-a7: #ffffff3b;
-  --gray-a8: #fff5;
-  --gray-a9: #ffffff64;
-  --gray-a10: #ffffff72;
-  --gray-a11: #ffffffaf;
-  --gray-a12: #ffffffed;
-  --gray-surface: #21212180;
-  --gray-indicator: var(--gray-9);
-  --gray-track: var(--gray-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --gray-1: color(display-p3 .067 .067 .067);
-      --gray-2: color(display-p3 .098 .098 .098);
-      --gray-3: color(display-p3 .135 .135 .135);
-      --gray-4: color(display-p3 .163 .163 .163);
-      --gray-5: color(display-p3 .192 .192 .192);
-      --gray-6: color(display-p3 .228 .228 .228);
-      --gray-7: color(display-p3 .283 .283 .283);
-      --gray-8: color(display-p3 .375 .375 .375);
-      --gray-9: color(display-p3 .431 .431 .431);
-      --gray-10: color(display-p3 .484 .484 .484);
-      --gray-11: color(display-p3 .706 .706 .706);
-      --gray-12: color(display-p3 .933 .933 .933);
-      --gray-a1: color(display-p3 0 0 0 / 0);
-      --gray-a2: color(display-p3 1 1 1 / .034);
-      --gray-a3: color(display-p3 1 1 1 / .071);
-      --gray-a4: color(display-p3 1 1 1 / .105);
-      --gray-a5: color(display-p3 1 1 1 / .134);
-      --gray-a6: color(display-p3 1 1 1 / .172);
-      --gray-a7: color(display-p3 1 1 1 / .231);
-      --gray-a8: color(display-p3 1 1 1 / .332);
-      --gray-a9: color(display-p3 1 1 1 / .391);
-      --gray-a10: color(display-p3 1 1 1 / .445);
-      --gray-a11: color(display-p3 1 1 1 / .685);
-      --gray-a12: color(display-p3 1 1 1 / .929);
-      --gray-surface: color(display-p3 .1255 .1255 .1255 / .5);
-    }
-  }
-}
-
-:root {
-  --gray-contrast: white;
-}
-
-:root, .light, .light-theme, .dark, .dark-theme {
-  --base-color-1: var(--gray-1);
-  --base-color-2: var(--gray-2);
-  --base-color-3: var(--gray-3);
-  --base-color-4: var(--gray-4);
-  --base-color-5: var(--gray-5);
-  --base-color-6: var(--gray-6);
-  --base-color-7: var(--gray-7);
-  --base-color-8: var(--gray-8);
-  --base-color-9: var(--gray-9);
-  --base-color-10: var(--gray-10);
-  --base-color-11: var(--gray-11);
-  --base-color-12: var(--gray-12);
-  --base-color-a1: var(--gray-a1);
-  --base-color-a2: var(--gray-a2);
-  --base-color-a3: var(--gray-a3);
-  --base-color-a4: var(--gray-a4);
-  --base-color-a5: var(--gray-a5);
-  --base-color-a6: var(--gray-a6);
-  --base-color-a7: var(--gray-a7);
-  --base-color-a8: var(--gray-a8);
-  --base-color-a9: var(--gray-a9);
-  --base-color-a10: var(--gray-a10);
-  --base-color-a11: var(--gray-a11);
-  --base-color-a12: var(--gray-a12);
-  --base-color-surface: var(--gray-surface);
-  --base-color-indicator: var(--gray-indicator);
-  --base-color-track: var(--gray-track);
-  --base-color-contrast: var(--gray-contrast);
-}
-
 :root {
   --black-a1: #0000000d;
   --black-a2: #0000001a;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",

package/dist/ui/styles/palette/base.css

@@ -1,158 +0,0 @@
-:root, .light, .light-theme {
-  --gray-1: #fcfcfc;
-  --gray-2: #f9f9f9;
-  --gray-3: #f0f0f0;
-  --gray-4: #e8e8e8;
-  --gray-5: #e0e0e0;
-  --gray-6: #d9d9d9;
-  --gray-7: #cecece;
-  --gray-8: #bbb;
-  --gray-9: #8d8d8d;
-  --gray-10: #838383;
-  --gray-11: #646464;
-  --gray-12: #202020;
-  --gray-a1: #00000003;
-  --gray-a2: #00000006;
-  --gray-a3: #0000000f;
-  --gray-a4: #00000017;
-  --gray-a5: #0000001f;
-  --gray-a6: #00000026;
-  --gray-a7: #00000031;
-  --gray-a8: #0004;
-  --gray-a9: #00000072;
-  --gray-a10: #0000007c;
-  --gray-a11: #0000009b;
-  --gray-a12: #000000df;
-  --gray-surface: #fffc;
-  --gray-indicator: var(--gray-9);
-  --gray-track: var(--gray-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --gray-1: color(display-p3 .988 .988 .988);
-      --gray-2: color(display-p3 .975 .975 .975);
-      --gray-3: color(display-p3 .939 .939 .939);
-      --gray-4: color(display-p3 .908 .908 .908);
-      --gray-5: color(display-p3 .88 .88 .88);
-      --gray-6: color(display-p3 .849 .849 .849);
-      --gray-7: color(display-p3 .807 .807 .807);
-      --gray-8: color(display-p3 .732 .732 .732);
-      --gray-9: color(display-p3 .553 .553 .553);
-      --gray-10: color(display-p3 .512 .512 .512);
-      --gray-11: color(display-p3 .392 .392 .392);
-      --gray-12: color(display-p3 .125 .125 .125);
-      --gray-a1: color(display-p3 0 0 0 / .012);
-      --gray-a2: color(display-p3 0 0 0 / .024);
-      --gray-a3: color(display-p3 0 0 0 / .063);
-      --gray-a4: color(display-p3 0 0 0 / .09);
-      --gray-a5: color(display-p3 0 0 0 / .122);
-      --gray-a6: color(display-p3 0 0 0 / .153);
-      --gray-a7: color(display-p3 0 0 0 / .192);
-      --gray-a8: color(display-p3 0 0 0 / .267);
-      --gray-a9: color(display-p3 0 0 0 / .447);
-      --gray-a10: color(display-p3 0 0 0 / .486);
-      --gray-a11: color(display-p3 0 0 0 / .608);
-      --gray-a12: color(display-p3 0 0 0 / .875);
-      --gray-surface: color(display-p3 1 1 1 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --gray-1: #111;
-  --gray-2: #191919;
-  --gray-3: #222;
-  --gray-4: #2a2a2a;
-  --gray-5: #313131;
-  --gray-6: #3a3a3a;
-  --gray-7: #484848;
-  --gray-8: #606060;
-  --gray-9: #6e6e6e;
-  --gray-10: #7b7b7b;
-  --gray-11: #b4b4b4;
-  --gray-12: #eee;
-  --gray-a1: #0000;
-  --gray-a2: #ffffff09;
-  --gray-a3: #ffffff12;
-  --gray-a4: #ffffff1b;
-  --gray-a5: #fff2;
-  --gray-a6: #ffffff2c;
-  --gray-a7: #ffffff3b;
-  --gray-a8: #fff5;
-  --gray-a9: #ffffff64;
-  --gray-a10: #ffffff72;
-  --gray-a11: #ffffffaf;
-  --gray-a12: #ffffffed;
-  --gray-surface: #21212180;
-  --gray-indicator: var(--gray-9);
-  --gray-track: var(--gray-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --gray-1: color(display-p3 .067 .067 .067);
-      --gray-2: color(display-p3 .098 .098 .098);
-      --gray-3: color(display-p3 .135 .135 .135);
-      --gray-4: color(display-p3 .163 .163 .163);
-      --gray-5: color(display-p3 .192 .192 .192);
-      --gray-6: color(display-p3 .228 .228 .228);
-      --gray-7: color(display-p3 .283 .283 .283);
-      --gray-8: color(display-p3 .375 .375 .375);
-      --gray-9: color(display-p3 .431 .431 .431);
-      --gray-10: color(display-p3 .484 .484 .484);
-      --gray-11: color(display-p3 .706 .706 .706);
-      --gray-12: color(display-p3 .933 .933 .933);
-      --gray-a1: color(display-p3 0 0 0 / 0);
-      --gray-a2: color(display-p3 1 1 1 / .034);
-      --gray-a3: color(display-p3 1 1 1 / .071);
-      --gray-a4: color(display-p3 1 1 1 / .105);
-      --gray-a5: color(display-p3 1 1 1 / .134);
-      --gray-a6: color(display-p3 1 1 1 / .172);
-      --gray-a7: color(display-p3 1 1 1 / .231);
-      --gray-a8: color(display-p3 1 1 1 / .332);
-      --gray-a9: color(display-p3 1 1 1 / .391);
-      --gray-a10: color(display-p3 1 1 1 / .445);
-      --gray-a11: color(display-p3 1 1 1 / .685);
-      --gray-a12: color(display-p3 1 1 1 / .929);
-      --gray-surface: color(display-p3 .1255 .1255 .1255 / .5);
-    }
-  }
-}
-
-:root {
-  --gray-contrast: white;
-}
-
-:root, .light, .light-theme, .dark, .dark-theme {
-  --base-color-1: var(--gray-1);
-  --base-color-2: var(--gray-2);
-  --base-color-3: var(--gray-3);
-  --base-color-4: var(--gray-4);
-  --base-color-5: var(--gray-5);
-  --base-color-6: var(--gray-6);
-  --base-color-7: var(--gray-7);
-  --base-color-8: var(--gray-8);
-  --base-color-9: var(--gray-9);
-  --base-color-10: var(--gray-10);
-  --base-color-11: var(--gray-11);
-  --base-color-12: var(--gray-12);
-  --base-color-a1: var(--gray-a1);
-  --base-color-a2: var(--gray-a2);
-  --base-color-a3: var(--gray-a3);
-  --base-color-a4: var(--gray-a4);
-  --base-color-a5: var(--gray-a5);
-  --base-color-a6: var(--gray-a6);
-  --base-color-a7: var(--gray-a7);
-  --base-color-a8: var(--gray-a8);
-  --base-color-a9: var(--gray-a9);
-  --base-color-a10: var(--gray-a10);
-  --base-color-a11: var(--gray-a11);
-  --base-color-a12: var(--gray-a12);
-  --base-color-surface: var(--gray-surface);
-  --base-color-indicator: var(--gray-indicator);
-  --base-color-track: var(--gray-track);
-  --base-color-contrast: var(--gray-contrast);
-}