@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/styles/recipes/scroll-area.css

@@ -143,10 +143,17 @@
 
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="always"]),
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="hover"]:is([data-hovering], [data-scrolling])),
-  :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="scroll"][data-scrolling]) {
+  :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="scroll"][data-scrolling]),
+  :where([data-control-family="scroll-area"][data-slot="root"]:has(> [data-scroll-area-viewport]:focus-visible) > [data-slot="scrollbar"]) {
     opacity: 1;
   }
 
+  @media (hover: none) {
+    :where([data-control-family="scroll-area"][data-slot="scrollbar"]) {
+      opacity: 1;
+    }
+  }
+
   :where([data-control-family="scroll-area"][data-slot="thumb"]) {
     border-radius: var(--cui-scroll-area-thumb-radius);
     background: var(--cui-scroll-area-thumb-background);

package/dist/styles/recipes/sidebar-menu.css

@@ -1,47 +1,97 @@
 @layer components {
   :where([data-control-family="sidebar"][data-slot="group-label"]) {
     gap: calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 2);
+    padding: var(--cui-sidebar-group-label-padding);
     border-radius: var(--radius-md);
     color: var(--cui-sidebar-group-label-foreground);
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
-    outline: none;
+    font-size: var(--cui-sidebar-group-label-font-size);
+    font-weight: var(--cui-sidebar-group-label-font-weight);
+    letter-spacing: var(--cui-sidebar-group-label-letter-spacing);
+    text-transform: var(--cui-sidebar-group-label-text-transform);
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-button"]),
-  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+  :where([data-control-family="sidebar"][data-slot="menu-button"]) {
     gap: calc(var(--spacing) * 1.5);
-    block-size: var(--control-h-md);
+    block-size: var(--cui-sidebar-menu-button-height);
     border-radius: var(--cui-sidebar-menu-button-radius);
-    padding-inline: var(--padding-x);
-    font-size: var(--text-body);
+    padding-block: var(--cui-sidebar-menu-button-padding-block);
+    padding-inline: var(--cui-sidebar-menu-button-padding-inline);
+    font-size: var(--cui-sidebar-menu-button-font-size);
+    font-weight: var(--cui-sidebar-menu-button-font-weight);
     background-color: transparent;
     color: var(--cui-sidebar-menu-button-foreground);
-    outline: none;
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
-    block-size: var(--control-h-sm);
-    padding-inline: calc(var(--padding-x) * 0.75);
-    font-size: var(--text-label);
+    --cui-sidebar-menu-button-height: var(--control-h-sm);
+    --cui-sidebar-menu-button-padding-inline: calc(var(--padding-x) * 0.75);
+    --cui-sidebar-menu-button-font-size: var(--text-label);
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
+    --cui-sidebar-menu-button-height: var(--control-h-lg);
+    --cui-sidebar-menu-button-padding-inline: calc(var(--padding-x) * 1.25);
     gap: calc(var(--spacing) * 2);
-    block-size: var(--control-h-lg);
-    padding-inline: calc(var(--padding-x) * 1.25);
+  }
+
+  :where([data-control-family="sidebar"][data-collapsible="icon"] [data-control-family="sidebar"][data-slot="menu-button"]) {
+    --cui-sidebar-menu-button-padding-inline: 0px;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-md) / 2);
+    padding: 0;
+    border-radius: var(--cui-sidebar-menu-button-radius);
+    background-color: transparent;
+    color: var(--cui-sidebar-menu-button-foreground);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active] ~ [data-slot="menu-action"]) {
+    color: var(--cui-sidebar-menu-button-active-foreground);
+  }
+
+  :where(
+    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
+      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+      ~ [data-slot="menu-action"]
+  ) {
+    color: var(--cui-sidebar-menu-button-track-active-foreground);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"])::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    inline-size: max(100%, var(--target-min));
+    block-size: max(100%, var(--target-min));
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:dir(rtl))::before {
+    translate: 50% -50%;
   }
 
   @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"]:hover),
-    :where([data-control-family="sidebar"][data-slot="menu-action"]:hover) {
+    :where(
+        [data-control-family="sidebar"]:is([data-slot="menu-button"], [data-slot="menu-action"]):hover:not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        )
+      ) {
       background-color: var(--cui-sidebar-menu-button-hover-background);
       color: var(--cui-sidebar-menu-button-hover-foreground);
       box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
     }
 
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover) {
+    :where(
+        [data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover:not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        )
+      ) {
       background-color: var(--cui-sidebar-menu-button-active-background);
       color: var(--cui-sidebar-menu-button-active-foreground);
     }
@@ -56,7 +106,7 @@
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-sidebar-menu-button-active-font-weight);
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
@@ -65,7 +115,13 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover) {
+    :where(
+        [data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover:not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        )
+      ) {
       box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
     }
   }
@@ -77,6 +133,13 @@
     background-color: transparent;
   }
 
+  :where(
+    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
+      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+  ) {
+    color: var(--cui-sidebar-menu-button-track-active-foreground);
+  }
+
   @media (hover: hover) {
     :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
       background-color: transparent;
@@ -87,18 +150,13 @@
   :where([data-control-family="sidebar"][data-slot="menu-action"]:is(:disabled, [aria-disabled="true"])),
   :where([data-control-family="sidebar"][data-slot="menu-button"]:disabled),
   :where([data-control-family="sidebar"][data-slot="menu-button"][aria-disabled="true"]) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="sidebar"][data-slot="group-content"]) {
     font-size: var(--text-body);
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
-    inset-block-start: calc(var(--control-h-md) / 2);
-    padding: 0;
-  }
-
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
     inset-block-start: calc(var(--control-h-sm) / 2);
   }
@@ -111,9 +169,46 @@
     padding-inline-end: calc(var(--spacing) * 8);
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-action"]:focus-visible) {
-    outline: 2px solid var(--sidebar-ring);
-    outline-offset: 2px;
+  :where([data-control-family="sidebar"][data-slot="menu-badge"]) {
+    inset-block-start: calc(var(--control-h-md) / 2);
+    inset-inline-end: calc(var(--spacing) * 1);
+    min-inline-size: var(--cui-sidebar-menu-badge-height);
+    block-size: var(--cui-sidebar-menu-badge-height);
+    padding-inline: calc(var(--spacing) * 1.5);
+    border-radius: 9999px;
+    background-color: var(--cui-sidebar-menu-badge-background);
+    color: var(--cui-sidebar-menu-badge-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-badge"]) {
+    inset-block-start: calc(var(--control-h-sm) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-badge"]) {
+    inset-block-start: calc(var(--control-h-lg) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-badge"])) {
+    padding-inline-end: calc(var(--spacing) * 10);
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-badge"]):has(
+      ~ [data-slot="menu-action"]:not([data-show-on-hover])
+    )
+  ) {
+    padding-inline-end: calc(var(--spacing) * 16);
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="menu-item"]:has(> [data-slot="menu-action"]:not([data-show-on-hover]))
+      > [data-slot="menu-badge"]
+  ) {
+    inset-inline-end: calc(var(--spacing) * 7);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -125,26 +220,46 @@
     :where([data-control-family="sidebar"][data-slot="menu-action"][data-popup-open]) {
       opacity: 1;
     }
+
+    :where(
+        [data-control-family="sidebar"][data-slot="menu-item"]:is(
+            :hover,
+            :focus-within,
+            :has(> [data-slot="menu-action"][data-popup-open])
+          ):has(> [data-slot="menu-action"][data-show-on-hover])
+          > [data-slot="menu-badge"]
+      ) {
+      opacity: 0;
+    }
   }
 
   @media (pointer: coarse) {
     :where([data-control-family="sidebar"][data-slot="menu-action"]) {
-      min-inline-size: 44px;
-      min-block-size: 44px;
+      min-inline-size: var(--touch-target);
+      min-block-size: var(--touch-target);
       inset-inline-end: 0;
-      inset-block-start: max(22px, calc(var(--control-h-md) / 2));
+      inset-block-start: max(calc(var(--touch-target) / 2), calc(var(--control-h-md) / 2));
     }
 
     :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
-      inset-block-start: max(22px, calc(var(--control-h-sm) / 2));
+      inset-block-start: max(calc(var(--touch-target) / 2), calc(var(--control-h-sm) / 2));
     }
 
     :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-action"]) {
-      inset-block-start: max(22px, calc(var(--control-h-lg) / 2));
+      inset-block-start: max(calc(var(--touch-target) / 2), calc(var(--control-h-lg) / 2));
     }
 
     :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-action"])) {
       padding-inline-end: calc(var(--spacing) * 12);
     }
+
+    :where([data-control-family="sidebar"][data-slot="menu-item"]:has(> [data-slot="menu-action"]) > [data-slot="menu-badge"]) {
+      inset-inline-end: var(--touch-target);
+      inset-block-start: max(calc(var(--touch-target) / 2), calc(var(--control-h-md) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-badge"]):has(~ [data-slot="menu-action"])) {
+      padding-inline-end: calc(var(--touch-target) + var(--spacing) * 10);
+    }
   }
 }

package/dist/styles/recipes/sidebar-parts.css

@@ -0,0 +1,154 @@
+@layer components {
+  :where([data-control-family="sidebar"][data-slot="rail"]) {
+    inline-size: calc(var(--spacing) * 4);
+    background-image: linear-gradient(var(--cui-sidebar-rail-divider-background), var(--cui-sidebar-rail-divider-background));
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 2px 100%;
+  }
+
+  :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]) {
+    background-position: right;
+  }
+
+  :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]:dir(rtl)) {
+    background-position: left;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="rail"]:hover) {
+      --cui-sidebar-rail-divider-background: var(--sidebar-border);
+    }
+
+    :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]:not([data-resizable]):hover) {
+      background-color: var(--sidebar);
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="rail"][data-resizable]) {
+    inline-size: calc(var(--spacing) * 2);
+    background: none;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="rail"][data-resizable])::after {
+    content: "";
+    position: absolute;
+    inset-block: 12.5%;
+    inset-inline-start: 50%;
+    inline-size: 1px;
+    background-image: linear-gradient(transparent, var(--cui-sidebar-rail-divider-background), transparent);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="rail"]:is(:focus-visible, [data-resizing="true"])) {
+    --cui-sidebar-rail-divider-background: var(--focus-ring);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="inset"]) {
+    background-color: var(--cui-sidebar-inset-background);
+    background-image: var(--cui-sidebar-inset-background-image);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="inset"]:focus-visible) {
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
+  }
+
+  @media (width >= 64rem) {
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state]
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ) {
+      margin: var(--cui-sidebar-inset-inset);
+      margin-inline-start: 0;
+      border: var(--cui-sidebar-inset-border-width) solid var(--cui-sidebar-inset-border-color);
+      border-radius: var(--cui-sidebar-inset-radius);
+      box-shadow: var(--cui-sidebar-inset-shadow);
+    }
+
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="collapsed"]
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ) {
+      margin-inline-start: var(--cui-sidebar-inset-inset);
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="header"]),
+  :where([data-control-family="sidebar"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 2);
+    background-color: var(--cui-sidebar-header-background);
+    box-shadow: var(--cui-sidebar-header-shadow);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="content-stack"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="group"]) {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu"][data-submenu]) {
+    margin-block: calc(var(--spacing) * 1);
+    margin-inline-start: calc(var(--spacing) * 3);
+    padding-inline-start: calc(var(--spacing) * 2);
+    border-inline-start: 1px solid var(--sidebar-border);
+    width: auto;
+  }
+
+  :where([data-control-family="sidebar"]:is([data-slot="group-label"], [data-slot="menu-button"])[aria-expanded] > [data-slot="chevron"]) {
+    margin-inline-start: auto;
+    transition: rotate var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][aria-expanded="true"] > [data-slot="chevron"]) {
+    rotate: 90deg;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="group-label"][aria-expanded]) {
+    cursor: pointer;
+    width: 100%;
+    text-align: start;
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="sidebar"][data-slot="menu-button"]) {
+      min-block-size: max(var(--cui-sidebar-menu-button-height), var(--touch-target));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="group-label"][aria-expanded]) {
+      min-block-size: var(--touch-target);
+    }
+
+    :where([data-control-family="button"][data-sidebar-trigger]) {
+      min-inline-size: var(--touch-target);
+      min-block-size: var(--touch-target);
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu"]:is([data-indicator="hover"], [data-indicator="slide"])) {
+    gap: 0;
+  }
+}
+
+@property --cui-sidebar-menu-badge-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-menu-badge-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-menu-badge-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}