@fusion.dev/helix-styles 0.144.0 → 0.146.0

package/dist/base.css

@@ -355,6 +355,22 @@ helix-button-group:not([variant="spaced"]) > [data-button]:not(:last-child) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
+helix-button-group:not([variant="spaced"], [orientation="vertical"]) > button:not(:first-child) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+helix-button-group:not([variant="spaced"], [orientation="vertical"]) > button:not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+helix-button-group[orientation="vertical"]:not([variant="spaced"]) > button:not(:first-child) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+helix-button-group[orientation="vertical"]:not([variant="spaced"]) > button:not(:last-child) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
 [data-button="ghost"] {
   background-color: var(--button-background-color, transparent);
   border-color: transparent;
@@ -443,7 +459,7 @@ helix-toggle::part(item) {
   block-size: var(--_toggle-height, auto);
   border: none;
   border-radius: var(--_toggle-radius, var(--helix-radii-sm));
-  color: var(--helix-color-foreground-muted);
+  color: var(--toggle-item-color, var(--helix-color-foreground-muted));
   cursor: pointer;
   display: inline-flex;
   flex: 1 1 auto;
@@ -451,7 +467,7 @@ helix-toggle::part(item) {
   font-size: var(--helix-text-sm);
   font-weight: var(--helix-weight-medium);
   justify-content: center;
-  padding-inline: var(--helix-space-sm);
+  padding-inline: var(--toggle-item-padding-inline, var(--helix-space-sm));
   text-decoration: none;
   background-color: transparent;
   transition:
@@ -468,7 +484,10 @@ helix-toggle-group helix-toggle::part(item):hover {
 }
 helix-toggle:state(selected)::part(item) {
   background-color: transparent;
-  color: var(--helix-color-foreground);
+  color: var(--toggle-item-color-selected, var(--helix-color-foreground));
+}
+helix-toggle:state(pressed)::part(item) {
+  color: var(--toggle-item-color-selected, var(--helix-color-foreground));
 }
 helix-toggle[disabled]::part(item) {
   cursor: not-allowed;
@@ -482,13 +501,13 @@ helix-toggle[disabled]::part(item) {
   font-family: var(--helix-font-sans);
   block-size: 100%;
   min-block-size: var(--helix-size-control-sm);
-  border-radius: var(--helix-radii-sm);
-  color: var(--helix-color-foreground-muted);
+  border-radius: var(--navigation-item-radius, var(--helix-radii-sm));
+  color: var(--navigation-item-color, var(--helix-color-foreground-muted));
   display: inline-flex;
-  font-size: var(--helix-text-sm);
-  font-weight: var(--helix-weight-medium);
+  font-size: var(--navigation-item-font-size, var(--helix-text-sm));
+  font-weight: var(--navigation-item-font-weight, var(--helix-weight-medium));
   justify-content: center;
-  padding-inline: var(--helix-space-sm);
+  padding-inline: var(--navigation-item-padding-inline, var(--helix-space-sm));
   text-decoration: none;
   transition:
     background-color var(--helix-duration-fast) var(--helix-easing-standard),
@@ -499,8 +518,11 @@ helix-toggle[disabled]::part(item) {
   justify-content: start;
 }
 :where([data-navigation-item], helix-navigation a):hover {
-  background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
-  color: var(--helix-color-foreground);
+  background-color: var(
+    --navigation-item-hover-background-color,
+    color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
+  );
+  color: var(--navigation-item-hover-color, var(--helix-color-foreground));
 }
 [data-dock] {
   --_dock-inset: var(--helix-space-lg);
@@ -614,8 +636,8 @@ helix-toggle[disabled]::part(item) {
   white-space: normal;
 }
 :where([data-navigation-item], helix-navigation a)[aria-current="page"] {
-  color: var(--helix-color-foreground);
-  font-weight: var(--helix-weight-semibold);
+  color: var(--navigation-item-current-color, var(--helix-color-foreground));
+  font-weight: var(--navigation-item-current-font-weight, var(--helix-weight-semibold));
 }
 :where([data-navigation-item], helix-navigation a) {
   position: relative;
@@ -885,8 +907,7 @@ helix-toast:not([data-color-mode]) {
     color-mix(in oklab, var(--helix-color-primary) 32%, transparent)
   );
 }
-[data-hidden-visually],
-helix-skip-link:not(:focus-within) {
+[data-hidden-visually] {
   block-size: 1px;
   border: var(--helix-space-none);
   clip-path: inset(50%);

package/dist/elements.css

@@ -82,6 +82,7 @@ helix-map-terrain:not(:defined),
 helix-megamenu:not(:defined),
 helix-menu:not(:defined),
 helix-menu-item:not(:defined),
+helix-menu-section:not(:defined),
 helix-meter:not(:defined),
 helix-navigation:not(:defined),
 helix-notification:not(:defined),
@@ -139,6 +140,7 @@ helix-textarea:not(:defined),
 helix-time-input:not(:defined),
 helix-time-picker:not(:defined),
 helix-timeline:not(:defined),
+helix-timeline-group:not(:defined),
 helix-timeline-item:not(:defined),
 helix-toast:not(:defined),
 helix-toast-item:not(:defined),
@@ -242,6 +244,7 @@ helix-map-terrain[align],
 helix-megamenu[align],
 helix-menu[align],
 helix-menu-item[align],
+helix-menu-section[align],
 helix-meter[align],
 helix-navigation[align],
 helix-notification[align],
@@ -299,6 +302,7 @@ helix-textarea[align],
 helix-time-input[align],
 helix-time-picker[align],
 helix-timeline[align],
+helix-timeline-group[align],
 helix-timeline-item[align],
 helix-toast[align],
 helix-toast-item[align],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-styles",
   "description": "Design tokens and base layer. Pure CSS, no JavaScript.",
-  "version": "0.144.0",
+  "version": "0.146.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {