elements-kit 0.5.2 → 0.6.0

package/README.md

@@ -493,9 +493,3 @@ class XPicker extends HTMLElement {
 - [ARCHITECTURE.md](ARCHITECTURE.md) — how the library works
 - [CONTRIBUTING.md](CONTRIBUTING.md) — build, test, PR checklist
 
-## Roadmap
-
-- [ ] Context — share state across a subtree without prop drilling
-- [ ] UI library — pre-built reactive components built on ElementsKit primitives
-- [ ] More framework integrations (Vue, Solid, Angular, …)
-- [ ] Tutorial — building a full app from scratch

package/dist/ui/badge/badge.css

@@ -83,6 +83,6 @@
 
 .x-badge:where([data-variant="outline"]):where([data-high-contrast]) {
   box-shadow: inset 0 0 0 1px var(--color-a7),
-      inset 0 0 0 1px var(--gray-a11);
+      inset 0 0 0 1px var(--base-color-a11);
   color: var(--color-12);
 }

package/dist/ui/button/button.css

@@ -54,8 +54,8 @@
 
 :where(:root) {
   --base-button-classic-after-inset: 2px;
-  --base-button-classic-box-shadow-top: inset 0 0 0 1px var(--gray-a4),
-    inset 0 -2px 1px var(--gray-a3);
+  --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),
@@ -72,11 +72,11 @@
     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(--gray-a5),
-    inset 0 4px 2px -2px var(--gray-a2),
-    inset 0 1px 1px var(--gray-a5),
+  --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(--gray-a2);
+    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);
@@ -86,7 +86,7 @@
   background-color: var(--color-9);
   color: var(--accent-contrast);
   z-index: 0;
-  background-image: linear-gradient(to bottom, transparent 50%, var(--gray-a4)),
+  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),
@@ -112,8 +112,8 @@
 
 .x-button:where([data-variant="classic"]):where([data-high-contrast]) {
   background-color: var(--color-12);
-  color: var(--gray-1);
-  background-image: linear-gradient(to bottom, transparent 50%, var(--gray-a4)),
+  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),
@@ -180,11 +180,11 @@
   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(--gray-a4),
-      inset 0 1px 1px var(--gray-a7),
-      inset 0 0 0 1px var(--gray-a5),
+  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(--gray-a3),
+      inset 0 3px 2px var(--base-color-a3),
       inset 0 0 0 1px var(--white-a7),
       inset 0 -2px 1px var(--white-a5);
 }
@@ -212,8 +212,8 @@
 }
 
 .x-button:where([data-variant="classic"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-2);
+  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;
@@ -222,7 +222,7 @@
 
 .x-button:where([data-variant="classic"]):where([data-disabled]):after {
   box-shadow: none;
-  background-color: var(--gray-a2);
+  background-color: var(--base-color-a2);
   background-image: linear-gradient(var(--black-a1) -20%,
         transparent,
         var(--white-a1));
@@ -278,7 +278,7 @@
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]) {
   background-color: var(--color-12);
-  color: var(--gray-1);
+  color: var(--base-color-1);
 }
 
 @media (hover: hover) {
@@ -299,8 +299,8 @@
 }
 
 .x-button:where([data-variant="solid"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
+  color: var(--base-color-a8);
+  background-color: var(--base-color-a3);
   filter: none;
   outline: none;
 }
@@ -314,8 +314,8 @@
 }
 
 .x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
+  color: var(--base-color-a8);
+  background-color: var(--base-color-a3);
 }
 
 .x-button:where([data-variant="soft"]) {
@@ -342,8 +342,8 @@
 }
 
 .x-button:where([data-variant="soft"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
+  color: var(--base-color-a8);
+  background-color: var(--base-color-a3);
 }
 
 @media (hover: hover) {
@@ -366,7 +366,7 @@
 }
 
 .x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
-  color: var(--gray-a8);
+  color: var(--base-color-a8);
   background-color: #0000;
 }
 
@@ -396,13 +396,13 @@
 
 .x-button:where([data-variant="outline"]):where([data-high-contrast]) {
   box-shadow: inset 0 0 0 1px var(--color-a7),
-      inset 0 0 0 1px var(--gray-a11);
+      inset 0 0 0 1px var(--base-color-a11);
   color: var(--color-12);
 }
 
 .x-button:where([data-variant="outline"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  box-shadow: inset 0 0 0 1px var(--gray-a7);
+  color: var(--base-color-a8);
+  box-shadow: inset 0 0 0 1px var(--base-color-a7);
   background-color: #0000;
 }
 
@@ -437,9 +437,9 @@
 }
 
 .x-button:where([data-variant="surface"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
-  background-color: var(--gray-a2);
+  color: var(--base-color-a8);
+  box-shadow: inset 0 0 0 1px var(--base-color-a6);
+  background-color: var(--base-color-a2);
 }
 
 .x-button:where(:not([data-variant="ghost"])) :where(svg) {

package/dist/ui/marketing/marketing.css

@@ -0,0 +1,392 @@
+.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]) {
+  margin: 0;
+}
+
+.hero {
+  flex-direction: column;
+  padding-top: 3rem;
+  display: flex;
+}
+
+.hero .section-paragraph {
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-9);
+  text-wrap: pretty;
+  margin-top: 1.5rem;
+}
+
+.hero .river-content {
+  row-gap: 0;
+}
+
+@media (min-width: 40rem) {
+  .hero {
+    padding-top: 7rem;
+  }
+
+  .hero .section-paragraph {
+    max-width: min(42rem, 70%);
+  }
+}
+
+@media (min-width: 64rem) {
+  .hero .section-paragraph {
+    font-size: var(--font-size-5);
+    line-height: var(--line-height-5);
+  }
+}
+
+.hero[data-align="center"] :is(.section-heading, .section-paragraph) {
+  text-align: center;
+  text-wrap: balance;
+}
+
+.hero:has(.river[data-align="start"]) {
+  padding-block: 6rem;
+}
+
+.hero:has(.river[data-align="start"]) .section-paragraph {
+  text-wrap: pretty;
+  font-size: var(--font-size-3) !important;
+  line-height: var(--line-height-3) !important;
+}
+
+@media (min-width: 48rem) {
+  .hero:has(.river[data-align="start"]) {
+    padding-block: 8rem;
+  }
+}
+
+.page-section {
+  background-color: var(--color-background);
+  padding-block: 3rem;
+  position: relative;
+}
+
+@media (min-width: 48rem) {
+  .page-section {
+    padding-top: 7rem;
+  }
+}
+
+.page-bounds {
+  box-sizing: border-box;
+  padding-left: var(--page-padding-left, 1rem);
+  padding-right: var(--page-padding-right, 1rem);
+  max-width: var(--page-max-width, 72rem);
+  width: 100%;
+  margin-inline: auto;
+}
+
+.section-header {
+  text-wrap: balance;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-block: 1.5rem;
+  display: flex;
+}
+
+.section-header .section-heading {
+  max-width: 20ch;
+}
+
+.section-header .section-paragraph {
+  text-wrap: balance;
+  max-width: 82ch;
+}
+
+.section-header[data-align="center"] {
+  align-items: safe center;
+}
+
+.section-header[data-align="center"] .section-heading, .section-header[data-align="center"] .section-paragraph {
+  text-align: center;
+}
+
+.section-header[data-align="center"] > a {
+  margin-top: 1rem;
+}
+
+.section-heading {
+  font-family: var(--font-heading);
+  letter-spacing: var(--letter-spacing-9);
+  overflow-wrap: break-word;
+  font-weight: 600;
+}
+
+[dir="rtl"] .section-heading {
+  letter-spacing: 0;
+  line-height: 1.4;
+}
+
+.section-heading-1 {
+  font-size: calc(48px * var(--scaling, 1));
+  letter-spacing: -.04em;
+  font-weight: 550;
+  line-height: 1;
+}
+
+.section-heading-2 {
+  font-size: var(--font-size-8);
+  line-height: var(--line-height-8);
+}
+
+.section-heading-3 {
+  font-size: calc(30px * var(--scaling, 1));
+  line-height: calc(36px * var(--scaling, 1));
+}
+
+.section-heading-4 {
+  font-size: var(--font-size-5);
+  line-height: var(--line-height-5);
+}
+
+@media (min-width: 64rem) {
+  .section-heading-1 {
+    font-size: var(--font-size-9);
+    line-height: 1;
+  }
+
+  .section-heading-2 {
+    font-size: calc(48px * var(--scaling, 1));
+    line-height: 1;
+  }
+
+  .section-heading-3 {
+    font-size: var(--font-size-8);
+    line-height: var(--line-height-8);
+  }
+}
+
+.section-paragraph {
+  line-height: var(--default-line-height, 1.5);
+  text-wrap: pretty;
+  white-space: pre-line;
+  overflow-wrap: break-word;
+  color: var(--base-color-11);
+}
+
+.section-paragraph em {
+  color: var(--base-color-12);
+  font-style: normal;
+}
+
+.river {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-auto-rows: min-content;
+  row-gap: 2rem;
+  display: grid;
+}
+
+.river > * {
+  grid-column: 1 / -1;
+  min-width: 0;
+}
+
+@media (min-width: 48rem) {
+  .river {
+    grid-auto-rows: auto;
+    gap: 0 3rem;
+  }
+
+  .river > * {
+    grid-column: span 6 / span 6;
+  }
+
+  .river[data-align="start"][data-large-visual] > .river-content, .river[data-align="end"][data-large-visual] > .river-content {
+    grid-column: span 5 / span 5;
+  }
+
+  .river[data-align="start"][data-large-visual] > .river-visual, .river[data-align="end"][data-large-visual] > .river-visual {
+    grid-column: span 7 / span 7;
+  }
+}
+
+.river[data-align="center"] {
+  grid-auto-rows: min-content;
+  align-items: safe center;
+  gap: 3rem 0;
+}
+
+.river[data-align="center"] > * {
+  grid-column: 1 / -1;
+  justify-self: center;
+  padding-inline: 0;
+}
+
+.river[data-align="center"] > .river-content {
+  align-items: safe center;
+}
+
+.river[data-align="center"] > .river-content > .section-heading {
+  text-align: center;
+  text-wrap: balance;
+  max-width: 24ch;
+}
+
+.river[data-align="center"] > .river-content > .section-paragraph {
+  text-align: center;
+  text-wrap: balance;
+  max-width: 72ch;
+}
+
+@media (min-width: 48rem) {
+  .river[data-align="end"] > .river-content {
+    order: 1;
+  }
+
+  .river[data-align="end"] > .river-visual {
+    order: 0;
+  }
+}
+
+@media (min-width: 64rem) {
+  .river[data-align="end"] > .river-content {
+    padding-inline: 4rem;
+  }
+}
+
+.river[data-align="breakout"] {
+  flex-direction: column;
+  gap: 2.5rem;
+  padding-block: 2.5rem;
+  display: flex;
+}
+
+.river[data-align="breakout"] > .section-heading:first-child {
+  clip: rect(0, 0, 0, 0);
+  word-wrap: normal;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  position: absolute;
+}
+
+.river[data-align="breakout"] > .river-content {
+  order: 1;
+}
+
+.river[data-align="breakout"] > .river-content .section-paragraph {
+  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);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.river[data-align="breakout"] > .river-content > [data-trailing] {
+  margin-top: 1.5rem;
+}
+
+.river[data-align="breakout"] > .river-visual {
+  border-radius: var(--radius-4);
+  order: 0;
+}
+
+@media (min-width: 48rem) {
+  .river[data-align="breakout"] {
+    row-gap: 4rem;
+    padding-block: 3rem;
+  }
+
+  .river[data-align="breakout"] > .river-content .section-paragraph {
+    font-size: var(--font-size-8);
+  }
+
+  .river[data-align="breakout"] .river-content {
+    grid-template-columns: 5fr 3fr;
+    grid-template-areas: "text trailing"
+                         "cta trailing";
+    grid-auto-rows: auto 1fr;
+    gap: 2rem 3rem;
+    display: grid;
+  }
+
+  .river[data-align="breakout"] .river-content .section-paragraph {
+    grid-area: text;
+  }
+
+  .river[data-align="breakout"] .river-content [data-cta] {
+    grid-area: cta;
+    justify-self: start;
+  }
+
+  .river[data-align="breakout"] .river-content > [data-trailing] {
+    grid-area: trailing;
+    justify-self: end;
+    margin-block-start: 0;
+  }
+}
+
+.river-content {
+  flex-direction: column;
+  order: 0;
+  align-items: flex-start;
+  row-gap: 1rem;
+  min-width: 0;
+  display: flex;
+}
+
+.river-content > .section-heading {
+  text-wrap: balance;
+}
+
+.river-content > a {
+  margin-top: 1rem;
+}
+
+.river-visual {
+  order: 1;
+  min-width: 0;
+  position: relative;
+}
+
+.river-visual[data-border] {
+  border-radius: var(--radius-4);
+  border: 1px solid var(--base-color-a6);
+}
+
+.pillar {
+  text-align: start;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 50ch;
+  display: flex;
+}
+
+.pillar > [data-heading] {
+  font-size: var(--font-size-5);
+  letter-spacing: var(--letter-spacing-8);
+  margin-bottom: .5rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.pillar > svg:first-child {
+  color: var(--color-9);
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+}
+
+.pillar > [data-paragraph] {
+  font-size: var(--font-size-2);
+  line-height: var(--default-line-height, 1.5);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0;
+  color: var(--base-color-11);
+  margin-bottom: 1.5rem;
+}
+
+.pillar > a {
+  margin-top: 1rem;
+}
+
+.pillar[data-border] {
+  border-radius: var(--radius-5);
+  border: 1px solid var(--base-color-a6);
+  padding: 2rem;
+}

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

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

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

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