@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/breadcrumb/Breadcrumb.generated.d.ts

@@ -0,0 +1,21 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Breadcrumb.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps } from "../vocabulary";
+export type BreadcrumbRootProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+    separator?: JSX.Element;
+};
+export type BreadcrumbItemProps = Omit<JSX.HTMLAttributes<HTMLLIElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+    href?: string;
+    isCurrent?: boolean;
+};
+declare const BreadcrumbRoot: __LayoutComponent<BreadcrumbRootProps>;
+declare const BreadcrumbItem: __LayoutComponent<BreadcrumbItemProps>;
+declare const Breadcrumb: __LayoutComponent<BreadcrumbRootProps> & {
+    Root: __LayoutComponent<BreadcrumbRootProps>;
+    Item: __LayoutComponent<BreadcrumbItemProps>;
+};
+export default Breadcrumb;
+export { BreadcrumbRoot, BreadcrumbItem };

package/dist/components/{breadcrumbs/Breadcrumbs.generated.js → breadcrumb/Breadcrumb.generated.js}

@@ -1,22 +1,21 @@
 import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
-import "./Breadcrumbs.css";
+import "./Breadcrumb.css";
 import { Show, createContext, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./Breadcrumbs.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=breadcrumbs-separator fill=none height=12 viewBox="0 0 24 24"width=12 xmlns=http://www.w3.org/2000/svg><path d="M9 18l6-6-6-6"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2>'), _tmpl$2 = /*#__PURE__*/ template("<nav>"), _tmpl$3 = /*#__PURE__*/ template("<a>"), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template("<li>");
-const BreadcrumbsContext = createContext();
-const useBreadcrumbsContext = ()=>{
-    const ctx = useContext(BreadcrumbsContext);
-    if (!ctx) throw new Error("Breadcrumbs.Item must be used within <Breadcrumbs>");
+import { CLASSES, componentRecipe } from "./Breadcrumb.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=breadcrumb-separator fill=none height=12 viewBox="0 0 24 24"width=12 xmlns=http://www.w3.org/2000/svg><path d="M9 18l6-6-6-6"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2>'), _tmpl$2 = /*#__PURE__*/ template("<nav>"), _tmpl$3 = /*#__PURE__*/ template("<a>"), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template("<li>");
+const BreadcrumbContext = createContext();
+const useBreadcrumbContext = ()=>{
+    const ctx = useContext(BreadcrumbContext);
+    if (!ctx) throw new Error("Breadcrumb.Item must be used within <Breadcrumb>");
     return ctx;
 };
 const ChevronRight = ()=>_tmpl$();
-const __solidLayoutBreadcrumbsRoot = (_stable, p)=>{
+const __solidLayoutBreadcrumbRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "separator",
         "dataTheme",
         "style"
@@ -24,16 +23,16 @@ const __solidLayoutBreadcrumbsRoot = (_stable, p)=>{
     const ctx = {
         separator: ()=>local.separator
     };
-    return createComponent(BreadcrumbsContext.Provider, {
+    return createComponent(BreadcrumbContext.Provider, {
         value: ctx,
         get children () {
             var _el$2 = _tmpl$2();
             spread(_el$2, mergeProps(others, {
-                "aria-label": "Breadcrumbs"
+                "aria-label": "Breadcrumb"
             }, ()=>({
-                    class: twMerge(CLASSES.Root.base, local.class, local.className)
+                    class: twMerge(CLASSES.Root.base, local.class)
                 }), {
-                "data-slot": "breadcrumbs",
+                "data-slot": "breadcrumb",
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },
@@ -46,29 +45,28 @@ const __solidLayoutBreadcrumbsRoot = (_stable, p)=>{
         }
     });
 };
-const BreadcrumbsRoot = defineComponent({
+const BreadcrumbRoot = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutBreadcrumbsRoot,
+    layout: __solidLayoutBreadcrumbRoot,
     embedded: true
 });
 const [ITEM_CLASS, LINK_CLASS, SEPARATOR_CLASS] = CLASSES.Item.base;
-const __solidLayoutBreadcrumbsItem = (_stable, p)=>{
+const __solidLayoutBreadcrumbItem = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "href",
         "isCurrent",
         "dataTheme",
         "style"
     ]);
-    const ctx = useBreadcrumbsContext();
+    const ctx = useBreadcrumbContext();
     return (()=>{
         var _el$3 = _tmpl$5();
         spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(ITEM_CLASS, local.class, local.className)
+                class: twMerge(ITEM_CLASS, local.class)
             }), {
-            "data-slot": "breadcrumbs-item",
+            "data-slot": "breadcrumb-item",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -86,7 +84,7 @@ const __solidLayoutBreadcrumbsItem = (_stable, p)=>{
                     spread(_el$6, mergeProps({
                         class: LINK_CLASS
                     }, {
-                        "data-slot": "breadcrumbs-link",
+                        "data-slot": "breadcrumb-link",
                         get ["data-current"] () {
                             return local.isCurrent ? "true" : void 0;
                         },
@@ -107,7 +105,7 @@ const __solidLayoutBreadcrumbsItem = (_stable, p)=>{
                 }, {
                     class: LINK_CLASS
                 }, {
-                    "data-slot": "breadcrumbs-link"
+                    "data-slot": "breadcrumb-link"
                 }), false, true);
                 insert(_el$4, ()=>local.children);
                 return _el$4;
@@ -122,7 +120,7 @@ const __solidLayoutBreadcrumbsItem = (_stable, p)=>{
                 spread(_el$5, mergeProps({
                     class: SEPARATOR_CLASS
                 }, {
-                    "data-slot": "breadcrumbs-separator"
+                    "data-slot": "breadcrumb-separator"
                 }), false, true);
                 insert(_el$5, ()=>ctx.separator() ?? createComponent(ChevronRight, {}));
                 return _el$5;
@@ -131,15 +129,15 @@ const __solidLayoutBreadcrumbsItem = (_stable, p)=>{
         return _el$3;
     })();
 };
-const BreadcrumbsItem = defineComponent({
+const BreadcrumbItem = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutBreadcrumbsItem,
+    layout: __solidLayoutBreadcrumbItem,
     embedded: true
 });
-const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
-    Root: BreadcrumbsRoot,
-    Item: BreadcrumbsItem
+const Breadcrumb = Object.assign(BreadcrumbRoot, {
+    Root: BreadcrumbRoot,
+    Item: BreadcrumbItem
 });
-const Breadcrumbs_generated = Breadcrumbs;
-export default Breadcrumbs_generated;
-export { BreadcrumbsItem, BreadcrumbsRoot };
+const Breadcrumb_generated = Breadcrumb;
+export default Breadcrumb_generated;
+export { BreadcrumbItem, BreadcrumbRoot };

package/dist/components/breadcrumb/Breadcrumb.recipe.d.ts

@@ -0,0 +1,18 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "breadcrumb";
+    };
+    readonly Item: {
+        readonly base: readonly ["breadcrumb__item", "breadcrumb__link", "breadcrumb__separator"];
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "breadcrumb";
+    readonly slots: {
+        readonly breadcrumb: {};
+        readonly "breadcrumb-item": {};
+        readonly "breadcrumb-link": {};
+        readonly "breadcrumb-separator": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/{breadcrumbs/Breadcrumbs.recipe.js → breadcrumb/Breadcrumb.recipe.js}

@@ -1,40 +1,40 @@
 import { recipe } from "../../lib/layouts/index.js";
 const CLASSES = {
     Root: {
-        base: "breadcrumbs"
+        base: "breadcrumb"
     },
     Item: {
         base: [
-            "breadcrumbs__item",
-            "breadcrumbs__link",
-            "breadcrumbs__separator"
+            "breadcrumb__item",
+            "breadcrumb__link",
+            "breadcrumb__separator"
         ]
     }
 };
 const componentRecipe = recipe({
-    component: "breadcrumbs",
+    component: "breadcrumb",
     slots: {
-        breadcrumbs: {},
-        "breadcrumbs-item": {},
-        "breadcrumbs-link": {},
-        "breadcrumbs-separator": {},
+        breadcrumb: {},
+        "breadcrumb-item": {},
+        "breadcrumb-link": {},
+        "breadcrumb-separator": {},
         root: {}
     },
     _layouts: {
         slots: {
-            breadcrumbs: {
+            breadcrumb: {
                 base: "",
                 axes: {}
             },
-            "breadcrumbs-item": {
+            "breadcrumb-item": {
                 base: "",
                 axes: {}
             },
-            "breadcrumbs-link": {
+            "breadcrumb-link": {
                 base: "",
                 axes: {}
             },
-            "breadcrumbs-separator": {
+            "breadcrumb-separator": {
                 base: "",
                 axes: {}
             },
@@ -45,10 +45,10 @@ const componentRecipe = recipe({
         },
         stateKeys: [],
         slotIds: {
-            breadcrumbs: 0,
-            "breadcrumbs-item": 1,
-            "breadcrumbs-link": 2,
-            "breadcrumbs-separator": 3,
+            breadcrumb: 0,
+            "breadcrumb-item": 1,
+            "breadcrumb-link": 2,
+            "breadcrumb-separator": 3,
             root: 4
         }
     }

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

@@ -0,0 +1 @@
+export { default as Breadcrumb, BreadcrumbRoot, BreadcrumbItem, type BreadcrumbRootProps, type BreadcrumbItemProps, } from "./Breadcrumb.generated";

package/dist/components/breadcrumb/index.js

@@ -0,0 +1 @@
+export { BreadcrumbItem, BreadcrumbRoot, default as Breadcrumb } from "./Breadcrumb.generated.js";

package/dist/components/button/Button.css

@@ -1,9 +1,17 @@
 @layer components {
+  /* -----------------------------------------------------------------------
+   * Root
+   *
+   * Two custom properties carry the whole state x variant cross product:
+   * a state sets --button-accent (and its readable foreground), and a variant
+   * decides how that accent is spent. 8 states + 5 variants = 13 rules
+   * instead of 40 combinations.
+   * --------------------------------------------------------------------- */
   .button {
     position: relative;
     isolation: isolate;
     display: inline-flex;
-    height: 2.5rem;
+    height: 2.25rem;
     width: fit-content;
     transform-origin: center;
     align-items: center;
@@ -11,8 +19,7 @@
     gap: 0.5rem;
     white-space: nowrap;
     border-radius: 1.5rem;
-    border: 0;
-    padding-inline: 1rem;
+    padding-inline: 0.75rem;
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 1;
@@ -26,20 +33,24 @@
       box-shadow 100ms ease,
       color 100ms ease,
       opacity 100ms ease;
+
+    --button-accent: var(--color-base-300);
+    --button-accent-fg: var(--color-base-content);
     --button-bg: transparent;
     --button-bg-hover: var(--button-bg);
     --button-bg-pressed: var(--button-bg-hover);
     --button-fg: currentColor;
     --button-border: transparent;
+
     background-color: var(--button-bg);
-    border: 1px solid var(--button-border);
+    border: var(--border, 1px) solid var(--button-border);
     color: var(--button-fg);
   }
 
   .button:focus-visible,
   .button[data-focus-visible="true"] {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid var(--button-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
   .button:disabled,
@@ -48,10 +59,6 @@
     opacity: 0.5;
   }
 
-  .button[data-pending="true"] {
-    cursor: progress;
-  }
-
   .button:active,
   .button[data-pressed="true"] {
     transform: scale(0.97);
@@ -65,121 +72,236 @@
     }
   }
 
-  .button__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    margin-block: 0.125rem;
-    height: 1rem;
-    width: 1rem;
-    flex-shrink: 0;
-    align-self: center;
+  /* -----------------------------------------------------------------------
+   * Flavor — a styling preference: which palette slot to wear
+   * --------------------------------------------------------------------- */
+  .button--flavor-neutral {
+    --button-accent: var(--color-base-300);
+    --button-accent-fg: var(--color-base-content);
   }
-
-  .button__icon > * {
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
+  .button--flavor-primary {
+    --button-accent: var(--color-primary);
+    --button-accent-fg: var(--color-primary-content);
   }
-
-  .button--sm {
-    height: 2.25rem;
-    padding-inline: 0.75rem;
+  .button--flavor-secondary {
+    --button-accent: var(--color-secondary);
+    --button-accent-fg: var(--color-secondary-content);
   }
-
-  .button--md {
+  .button--flavor-accent {
+    --button-accent: var(--color-accent);
+    --button-accent-fg: var(--color-accent-content);
   }
 
-  .button--lg {
-    height: 2.75rem;
-    font-size: 1rem;
-    padding-inline: 1.125rem;
+  .button--flavor-destructive {
+    --button-accent: var(--color-error);
+    --button-accent-fg: var(--color-error-content);
   }
-
-  .button--sm:active,
-  .button--sm[data-pressed="true"] {
-    transform: scale(0.98);
+  .button--flavor-success {
+    --button-accent: var(--color-success);
+    --button-accent-fg: var(--color-success-content);
   }
-
-  .button--lg:active,
-  .button--lg[data-pressed="true"] {
-    transform: scale(0.96);
+  .button--flavor-warning {
+    --button-accent: var(--color-warning);
+    --button-accent-fg: var(--color-warning-content);
+  }
+  .button--flavor-info {
+    --button-accent: var(--color-info);
+    --button-accent-fg: var(--color-info-content);
   }
 
-  .button--primary {
-    --button-bg: var(--color-primary);
-    --button-bg-hover: color-mix(in oklab, var(--color-primary), #000 8%);
-    --button-bg-pressed: color-mix(in oklab, var(--color-primary), #000 12%);
-    --button-fg: var(--color-primary-content);
+  /* -----------------------------------------------------------------------
+   * State — what is happening now. Declared after flavor so it wins on source
+   * order: a condition outranks a preference.
+   *
+   * State does not repaint the button. `success` and `warning` are flavors —
+   * what this button *is* — and were briefly listed here, which made a warning
+   * button unable to also be loading. What state changes is behaviour and
+   * affordance.
+   * --------------------------------------------------------------------- */
+  .button--state-loading {
+    cursor: progress;
+  }
+  .button--state-error,
+  .button--state-invalid {
+    --button-accent: var(--color-error);
+    --button-accent-fg: var(--color-error-content);
+  }
+  .button--state-disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .button--state-hidden {
+    display: none;
   }
 
-  .button--secondary {
-    --button-bg: var(--color-base-200);
-    --button-bg-hover: var(--color-base-300);
-    --button-bg-pressed: color-mix(in oklab, var(--color-base-300), #000 10%);
-    --button-fg: var(--color-base-content);
+  /* -----------------------------------------------------------------------
+   * Variant — decides how the accent is spent
+   * --------------------------------------------------------------------- */
+  .button--solid {
+    --button-bg: var(--button-accent);
+    --button-bg-hover: color-mix(in oklab, var(--button-accent), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
+    --button-bg-pressed: color-mix(in oklab, var(--button-accent), var(--shade, var(--color-base-content)) var(--shade-pressed, 12%));
+    --button-fg: var(--button-accent-fg);
+    --button-border: transparent;
   }
 
-  .button--tertiary {
-    --button-bg: var(--color-base-100);
-    --button-bg-hover: var(--color-base-200);
-    --button-bg-pressed: var(--color-base-300);
-    --button-fg: var(--color-base-content);
-    --button-border: var(--color-base-300);
+  .button--soft {
+    --button-bg: color-mix(in oklab, var(--button-accent), var(--color-base-100) 86%);
+    --button-bg-hover: color-mix(in oklab, var(--button-accent), var(--color-base-100) 80%);
+    --button-bg-pressed: color-mix(in oklab, var(--button-accent), var(--color-base-100) 74%);
+    --button-fg: var(--button-accent);
+    --button-border: transparent;
   }
 
   .button--outline {
     --button-bg: transparent;
-    --button-bg-hover: color-mix(in oklab, var(--color-base-300), transparent 35%);
-    --button-bg-pressed: color-mix(in oklab, var(--color-base-300), transparent 10%);
-    --button-fg: var(--color-base-content);
-    --button-border: var(--color-base-300);
+    --button-bg-hover: color-mix(in oklab, var(--button-accent), transparent 88%);
+    --button-bg-pressed: color-mix(in oklab, var(--button-accent), transparent 80%);
+    --button-fg: var(--button-accent);
+    --button-border: var(--button-accent);
   }
 
+  /* Ghost keeps body text colour: it is chrome, not an accent surface. */
   .button--ghost {
     --button-bg: transparent;
     --button-bg-hover: var(--color-base-200);
     --button-bg-pressed: var(--color-base-300);
     --button-fg: var(--color-base-content);
+    --button-border: transparent;
   }
 
-  .button--danger {
-    --button-bg: var(--color-error);
-    --button-bg-hover: color-mix(in oklab, var(--color-error), #000 8%);
-    --button-bg-pressed: color-mix(in oklab, var(--color-error), #000 12%);
-    --button-fg: var(--color-error-content);
+  .button--plain {
+    --button-bg: transparent;
+    --button-bg-hover: transparent;
+    --button-bg-pressed: transparent;
+    --button-fg: var(--button-accent);
+    --button-border: transparent;
+    height: auto;
+    padding-inline: 0;
   }
 
-  .button--danger-soft {
-    --button-bg: color-mix(in oklab, var(--color-error), var(--color-base-100) 86%);
-    --button-bg-hover: color-mix(in oklab, var(--color-error), var(--color-base-100) 80%);
-    --button-bg-pressed: color-mix(in oklab, var(--color-error), var(--color-base-100) 74%);
-    --button-fg: var(--color-error);
+  .button--plain:hover {
+    text-decoration-line: underline;
+    text-underline-offset: 4px;
   }
 
-  .button--icon-only {
-    width: 2.5rem;
-    padding-inline: 0;
+  /* -----------------------------------------------------------------------
+   * Size
+   * --------------------------------------------------------------------- */
+  .button--xs {
+    height: 1.75rem;
+    padding-inline: 0.5rem;
+    font-size: 0.75rem;
+  }
+  .button--sm {
+    height: 2.25rem;
+    padding-inline: 0.75rem;
+  }
+  .button--md {
+    height: 2.5rem;
+    padding-inline: 1rem;
+  }
+  .button--lg {
+    height: 2.75rem;
+    padding-inline: 1.125rem;
+    font-size: 1rem;
+  }
+  .button--xl {
+    height: 3rem;
+    padding-inline: 1.375rem;
+    font-size: 1.0625rem;
   }
 
-  .button--icon-only.button--sm {
-    width: 2.25rem;
+  .button--xs:active,
+  .button--sm:active {
+    transform: scale(0.98);
+  }
+  .button--lg:active,
+  .button--xl:active {
+    transform: scale(0.96);
+  }
+
+  /* -----------------------------------------------------------------------
+   * Width — `w-full` is written by hand at 384 sites across 9 of 13 apps
+   * --------------------------------------------------------------------- */
+  .button--width-full {
+    width: 100%;
+  }
+  .button--width-fit {
+    width: fit-content;
+  }
+  .button--width-screen {
+    width: 100vw;
+  }
+
+  /* -----------------------------------------------------------------------
+   * Radius
+   * --------------------------------------------------------------------- */
+  .button--radius-none {
+    border-radius: 0;
+  }
+  .button--radius-sm {
+    border-radius: 0.25rem;
+  }
+  .button--radius-md {
+    border-radius: 0.5rem;
+  }
+  .button--radius-lg {
+    border-radius: 0.75rem;
+  }
+  .button--radius-full {
+    border-radius: 1.5rem;
   }
 
-  .button--icon-only.button--lg {
+  /* -----------------------------------------------------------------------
+   * Icon-only — square, driven off the size scale
+   * --------------------------------------------------------------------- */
+  .button--width-square {
+    padding-inline: 0;
+    width: 2.25rem;
+  }
+  .button--width-square.button--xs {
+    width: 1.75rem;
+  }
+  .button--width-square.button--sm {
+    width: 2.25rem;
+  }
+  .button--width-square.button--md {
+    width: 2.5rem;
+  }
+  .button--width-square.button--lg {
     width: 2.75rem;
   }
+  .button--width-square.button--xl {
+    width: 3rem;
+  }
 
-  .button--full-width {
+  /* -----------------------------------------------------------------------
+   * Slots
+   * --------------------------------------------------------------------- */
+  .button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    margin-block: 0.125rem;
+    height: 1rem;
+    width: 1rem;
+    flex-shrink: 0;
+    align-self: center;
+  }
+
+  .button__icon > * {
     width: 100%;
+    height: 100%;
+    pointer-events: none;
   }
 
   .button__spinner {
     display: inline-block;
     width: 1rem;
     height: 1rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 2px solid currentColor;
     border-right-color: transparent;
     animation: button-spinner 700ms linear infinite;
@@ -192,3 +314,18 @@
     }
   }
 }
+
+@layer components {
+  /* -----------------------------------------------------------------------
+   * Theme-defined flavors
+   *
+   * `flavor` is open: a theme can define `flavor="hip"` and style it here
+   * without a library change. Every component mirrors the raw value to
+   * `data-flavor`, so one selector per flavor covers the whole library:
+   *
+   *   [data-flavor="hip"] { --button-accent: oklch(...); }
+   *
+   * The four built-ins keep their compiled class-table path above; this is
+   * the escape hatch for everything else.
+   * --------------------------------------------------------------------- */
+}