elements-kit 0.6.2 → 0.7.1

package/dist/ui/button/button.css

@@ -365,3 +365,29 @@
 .x-button:where(:not([data-variant="text"])) {
   font-weight: var(--font-weight-medium);
 }
+
+.x-button:where([data-icon]):where(:not([data-variant="text"])) {
+  aspect-ratio: 1;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.x-button:where([data-icon][data-variant="text"]):where([data-size="1"]) {
+  --button-text-padding-x: var(--space-1);
+  --button-text-padding-y: var(--space-1);
+}
+
+.x-button:where([data-icon][data-variant="text"]):where([data-size="2"]) {
+  --button-text-padding-x: calc(var(--space-1) * 1.5);
+  --button-text-padding-y: calc(var(--space-1) * 1.5);
+}
+
+.x-button:where([data-icon][data-variant="text"]):where([data-size="3"]) {
+  --button-text-padding-x: var(--space-2);
+  --button-text-padding-y: var(--space-2);
+}
+
+.x-button:where([data-icon][data-variant="text"]):where([data-size="4"]) {
+  --button-text-padding-x: var(--space-3);
+  --button-text-padding-y: var(--space-3);
+}

package/dist/ui/card/card.css

@@ -3,8 +3,11 @@
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-regular);
   text-align: start;
-  padding: var(--card-padding);
   box-sizing: border-box;
+  padding-block-start: var(--card-padding-block-start, var(--card-padding));
+  padding-block-end: var(--card-padding-block-end, var(--card-padding));
+  padding-inline-start: var(--card-padding-inline-start, var(--card-padding));
+  padding-inline-end: var(--card-padding-inline-end, var(--card-padding));
   font-style: normal;
   display: block;
   position: relative;
@@ -127,3 +130,61 @@
 .x-card:where(:focus-visible):after {
   outline: inherit;
 }
+
+.x-card > [data-inset] {
+  --inset-radius: calc(var(--card-border-radius) - var(--card-border-width));
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.x-card > [data-inset="top"] {
+  border-start-start-radius: var(--inset-radius);
+  border-start-end-radius: var(--inset-radius);
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  margin-block-start: calc(0px - var(--card-padding-block-start, var(--card-padding)) +
+      var(--card-border-width));
+  margin-inline-start: calc(0px - var(--card-padding-inline-start, var(--card-padding)) +
+      var(--card-border-width));
+  margin-inline-end: calc(0px - var(--card-padding-inline-end, var(--card-padding)) +
+      var(--card-border-width));
+}
+
+.x-card > [data-inset="bottom"] {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: var(--inset-radius);
+  border-end-start-radius: var(--inset-radius);
+  margin-block-end: calc(0px - var(--card-padding-block-end, var(--card-padding)) +
+      var(--card-border-width));
+  margin-inline-start: calc(0px - var(--card-padding-inline-start, var(--card-padding)) +
+      var(--card-border-width));
+  margin-inline-end: calc(0px - var(--card-padding-inline-end, var(--card-padding)) +
+      var(--card-border-width));
+}
+
+.x-card > [data-inset="start"] {
+  border-start-start-radius: var(--inset-radius);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: var(--inset-radius);
+  margin-block-start: calc(0px - var(--card-padding-block-start, var(--card-padding)) +
+      var(--card-border-width));
+  margin-block-end: calc(0px - var(--card-padding-block-end, var(--card-padding)) +
+      var(--card-border-width));
+  margin-inline-start: calc(0px - var(--card-padding-inline-start, var(--card-padding)) +
+      var(--card-border-width));
+}
+
+.x-card > [data-inset="end"] {
+  border-start-start-radius: 0;
+  border-start-end-radius: var(--inset-radius);
+  border-end-end-radius: var(--inset-radius);
+  border-end-start-radius: 0;
+  margin-block-start: calc(0px - var(--card-padding-block-start, var(--card-padding)) +
+      var(--card-border-width));
+  margin-block-end: calc(0px - var(--card-padding-block-end, var(--card-padding)) +
+      var(--card-border-width));
+  margin-inline-end: calc(0px - var(--card-padding-inline-end, var(--card-padding)) +
+      var(--card-border-width));
+}

package/dist/ui/marketing/marketing.css

@@ -394,7 +394,10 @@
 
 @media (min-width: 64rem) {
   .testimonial {
-    --card-padding: 6rem 8rem;
+    --card-padding-block-start: 6rem;
+    --card-padding-block-end: 6rem;
+    --card-padding-inline-start: 8rem;
+    --card-padding-inline-end: 8rem;
   }
 }
 
@@ -456,7 +459,10 @@
 }
 
 .cta-banner {
-  --card-padding: 3rem 1.5rem;
+  --card-padding-block-start: 3rem;
+  --card-padding-block-end: 3rem;
+  --card-padding-inline-start: 1.5rem;
+  --card-padding-inline-end: 1.5rem;
   text-align: center;
   flex-direction: column;
   align-items: center;
@@ -465,13 +471,19 @@
 
 @media (min-width: 48rem) {
   .cta-banner {
-    --card-padding: 5rem 2.5rem;
+    --card-padding-block-start: 5rem;
+    --card-padding-block-end: 5rem;
+    --card-padding-inline-start: 2.5rem;
+    --card-padding-inline-end: 2.5rem;
   }
 }
 
 @media (min-width: 64rem) {
   .cta-banner {
-    --card-padding: 8rem 4.5rem;
+    --card-padding-block-start: 8rem;
+    --card-padding-block-end: 8rem;
+    --card-padding-inline-start: 4.5rem;
+    --card-padding-inline-end: 4.5rem;
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "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",