@pathscale/ui 1.1.45 → 1.1.47

package/dist/components/drawer/Drawer.css

@@ -172,33 +172,25 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Dialog — semantic prop: side (border indicator)
+   * Dialog — semantic prop: side (border indicator, parametric width & color)
    * -----------------------------------------------------------------------------------------------*/
   .drawer__dialog--side-left {
-    border-right: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    border-right-width: var(--drawer-dialog-border-width, 1px);
+    border-right-style: solid;
+    border-right-color: var(--drawer-dialog-border-color, color-mix(in oklab, var(--color-base-content) 10%, transparent));
   }
 
   .drawer__dialog--side-right {
-    border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    border-left-width: var(--drawer-dialog-border-width, 1px);
+    border-left-style: solid;
+    border-left-color: var(--drawer-dialog-border-color, color-mix(in oklab, var(--color-base-content) 10%, transparent));
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Dialog — semantic prop: bg (background variant)
+   * Dialog — semantic prop: bg (any CSS color via custom property)
    * -----------------------------------------------------------------------------------------------*/
-  .drawer__dialog--bg-base {
-    background-color: var(--color-base-100);
-  }
-
-  .drawer__dialog--bg-surface-1 {
-    background-color: var(--nf-surface-1, var(--color-base-100));
-  }
-
-  .drawer__dialog--bg-surface-2 {
-    background-color: var(--nf-surface-2, var(--color-base-200));
-  }
-
-  .drawer__dialog--bg-surface-3 {
-    background-color: var(--nf-surface-3, var(--color-base-300));
+  .drawer__dialog--custom-bg {
+    background-color: var(--drawer-dialog-bg, var(--color-base-100));
   }
 
   /* Slide transitions — open state */

package/dist/components/drawer/Drawer.d.ts

@@ -22,14 +22,15 @@ export type DrawerContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "child
     placement?: DrawerPlacement;
 };
 export type DrawerDialogSide = "left" | "right";
-export type DrawerDialogBg = "base" | "surface-1" | "surface-2" | "surface-3";
 export type DrawerDialogProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
     side?: DrawerDialogSide;
     width?: string;
     maxWidth?: string;
-    bg?: DrawerDialogBg;
+    bg?: string;
     padding?: string;
+    borderWidth?: string;
+    borderColor?: string;
 };
 export type DrawerHeaderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;

package/dist/components/drawer/Drawer.js

@@ -228,12 +228,6 @@ const DrawerContent = (props)=>{
         }
     });
 };
-const BG_MAP = {
-    base: "drawer__dialog--bg-base",
-    "surface-1": "drawer__dialog--bg-surface-1",
-    "surface-2": "drawer__dialog--bg-surface-2",
-    "surface-3": "drawer__dialog--bg-surface-3"
-};
 const SIDE_MAP = {
     left: "drawer__dialog--side-left",
     right: "drawer__dialog--side-right"
@@ -249,7 +243,9 @@ const DrawerDialog = (props)=>{
         "width",
         "maxWidth",
         "bg",
-        "padding"
+        "padding",
+        "borderWidth",
+        "borderColor"
     ]);
     const ctx = useDrawerContext();
     const mergedStyle = ()=>{
@@ -257,18 +253,22 @@ const DrawerDialog = (props)=>{
         if ("object" == typeof local.style && local.style) Object.assign(s, local.style);
         if (local.width) s["--drawer-dialog-width"] = local.width;
         if (local.maxWidth) s["--drawer-dialog-max-width"] = local.maxWidth;
+        if (local.bg) s["--drawer-dialog-bg"] = local.bg;
         if (local.padding) s["--drawer-dialog-padding"] = local.padding;
+        if (local.borderWidth) s["--drawer-dialog-border-width"] = local.borderWidth;
+        if (local.borderColor) s["--drawer-dialog-border-color"] = local.borderColor;
         return s;
     };
     const hasCustomSize = ()=>Boolean(local.width || local.maxWidth);
     const hasCustomPadding = ()=>Boolean(local.padding);
+    const hasCustomBg = ()=>Boolean(local.bg);
     return (()=>{
         var _el$4 = _tmpl$2();
         spread(_el$4, mergeProps(others, {
             role: "dialog",
             "aria-modal": "true"
         }, ()=>({
-                class: twMerge(CLASSES.slot.dialog, local.side ? SIDE_MAP[local.side] : void 0, local.bg ? BG_MAP[local.bg] : void 0, hasCustomSize() ? "drawer__dialog--custom-size" : void 0, hasCustomPadding() ? "drawer__dialog--custom-padding" : void 0, local.class, local.className)
+                class: twMerge(CLASSES.slot.dialog, local.side ? SIDE_MAP[local.side] : void 0, hasCustomBg() ? "drawer__dialog--custom-bg" : void 0, hasCustomSize() ? "drawer__dialog--custom-size" : void 0, hasCustomPadding() ? "drawer__dialog--custom-padding" : void 0, local.class, local.className)
             }), {
             "data-slot": "drawer-dialog",
             get ["data-placement"] () {

package/dist/components/drawer/index.d.ts

@@ -1 +1 @@
-export { default, DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, type DrawerPlacement, type DrawerBackdropVariant, type DrawerDialogSide, type DrawerDialogBg, type DrawerRootProps, type DrawerTriggerProps, type DrawerBackdropProps, type DrawerContentProps, type DrawerDialogProps, type DrawerHeaderProps, type DrawerHeadingProps, type DrawerBodyProps, type DrawerFooterProps, type DrawerHandleProps, type DrawerCloseTriggerProps, type DrawerCloseProps, } from "./Drawer";
+export { default, DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, type DrawerPlacement, type DrawerBackdropVariant, type DrawerDialogSide, type DrawerRootProps, type DrawerTriggerProps, type DrawerBackdropProps, type DrawerContentProps, type DrawerDialogProps, type DrawerHeaderProps, type DrawerHeadingProps, type DrawerBodyProps, type DrawerFooterProps, type DrawerHandleProps, type DrawerCloseTriggerProps, type DrawerCloseProps, } from "./Drawer";

package/dist/components/icon/Icon.js

@@ -16,8 +16,7 @@ const Icon = (props)=>{
     ]);
     const width = local.width ?? 24;
     const height = local.height ?? 24;
-    const name = local.name;
-    const classes = createMemo(()=>twMerge(CLASSES.base, name, local.class, local.className));
+    const classes = createMemo(()=>twMerge(CLASSES.base, local.name, local.class, local.className));
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, ()=>({

package/dist/components/input/Input.css

@@ -132,6 +132,10 @@
     pointer-events: none;
   }
 
+  .input__icon > :is(button, [role="button"], a, [tabindex]):not([tabindex="-1"]) {
+    pointer-events: auto;
+  }
+
   .input__icon > * {
     width: 1rem;
     height: 1rem;

package/dist/components/toggle/Toggle.css

@@ -14,6 +14,12 @@
     --switch-control-bg-pressed: var(--switch-control-bg-hover);
     --switch-control-bg-checked: var(--color-accent);
     --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+    --switch-control-border: color-mix(in oklab, var(--color-base-content) 24%, transparent);
+    --switch-control-border-checked: color-mix(
+      in oklab,
+      var(--switch-control-bg-checked) 74%,
+      var(--color-base-content)
+    );
   }
 
   .toggle__input {
@@ -37,9 +43,11 @@
     border-radius: 9999px;
     height: 1.25rem;
     width: 2.5rem;
+    border: 1px solid var(--switch-control-border);
     background-color: var(--switch-control-bg);
     transition:
       background-color 250ms ease,
+      border-color 250ms ease,
       box-shadow 150ms ease;
   }
 
@@ -109,6 +117,7 @@
 
   .toggle[data-selected="true"] .toggle__control {
     background-color: var(--switch-control-bg-checked);
+    border-color: var(--switch-control-border-checked);
   }
 
   .toggle[data-selected="true"] .toggle__thumb {

package/dist/index.d.ts

@@ -45,7 +45,7 @@ export { default as DatePicker, type DatePickerProps, } from "./components/date-
 export { default as DateRangePicker, type DateRangePickerProps, type DateRangeValue, } from "./components/date-range-picker";
 export { default as RangeCalendar, type RangeCalendarProps, type RangeCalendarValue, } from "./components/range-calendar";
 export { default as Drawer, DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, } from "./components/drawer";
-export type { DrawerPlacement, DrawerBackdropVariant, DrawerDialogSide, DrawerDialogBg, DrawerRootProps, DrawerTriggerProps, DrawerBackdropProps, DrawerContentProps, DrawerDialogProps, DrawerHeaderProps, DrawerHeadingProps, DrawerBodyProps, DrawerFooterProps, DrawerHandleProps, DrawerCloseTriggerProps, } from "./components/drawer";
+export type { DrawerPlacement, DrawerBackdropVariant, DrawerDialogSide, DrawerRootProps, DrawerTriggerProps, DrawerBackdropProps, DrawerContentProps, DrawerDialogProps, DrawerHeaderProps, DrawerHeadingProps, DrawerBodyProps, DrawerFooterProps, DrawerHandleProps, DrawerCloseTriggerProps, } from "./components/drawer";
 export { default as Dropdown } from "./components/dropdown";
 export { default as Disclosure } from "./components/disclosure";
 export type { DisclosureProps, DisclosureRootProps, DisclosureHeadingProps, DisclosureTriggerProps, DisclosureContentProps, DisclosureBodyProps, DisclosureIndicatorProps, } from "./components/disclosure";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "author": "pathscale",
   "repository": {
     "type": "git",