@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

package/src/components/select.props.tsx

@@ -21,12 +21,20 @@ const selectTriggerPropDefs = {
     className: 'rt-panel-background',
     values: ['solid', 'translucent'],
   },
+  error: { type: 'boolean' },
+  loading: { type: 'boolean' },
+  disabled: { type: 'boolean' },
+  readOnly: { type: 'boolean' },
   ...colorPropDef,
   ...radiusPropDef,
   placeholder: { type: 'string' },
 } satisfies {
   variant: PropDef<(typeof triggerVariants)[number]>;
   panelBackground: PropDef<'solid' | 'translucent'>;
+  error: PropDef<boolean>;
+  loading: PropDef<boolean>;
+  disabled: PropDef<boolean>;
+  readOnly: PropDef<boolean>;
   placeholder: PropDef<string>;
 };
 

package/src/components/select.tsx

@@ -45,7 +45,18 @@ interface SelectTriggerProps
 const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(
   (props, forwardedRef) => {
     const context = React.useContext(SelectContext);
-    const { children, className, color, radius, placeholder, ...triggerProps } = extractProps(
+    const {
+      children,
+      className,
+      color,
+      radius,
+      placeholder,
+      error,
+      loading,
+      disabled,
+      readOnly,
+      ...triggerProps
+    } = extractProps(
       // Pass size value from the context to generate styles
       { size: context?.size, ...props },
       // Pass size prop def to allow it to be extracted
@@ -56,13 +67,27 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
 
     // Extract panelBackground separately since it needs to be passed as data attribute
     const { panelBackground } = props;
+
+    const ariaProps = React.useMemo(
+      () => ({
+        'aria-invalid': error || undefined,
+        'aria-busy': loading || undefined,
+        'aria-disabled': disabled || undefined,
+        'aria-readonly': readOnly || undefined,
+      }),
+      [error, loading, disabled, readOnly],
+    );
+
     return (
       <SelectPrimitive.Trigger asChild>
         <button
           data-accent-color={color}
           data-radius={radius}
           data-panel-background={panelBackground}
+          data-error={error}
+          data-loading={loading}
           {...triggerProps}
+          {...ariaProps}
           ref={forwardedRef}
           className={classNames('rt-reset', 'rt-SelectTrigger', className)}
         >
@@ -70,7 +95,25 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
             <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>
           </span>
           <SelectPrimitive.Icon asChild>
-            <ChevronDownIcon className="rt-SelectIcon" />
+            {loading ? (
+              <div className="rt-SelectIcon rt-SelectLoadingIcon" aria-hidden="true">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <circle
+                    cx="8"
+                    cy="8"
+                    r="7"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeDasharray="32"
+                    strokeDashoffset="32"
+                    className="rt-SelectLoadingIconCircle"
+                  />
+                </svg>
+              </div>
+            ) : (
+              <ChevronDownIcon className="rt-SelectIcon" />
+            )}
           </SelectPrimitive.Icon>
         </button>
       </SelectPrimitive.Trigger>

package/src/components/sidebar.css

@@ -44,12 +44,12 @@
 }
 
 .rt-SidebarContainer:where(.rt-variant-soft) {
-  /* Use solid gray for solid panels, alpha gray for translucent panels */
+  /* Base state: solid colors for solid panels */
   background-color: var(--gray-2);
-  
+
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
-    background-color: var(--gray-a2);
+    background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
     backdrop-filter: var(--backdrop-filter-panel);
   }
 
@@ -61,7 +61,7 @@
   }
 
   &:where([data-panel-background='translucent']) {
-    background-color: var(--gray-a2);
+    background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
     backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     --backdrop-filter-components: blur(var(--backdrop-blur-components));
@@ -74,7 +74,7 @@
   
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
-    background-color: var(--gray-a1);
+    background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
     backdrop-filter: var(--backdrop-filter-panel);
   }
 
@@ -87,7 +87,7 @@
   }
 
   &:where([data-panel-background='translucent']) {
-    background-color: var(--gray-a1);
+    background-color: color-mix(in srgb, var(--gray-a1), var(--gray-1) 60%);
     backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     --backdrop-filter-components: blur(var(--backdrop-blur-components));
@@ -867,4 +867,15 @@
   .rt-SidebarRoot:where([data-collapsible="icon"]) {
     transition: none;
   }
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  :where(.rt-SidebarMenuButton):focus-visible {
+    outline: 2px solid CanvasText;
+  }
+  
+  :where(.rt-SidebarTrigger):focus-visible {
+    outline: 2px solid CanvasText;
+  }
 } 

package/src/components/sidebar.tsx

@@ -160,7 +160,7 @@ interface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, Sideb
 
 const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {
   const themeContext = useThemeContext();
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const { isMobile, state, openMobile } = useSidebar();
 
   const {
     size = sidebarPropDefs.size.default,
@@ -172,7 +172,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
     panelBackground,
     color,
     highContrast = sidebarPropDefs.highContrast.default,
-    asChild,
+
   } = props;
 
   const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);
@@ -285,10 +285,19 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
 Sidebar.displayName = 'Sidebar.Root';
 
 // Sidebar content area
-interface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {}
+interface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * Accessible label for the navigation region.
+   * @default "Main navigation"
+   */
+  'aria-label'?: string;
+}
 
 const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
-  ({ className, children, ...props }, forwardedRef) => {
+  (
+    { className, children, 'aria-label': ariaLabel = 'Main navigation', ...props },
+    forwardedRef,
+  ) => {
     const context = React.useContext(SidebarContext);
     const {
       size = '2',
@@ -302,6 +311,9 @@ const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
         <div
           {...props}
           ref={forwardedRef}
+          id="sidebar-navigation"
+          role="navigation"
+          aria-label={ariaLabel}
           className={classNames(
             'rt-BaseMenuContent',
             'rt-SidebarContent',
@@ -391,13 +403,16 @@ interface SidebarTriggerProps extends ComponentPropsWithout<typeof IconButton, R
 
 const SidebarTrigger = React.forwardRef<React.ElementRef<typeof IconButton>, SidebarTriggerProps>(
   ({ onClick, children, ...props }, forwardedRef) => {
-    const { toggleSidebar } = useSidebar();
+    const { toggleSidebar, state } = useSidebar();
 
     return (
       <IconButton
         {...props}
         ref={forwardedRef}
         variant="ghost"
+        aria-label={state === 'expanded' ? 'Collapse sidebar' : 'Expand sidebar'}
+        aria-expanded={state === 'expanded'}
+        aria-controls="sidebar-navigation"
         onClick={(event) => {
           onClick?.(event);
           toggleSidebar();
@@ -435,6 +450,7 @@ const SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(
     <ul
       {...props}
       ref={forwardedRef}
+      role="menu"
       className={classNames('rt-BaseMenuViewport', 'rt-SidebarMenu', className)}
     />
   ),
@@ -468,6 +484,7 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
       children,
       onMouseEnter,
       onMouseLeave,
+      onKeyDown,
       ...props
     },
     forwardedRef,
@@ -478,13 +495,49 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
 
     const Comp = asChild ? Slot : 'button';
 
+    const { onClick } = props;
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLButtonElement>) => {
+        switch (event.key) {
+          case 'Enter':
+          case ' ':
+            event.preventDefault();
+            if (onClick) onClick(event as any);
+            break;
+          case 'ArrowDown': {
+            event.preventDefault();
+            // Focus next menu item
+            const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector(
+              '[role="menuitem"]',
+            ) as HTMLElement;
+            if (nextItem) nextItem.focus();
+            break;
+          }
+          case 'ArrowUp': {
+            event.preventDefault();
+            // Focus previous menu item
+            const prevItem = (
+              event.currentTarget as HTMLElement
+            ).previousElementSibling?.querySelector('[role="menuitem"]') as HTMLElement;
+            if (prevItem) prevItem.focus();
+            break;
+          }
+        }
+        onKeyDown?.(event);
+      },
+      [onClick, onKeyDown],
+    );
+
     return (
       <Comp
         {...props}
         ref={forwardedRef}
+        role="menuitem"
+        aria-current={isActive ? 'page' : undefined}
         className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}
         data-active={isActive || undefined}
         data-highlighted={isHighlighted || undefined}
+        onKeyDown={handleKeyDown}
         onMouseEnter={(event) => {
           setIsHighlighted(true);
           onMouseEnter?.(event);
@@ -572,6 +625,8 @@ const SidebarMenuSubTrigger = React.forwardRef<
             {...props}
             ref={forwardedRef}
             asChild={asChild}
+            role="menuitem"
+            aria-haspopup="true"
             className={classNames(
               'rt-reset',
               'rt-BaseMenuItem',
@@ -655,6 +710,7 @@ const SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProp
       <Comp
         {...props}
         ref={forwardedRef}
+        role="group"
         className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)}
       />
     );