@pathscale/ui 1.2.10 → 1.3.0

package/dist/components/menu/Menu.css

@@ -1,199 +1,199 @@
-@layer components {
-  .menu {
-    position: relative;
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    gap: 0.25rem;
-    overflow: clip;
-    padding: 0.25rem;
-  }
-
-  .menu [data-slot="separator"] {
-    margin-inline-start: 3%;
-    width: 94%;
-  }
-
-  .menu-item {
-    position: relative;
-    display: flex;
-    min-height: 2.25rem;
-    width: 100%;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 0.75rem;
-    border-radius: 1rem;
-    padding-inline: 0.5rem;
-    padding-block: 0.375rem;
-    outline: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    transition:
-      transform 250ms var(--ease-out-quart),
-      box-shadow 150ms var(--ease-out);
-    cursor: var(--cursor-interactive);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .menu-item {
-      transition: none;
-    }
-  }
-
-  .menu-item [data-slot="label"] {
-    pointer-events: none;
-    width: fit-content;
-    user-select: none;
-  }
-
-  .menu-item [data-slot="description"] {
-    pointer-events: none;
-    text-wrap: wrap;
-    user-select: none;
-  }
-
-  .menu-item [data-slot="submenu-indicator"] svg {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-
-  .menu-item:has(.menu-item__indicator) {
-    padding-inline-start: 1.75rem;
-  }
-
-  .menu-item[data-has-submenu="true"]:has(.menu-item__indicator) {
-    padding-inline-end: 1.75rem;
-    padding-inline-start: 0.5rem;
-  }
-
-  .menu-item:focus-visible:not(:focus),
-  .menu-item[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-  }
-
-  .menu-item:active,
-  .menu-item[data-pressed="true"] {
-    transform: scale(0.98);
-  }
-
-  @media (hover: hover) {
-    .menu-item:hover,
-    .menu-item[data-hovered="true"] {
-      background-color: var(--color-default);
-    }
-  }
-
-  .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"],
-  .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"],
-  .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"] {
-    transition: stroke-dashoffset 100ms linear;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"],
-    .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"],
-    .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"] {
-      transition: none;
-    }
-  }
-
-  .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--dot"],
-  .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--dot"],
-  .menu-item[data-selected="true"] [data-slot="menu-item-indicator--dot"] {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  .menu-item[data-disabled="true"],
-  .menu-item[aria-disabled="true"] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .menu-item__indicator {
-    position: absolute;
-    inset-inline-start: 0.5rem;
-    top: 50%;
-    display: flex;
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
-    transform: translateY(-50%);
-    align-items: center;
-    justify-content: center;
-    color: var(--color-muted, color-mix(in oklab, var(--color-base-content) 55%, transparent));
-    transition: all 250ms ease;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .menu-item__indicator {
-      transition: none;
-    }
-  }
-
-  .menu-item[data-has-submenu="true"] .menu-item__indicator {
-    inset-inline-end: 0.5rem;
-    inset-inline-start: auto;
-  }
-
-  .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] {
-    width: 0.625rem;
-    height: 0.625rem;
-  }
-
-  .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] {
-    transition: all 300ms ease;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] {
-      transition: none;
-    }
-  }
-
-  .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
-    width: 0.5rem;
-    height: 0.5rem;
-    transform: scale(0.7);
-    opacity: 0;
-  }
-
-  .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
-    transition: all 250ms ease;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
-      transition: none;
-    }
-  }
-
-  .menu-item__indicator--submenu {
-    color: var(--color-muted, color-mix(in oklab, var(--color-base-content) 55%, transparent));
-  }
-
-  .menu-item__indicator--submenu svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-  .menu-item--danger .menu-item__indicator {
-    color: var(--color-danger);
-  }
-
-  .menu-item--danger [data-slot="label"] {
-    color: var(--color-danger);
-  }
-
-  .menu-section {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0;
-  }
-
-  .menu-section__title {
-    width: 100%;
-  }
-}
+@layer components {
+  .menu {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 0.25rem;
+    overflow: clip;
+    padding: 0.25rem;
+  }
+
+  .menu [data-slot="separator"] {
+    margin-inline-start: 3%;
+    width: 94%;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    min-height: 2.25rem;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.75rem;
+    border-radius: 1rem;
+    padding-inline: 0.5rem;
+    padding-block: 0.375rem;
+    outline: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      transform 250ms var(--ease-out-quart),
+      box-shadow 150ms var(--ease-out);
+    cursor: var(--cursor-interactive);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu-item {
+      transition: none;
+    }
+  }
+
+  .menu-item [data-slot="label"] {
+    pointer-events: none;
+    width: fit-content;
+    user-select: none;
+  }
+
+  .menu-item [data-slot="description"] {
+    pointer-events: none;
+    text-wrap: wrap;
+    user-select: none;
+  }
+
+  .menu-item [data-slot="submenu-indicator"] svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .menu-item:has(.menu-item__indicator) {
+    padding-inline-start: 1.75rem;
+  }
+
+  .menu-item[data-has-submenu="true"]:has(.menu-item__indicator) {
+    padding-inline-end: 1.75rem;
+    padding-inline-start: 0.5rem;
+  }
+
+  .menu-item:focus-visible:not(:focus),
+  .menu-item[data-focus-visible="true"] {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .menu-item:active,
+  .menu-item[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+
+  @media (hover: hover) {
+    .menu-item:hover,
+    .menu-item[data-hovered="true"] {
+      background-color: var(--color-default);
+    }
+  }
+
+  .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"],
+  .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"],
+  .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"] {
+    transition: stroke-dashoffset 100ms linear;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"],
+    .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"],
+    .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"] {
+      transition: none;
+    }
+  }
+
+  .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--dot"],
+  .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--dot"],
+  .menu-item[data-selected="true"] [data-slot="menu-item-indicator--dot"] {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  .menu-item[data-disabled="true"],
+  .menu-item[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item__indicator {
+    position: absolute;
+    inset-inline-start: 0.5rem;
+    top: 50%;
+    display: flex;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    transform: translateY(-50%);
+    align-items: center;
+    justify-content: center;
+    color: var(--color-muted, color-mix(in oklab, var(--color-base-content) 55%, transparent));
+    transition: all 250ms ease;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu-item__indicator {
+      transition: none;
+    }
+  }
+
+  .menu-item[data-has-submenu="true"] .menu-item__indicator {
+    inset-inline-end: 0.5rem;
+    inset-inline-start: auto;
+  }
+
+  .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] {
+    transition: all 300ms ease;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] {
+      transition: none;
+    }
+  }
+
+  .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
+    width: 0.5rem;
+    height: 0.5rem;
+    transform: scale(0.7);
+    opacity: 0;
+  }
+
+  .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
+    transition: all 250ms ease;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
+      transition: none;
+    }
+  }
+
+  .menu-item__indicator--submenu {
+    color: var(--color-muted, color-mix(in oklab, var(--color-base-content) 55%, transparent));
+  }
+
+  .menu-item__indicator--submenu svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .menu-item--danger .menu-item__indicator {
+    color: var(--color-danger);
+  }
+
+  .menu-item--danger [data-slot="label"] {
+    color: var(--color-danger);
+  }
+
+  .menu-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+  }
+
+  .menu-section__title {
+    width: 100%;
+  }
+}

package/dist/components/metal-border/MetalBorder.classes.d.ts

@@ -0,0 +1,26 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "metal-border";
+        readonly kind: {
+            readonly pill: "metal-border--pill";
+            readonly circle: "metal-border--circle";
+        };
+        readonly flag: {
+            readonly enabled: "metal-border--enabled";
+            readonly unavailable: "metal-border--unavailable";
+            readonly paused: "metal-border--paused";
+        };
+    };
+    readonly Effect: {
+        readonly base: "metal-border__effect";
+    };
+    readonly Canvas: {
+        readonly base: "metal-border__canvas";
+    };
+    readonly Glow: {
+        readonly base: "metal-border__glow";
+    };
+    readonly Content: {
+        readonly base: "metal-border__content";
+    };
+};

package/dist/components/metal-border/MetalBorder.classes.js

@@ -0,0 +1,27 @@
+const CLASSES = {
+    Root: {
+        base: "metal-border",
+        kind: {
+            pill: "metal-border--pill",
+            circle: "metal-border--circle"
+        },
+        flag: {
+            enabled: "metal-border--enabled",
+            unavailable: "metal-border--unavailable",
+            paused: "metal-border--paused"
+        }
+    },
+    Effect: {
+        base: "metal-border__effect"
+    },
+    Canvas: {
+        base: "metal-border__canvas"
+    },
+    Glow: {
+        base: "metal-border__glow"
+    },
+    Content: {
+        base: "metal-border__content"
+    }
+};
+export { CLASSES };

package/dist/components/metal-border/MetalBorder.css

@@ -0,0 +1,40 @@
+@layer components {
+  .metal-border {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    max-inline-size: 100%;
+    border-radius: var(--metal-border-radius, inherit);
+  }
+
+  .metal-border--enabled {
+    isolation: isolate;
+  }
+
+  .metal-border__effect,
+  .metal-border__canvas,
+  .metal-border__glow {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+
+  .metal-border__effect {
+    pointer-events: none;
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .metal-border__canvas,
+  .metal-border__glow,
+  .metal-border__glow > .metal-fx-glow-svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .metal-border__content {
+    position: relative;
+    z-index: 0;
+    border-radius: inherit;
+  }
+}

package/dist/components/metal-border/MetalBorder.d.ts

@@ -0,0 +1,20 @@
+import "./MetalBorder.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import { type PresetName, type PresetTheme } from "./engine";
+export type MetalBorderPreset = PresetName;
+export type MetalBorderKind = "pill" | "circle";
+export type MetalBorderTheme = PresetTheme | "auto";
+export type MetalBorderResolvedTheme = PresetTheme;
+export type MetalBorderProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children?: JSX.Element;
+    preset?: MetalBorderPreset;
+    strength?: number;
+    kind?: MetalBorderKind;
+    glow?: boolean;
+    paused?: boolean;
+    theme?: MetalBorderTheme;
+    cornerRadius?: number | string;
+    contentClass?: string;
+};
+export default function MetalBorder(props: MetalBorderProps): JSX.Element;