elements-kit 0.26.1 → 0.26.3

package/dist/ui/group/group.css

@@ -5,11 +5,6 @@
   display: inline-flex;
 }
 
-.x-group > :is(.x-text-input, .x-select) {
-  flex: auto;
-  min-width: 0;
-}
-
 .x-group > :is(.x-button, .x-text-input, .x-select, .x-toggle) {
   z-index: 0;
   position: relative;

package/dist/ui/segmented-control/segmented-control.css

@@ -107,8 +107,7 @@
   z-index: -1;
   background-color: var(--seg-indicator-bg);
   border-radius: var(--seg-indicator-radius);
-  box-shadow: 0 0 0 .5px var(--neutral-a3),
-    0 1px 2px var(--neutral-a4);
+  box-shadow: 0 0 0 1px var(--neutral-a4);
   opacity: 0;
   transition: opacity var(--seg-transition-duration) ease-out;
   position: absolute;
@@ -132,13 +131,12 @@
     z-index: -1;
     top: var(--seg-inset);
     bottom: var(--seg-inset);
-    left: anchor(--x-seg-active left);
-    right: anchor(--x-seg-active right);
+    left: calc(anchor(--x-seg-active left) + var(--seg-inset));
+    right: calc(anchor(--x-seg-active right) + var(--seg-inset));
     background-color: var(--seg-indicator-bg);
     border-radius: var(--seg-indicator-radius);
     width: auto;
-    box-shadow: 0 0 0 .5px var(--neutral-a3),
-      0 1px 2px var(--neutral-a4);
+    box-shadow: 0 0 0 1px var(--neutral-a4);
     transition: left var(--seg-transition-duration) cubic-bezier(.45, .05, .55, .95),
       right var(--seg-transition-duration) cubic-bezier(.45, .05, .55, .95);
     position: absolute;

package/dist/ui/select/select.css

@@ -8,7 +8,8 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: var(--cursor-button);
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
+  --select-chevron-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='%23202020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
+  background-image: var(--select-chevron-image);
   background-repeat: no-repeat;
   background-position: right var(--select-chevron-inset) center;
   background-size: var(--select-chevron-size) var(--select-chevron-size);
@@ -21,13 +22,17 @@
   overflow: hidden;
 }
 
+:where(.dark, .dark-theme) .x-select, .x-select:where(.dark, .dark-theme) {
+  --select-chevron-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='%23eeeeee' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
+}
+
 .x-select:where(:focus-visible) {
   outline: 2px solid var(--focus-8);
   outline-offset: -1px;
 }
 
 .x-select:where([data-size="1"]) {
-  --select-chevron-size: 9px;
+  --select-chevron-size: 12px;
   --select-chevron-inset: var(--space-2);
   gap: var(--space-1);
   font-size: var(--font-size-1);
@@ -48,7 +53,7 @@
 }
 
 .x-select:where(:not([data-size]), [data-size="2"]) {
-  --select-chevron-size: 9px;
+  --select-chevron-size: 14px;
   --select-chevron-inset: var(--space-3);
   gap: calc(var(--space-1) * 1.5);
   font-size: var(--font-size-2);
@@ -69,7 +74,7 @@
 }
 
 .x-select:where([data-size="3"]) {
-  --select-chevron-size: 11px;
+  --select-chevron-size: 16px;
   --select-chevron-inset: var(--space-4);
   gap: var(--space-2);
   font-size: var(--font-size-3);

package/package.json

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