@pathscale/ui 1.1.55 → 1.1.57

package/dist/components/button/Button.css

@@ -19,6 +19,7 @@
     user-select: none;
     outline: none;
     cursor: pointer;
+    touch-action: manipulation;
     transition:
       transform 250ms ease,
       background-color 100ms ease,

package/dist/components/card/Card.css

@@ -5,7 +5,7 @@
     flex-direction: column;
     gap: 0.75rem;
     overflow: hidden;
-    border-radius: var(--card-radius, calc(var(--radius-box, 0.75rem) * 2));
+    border-radius: var(--card-radius, calc(var(--radius-box, 0.75rem) + var(--card-padding, 1rem)));
     padding: var(--card-padding, 1rem);
     color: var(--card-fg, var(--color-base-content));
     background-color: var(--card-bg, var(--color-base-100));

package/dist/components/immersive-landing/ImmersiveLanding.css

@@ -2,8 +2,8 @@
   .immersive-landing {
     position: fixed;
     inset: 0;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
     isolation: isolate;
     background: transparent;
@@ -84,6 +84,7 @@
     border: 0;
     background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
     cursor: pointer;
+    touch-action: manipulation;
     transform: translateY(-50%);
     transition: background-color 160ms ease;
   }
@@ -142,6 +143,7 @@
     color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
     background: transparent;
     cursor: pointer;
+    touch-action: manipulation;
     transition: background-color 150ms ease, color 150ms ease;
   }
 
@@ -182,6 +184,7 @@
     border: 0;
     background: color-mix(in oklab, var(--color-base-content) 30%, transparent);
     cursor: pointer;
+    touch-action: manipulation;
     transition: transform 150ms ease, background-color 150ms ease;
   }
 

package/dist/components/input/Input.css

@@ -140,4 +140,16 @@
     width: 1rem;
     height: 1rem;
   }
+
+  @media (max-width: 767px) {
+    .input-control--sm,
+    .input-control--md,
+    .input-control--lg {
+      font-size: 1rem;
+    }
+
+    .input-field {
+      font-size: 1rem;
+    }
+  }
 }

package/dist/components/table/Table.css

@@ -18,7 +18,7 @@
     background-color: var(--color-base-200);
     padding-inline: 0.25rem;
     padding-bottom: 0.25rem;
-    border-radius: calc(var(--radius-box, 1rem) * 1.25);
+    border-radius: calc(var(--radius-box, 1rem) + 0.25rem);
   }
 
   /* --------------------------------------------------------------------------
@@ -102,13 +102,13 @@
   }
 
   .table-root--secondary .table__column:first-child {
-    border-top-left-radius: 1rem;
-    border-bottom-left-radius: 1rem;
+    border-top-left-radius: var(--radius-box, 1rem);
+    border-bottom-left-radius: var(--radius-box, 1rem);
   }
 
   .table-root--secondary .table__column:last-child {
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
+    border-top-right-radius: var(--radius-box, 1rem);
+    border-bottom-right-radius: var(--radius-box, 1rem);
   }
 
   .table-root--secondary .table__body tr:first-child td:first-child,
@@ -134,13 +134,13 @@
     }
 
     .table-root--secondary .table__row:hover .table__cell:first-child {
-      border-top-left-radius: 1rem;
-      border-bottom-left-radius: 1rem;
+      border-top-left-radius: var(--radius-box, 1rem);
+      border-bottom-left-radius: var(--radius-box, 1rem);
     }
 
     .table-root--secondary .table__row:hover .table__cell:last-child {
-      border-top-right-radius: 1rem;
-      border-bottom-right-radius: 1rem;
+      border-top-right-radius: var(--radius-box, 1rem);
+      border-bottom-right-radius: var(--radius-box, 1rem);
     }
   }
 
@@ -210,19 +210,19 @@
      Table Body (<tbody>)
      -------------------------------------------------------------------------- */
   .table__body tr:first-child td:first-child {
-    border-top-left-radius: 1rem;
+    border-top-left-radius: var(--radius-box, 1rem);
   }
 
   .table__body tr:first-child td:last-child {
-    border-top-right-radius: 1rem;
+    border-top-right-radius: var(--radius-box, 1rem);
   }
 
   .table__body tr:last-child td:first-child {
-    border-bottom-left-radius: 1rem;
+    border-bottom-left-radius: var(--radius-box, 1rem);
   }
 
   .table__body tr:last-child td:last-child {
-    border-bottom-right-radius: 1rem;
+    border-bottom-right-radius: var(--radius-box, 1rem);
   }
 
   /* --------------------------------------------------------------------------

package/dist/components/tabs/Tabs.css

@@ -48,7 +48,7 @@
     width: 100%;
     align-items: center;
     justify-content: center;
-    border-radius: 1.5rem;
+    border-radius: var(--radius-box, 1rem);
     padding-inline: 1rem;
     text-align: center;
     white-space: nowrap;

package/dist/components/theme-color-picker/ThemeColorPicker.classes.d.ts

@@ -1,7 +1,9 @@
 export declare const CLASSES: {
     readonly base: "relative";
     readonly iconActive: "text-primary";
-    readonly popover: "absolute right-0 z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm";
+    readonly popover: "absolute z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm";
+    readonly popoverAlignStart: "left-0";
+    readonly popoverAlignEnd: "right-0";
     readonly row: "flex items-center gap-3";
     readonly wheelWrap: "flex justify-center";
     readonly wheelCustom: "color-wheel-custom";

package/dist/components/theme-color-picker/ThemeColorPicker.classes.js

@@ -1,7 +1,9 @@
 const CLASSES = {
     base: "relative",
     iconActive: "text-primary",
-    popover: "absolute right-0 z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm",
+    popover: "absolute z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm",
+    popoverAlignStart: "left-0",
+    popoverAlignEnd: "right-0",
     row: "flex items-center gap-3",
     wheelWrap: "flex justify-center",
     wheelCustom: "color-wheel-custom",

package/dist/components/theme-color-picker/ThemeColorPicker.d.ts

@@ -1,5 +1,6 @@
 import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
+export type ThemeColorPickerAlign = "start" | "end";
 export interface ThemeColorPickerProps extends IComponentBaseProps {
     /**
      * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
@@ -8,7 +9,7 @@ export interface ThemeColorPickerProps extends IComponentBaseProps {
     storagePrefix?: string;
     /**
      * Callback when color changes. Passes the hex string (or null on reset).
-     * Kept with legacy `(hue, saturation)` signature for backward compatibility —
+     * Kept with legacy `(hue, saturation)` signature for backward compatibility -
      * hue is derived from the picked hex, saturation is forwarded as-is.
      */
     onColorChange?: (hue: number | null, saturation: number) => void;
@@ -20,6 +21,13 @@ export interface ThemeColorPickerProps extends IComponentBaseProps {
      * ARIA label for the button
      */
     "aria-label"?: string;
+    /**
+     * Popover alignment relative to the trigger.
+     * "end" aligns the popover to the trigger's right edge (opens leftward).
+     * "start" aligns it to the trigger's left edge (opens rightward).
+     * @default "end"
+     */
+    align?: ThemeColorPickerAlign;
     /**
      * Custom button content (defaults to palette icon)
      */

package/dist/components/theme-color-picker/ThemeColorPicker.js

@@ -1,5 +1,6 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__ from "../color-wheel-flower/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__ from "../color-wheel-flower/ColorUtils.js";
@@ -18,6 +19,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
         "onColorChange",
         "onThemeSwitch",
         "aria-label",
+        "align",
         "children",
         "class",
         "className",
@@ -106,6 +108,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
             onFormatChange: ()=>{}
         });
     const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.base, local.class, local.className);
+    const popoverClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popover, "start" === local.align ? __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popoverAlignStart : __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popoverAlignEnd);
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
         get when () {
             return featureAvailable();
@@ -150,7 +153,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
                 get children () {
                     var _el$2 = _tmpl$2();
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                            class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popover
+                            class: popoverClasses()
                         })), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorPickerContext.Provider, {
                         get value () {

package/dist/components/theme-color-picker/index.d.ts

@@ -1,3 +1,3 @@
 export { default as ThemeColorPicker } from "./ThemeColorPicker";
-export type { ThemeColorPickerProps } from "./ThemeColorPicker";
+export type { ThemeColorPickerProps, ThemeColorPickerAlign } from "./ThemeColorPicker";
 export { createHueShiftStore, getDefaultHueShiftStore, resetHueShift, type HueShiftStore, } from "./hueShift";

package/package.json

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