@lapismd/design-core 0.1.0 → 0.2.0

package/src/shared/shadcn/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -3,7 +3,7 @@
 
   let {
     ref = $bindable(null),
-    value = $bindable(),
+    value = $bindable(""),
     ...restProps
   }: DropdownMenuPrimitive.RadioGroupProps = $props();
 </script>

package/src/shared/shadcn/scroll-area/scroll-area.svelte

@@ -292,6 +292,7 @@
         width: 0.25rem;
         flex: 0 0 0.25rem;
         margin-inline-start: auto;
+        margin-inline-end: 1px;
       }
 
       [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-orientation="vertical"]
@@ -308,6 +309,7 @@
         height: 0.25rem;
         flex: 0 0 0.25rem;
         margin-block-start: auto;
+        margin-block-end: 1px;
       }
 
       [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-orientation="horizontal"]

package/src/shared/shadcn/spinner/spinner.svelte

@@ -18,9 +18,9 @@
 <Loader2Icon
   {...omitDataUiComponent(restProps)}
   {role}
-  name={name === null ? undefined : name}
-  color={color === null ? undefined : color}
-  stroke={stroke === null ? undefined : stroke}
+  {...name == null ? {} : { name }}
+  {...color == null ? {} : { color }}
+  {...stroke == null ? {} : { stroke }}
   aria-label={ariaLabel}
   data-ui-component="spinner"
   class={className}

package/src/shared/shadcn/tooltip/tooltip-content.svelte

@@ -119,14 +119,20 @@
         fill: var(--foreground);
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
-        padding-inline: calc(var(--spacing) * 3);
+        padding-inline: var(
+          --ui-tooltip-padding-inline,
+          calc(var(--spacing) * 2.5)
+        );
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
-        padding-block: calc(var(--spacing) * 1.5);
+        padding-block: var(
+          --ui-tooltip-padding-block,
+          calc(var(--spacing) * 1)
+        );
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
-        font-size: var(--text-xs);
-        line-height: var(--tw-leading, var(--text-xs--line-height));
+        font-size: var(--ui-tooltip-font-size, 0.6875rem);
+        line-height: var(--ui-tooltip-line-height, 1rem);
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
         color: var(--ui-tooltip-foreground, var(--background));

package/src/shared/shadcn/tooltip/tooltip.tokens.ts

@@ -4,6 +4,10 @@ export const tooltipTokenNames = {
   borderColor: "--ui-tooltip-border-color",
   radius: "--ui-tooltip-radius",
   focusRingColor: "--ui-tooltip-focus-ring-color",
+  fontSize: "--ui-tooltip-font-size",
+  lineHeight: "--ui-tooltip-line-height",
+  paddingInline: "--ui-tooltip-padding-inline",
+  paddingBlock: "--ui-tooltip-padding-block",
 } as const;
 
 export type TooltipToken =

package/src/shared/shell/app-shell/AppShell.css

@@ -64,6 +64,10 @@
   background: transparent;
 }
 
+.ui-minimal-app-shell__sidebar[hidden] {
+  display: none !important;
+}
+
 .ui-minimal-app-shell__sidebar[data-side="left"] {
   width: var(--ui-shell-sidebar-size, var(--ui-shell-left-sidebar-width));
 }
@@ -78,12 +82,19 @@
   background: var(--background);
 }
 
+.ui-minimal-app-shell__sidebar[data-variant="rail"][data-presentation="inline"] {
+  margin-block: var(--ui-shell-main-block-inset);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
 .ui-minimal-app-shell__sidebar[data-variant="outer"][data-side="left"][data-presentation="inline"] {
   border-inline-end: 1px solid var(--border);
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"] {
   position: absolute;
   z-index: 31;
   inset-block: 0;
@@ -92,14 +103,12 @@
     color-mix(in srgb, var(--foreground) 18%, transparent);
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="left"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"] {
   inset-inline-start: 0;
   border-inline-end: 1px solid var(--border);
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="right"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"] {
   inset-inline-end: 0;
   margin-inline-start: 0;
   border-inline-start: 1px solid var(--border);
@@ -139,24 +148,27 @@
   display: block;
 }
 
-.ui-minimal-app-shell[data-desktop-overlay-right]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__sidebar[data-side="right"]:not(
-    [data-presentation="overlay"]
-  ):not([data-desktop-overlay-preview]),
-.ui-minimal-app-shell[data-desktop-overlay-left]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__sidebar[data-mobile-panel-id="left"]:not(
-    [data-presentation="overlay"]
-  ):not([data-desktop-overlay-preview]),
-.ui-minimal-app-shell[data-desktop-overlay-outer-left]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__sidebar[data-side="left"][data-variant="outer"]:not(
-    [data-presentation="overlay"]
-  ):not([data-desktop-overlay-preview]) {
+.ui-minimal-app-shell__sidebar[data-desktop-constrained][data-constrained-presentation="preview"][data-presentation="inline"] {
   display: none;
 }
 
+.ui-minimal-app-shell__sidebar[data-presentation="replace-main"] {
+  position: absolute;
+  z-index: 31;
+  inset-block-start: var(--ui-shell-replacement-block-start, 0px);
+  inset-block-end: var(--ui-shell-replacement-block-end, 0px);
+  inset-inline-start: var(--ui-shell-replacement-inline-start, 0px);
+  inset-inline-end: var(--ui-shell-replacement-inline-end, 0px);
+  display: flex;
+  width: auto;
+  overflow: hidden;
+  margin: 0;
+  border: var(--ui-shell-main-border);
+  border-radius: var(--ui-shell-main-radius);
+  background: var(--background);
+  box-shadow: none;
+}
+
 .ui-minimal-app-shell__sidebar[data-side="right"][data-state="expanded"] {
   border-inline-start: 1px solid var(--border);
 }
@@ -171,13 +183,11 @@
   min-width: 0;
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="left"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"] {
   width: var(--ui-shell-sidebar-size, var(--ui-shell-left-sidebar-width));
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="right"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"] {
   width: var(--ui-shell-sidebar-size, var(--ui-shell-right-sidebar-width));
 }
 
@@ -271,6 +281,76 @@
   box-shadow: var(--ui-shell-main-shadow);
 }
 
+.ui-minimal-app-shell__surface-layer {
+  position: absolute;
+  z-index: 32;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.ui-minimal-app-shell__surface-layer-scrim {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-shell-main-radius);
+  background: color-mix(in oklab, var(--background) 75%, transparent);
+  pointer-events: auto;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.ui-minimal-app-shell__surface-layer-scrim:hover {
+  background: color-mix(in oklab, var(--background) 65%, transparent);
+}
+
+.ui-minimal-app-shell__surface-layer-surface {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: var(--ui-shell-surface-layer-main-start-allowance);
+  inset-inline-end: var(--ui-shell-surface-layer-inline-end-inset);
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  grid-template-rows: auto minmax(0, 1fr);
+  border: var(--ui-shell-main-border);
+  border-radius: var(--ui-shell-main-radius);
+  outline: none;
+  background: var(--background);
+  box-shadow: none;
+  pointer-events: auto;
+}
+
+.ui-minimal-app-shell__surface-layer-surface:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+.ui-minimal-app-shell__surface-layer-header {
+  display: flex;
+  min-width: 0;
+  min-height: var(--ui-shell-toolbar-height);
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.625rem 0.75rem 0.625rem 1rem;
+}
+
+.ui-minimal-app-shell__surface-layer-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-minimal-app-shell__surface-layer-scroll-area {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
 .ui-minimal-app-shell[data-display-mode="desktop"] .ui-minimal-app-shell__main {
   min-width: min(100%, var(--ui-shell-desktop-min-main-width));
 }
@@ -301,12 +381,6 @@
   margin-inline-end: var(--ui-shell-main-block-inset);
 }
 
-.ui-minimal-app-shell[data-desktop-overlay-right]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__main {
-  margin-inline-end: var(--ui-shell-main-block-inset);
-}
-
 .ui-minimal-app-shell__toolbar {
   display: flex;
   flex: none;
@@ -434,6 +508,11 @@
   min-height: 0;
 }
 
+.ui-minimal-app-shell[data-display-mode="mobile"]
+  .ui-minimal-app-shell__surface-layer-surface {
+  inset-inline-start: 0;
+}
+
 .ui-minimal-app-shell[data-display-mode="mobile"]
   > .ui-minimal-app-shell__composition {
   display: none;
@@ -445,7 +524,8 @@
   height: 100%;
   min-width: 0;
   min-height: 0;
-  overflow: hidden;
+  /* Stage position belongs to the translated track, not focus scrolling. */
+  overflow: clip;
 }
 
 .ui-minimal-app-shell__mobile-track {

package/src/shared/shell/app-shell/AppShell.demo.css

@@ -0,0 +1,37 @@
+/* Story-only viewport variants. Shell and example presentation styles live
+   with the components that own them. */
+.ui-shell-story-frame-fluid {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+.ui-shell-story-frame-fluid:has([data-display-mode="mobile"]) {
+  padding-block: 0;
+}
+
+.ui-shell-story-frame-tablet,
+.ui-shell-story-frame-mobile {
+  width: 100%;
+  min-width: 0;
+  margin-inline: auto;
+  padding-block: 0;
+}
+
+.ui-shell-story-frame-tablet {
+  max-width: 56rem;
+}
+
+.ui-shell-story-frame-mobile {
+  max-width: 30rem;
+  padding-inline: 0.5rem;
+}
+
+.ui-shell-story-frame-constrained-desktop {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 56rem;
+  margin-inline: auto;
+}

package/src/shared/shell/app-shell/AppShellBodyContent.svelte

@@ -2,18 +2,22 @@
   import type { HTMLAttributes } from "svelte/elements";
   import type { WithElementRef } from "../../../lib/utils.js";
   import { ScrollArea } from "../../shadcn/scroll-area/index.js";
+  import type { ScrollAreaVisibility } from "../../shadcn/scroll-area/scroll-area-model.js";
   import { useAppShell } from "./app-shell-context.svelte.js";
   import { useAppShellBody } from "./app-shell-body-context.svelte.js";
 
   let {
     ref = $bindable(null),
     label,
+    scrollbarVisibility,
     class: className,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     /** Optional accessible name for this independently scrolling region. */
     label?: string;
+    /** When its scrollbar is painted: while scrolling, on hover, or always. */
+    scrollbarVisibility?: ScrollAreaVisibility;
   } = $props();
 
   useAppShell();
@@ -38,7 +42,7 @@
   aria-label={label}
 >
   <ScrollArea
-    type="auto"
+    type={scrollbarVisibility ?? "auto"}
     class="ui-minimal-app-shell__body-content-scroll-area"
   >
     {@render children?.()}

package/src/shared/shell/app-shell/AppShellBodySidebar.svelte

@@ -7,6 +7,7 @@
   import type { HTMLAttributes } from "svelte/elements";
   import type { WithElementRef } from "../../../lib/utils.js";
   import { ScrollArea } from "../../shadcn/scroll-area/index.js";
+  import type { ScrollAreaVisibility } from "../../shadcn/scroll-area/scroll-area-model.js";
   import { useAppShell } from "./app-shell-context.svelte.js";
   import { useAppShellBody } from "./app-shell-body-context.svelte.js";
   import type { AppShellSide } from "./app-shell-controller.svelte.js";
@@ -19,6 +20,7 @@
     panelId,
     label,
     mobileLabel,
+    scrollbarVisibility,
     tabindex: _tabindex,
     class: className,
     children,
@@ -34,6 +36,8 @@
     label?: string;
     /** Mobile edge selector label. Defaults to the accessible landmark label. */
     mobileLabel?: string;
+    /** When its scrollbar is painted: while scrolling, on hover, or always. */
+    scrollbarVisibility?: ScrollAreaVisibility;
   } = $props();
 
   const controller = useAppShell();
@@ -108,7 +112,7 @@
   inert={(mobileMode && !mobileActive) || (!mobileMode && !open)}
 >
   <ScrollArea
-    type="auto"
+    type={scrollbarVisibility ?? "auto"}
     class="ui-minimal-app-shell__body-sidebar-scroll-area"
   >
     {@render children?.()}

package/src/shared/shell/app-shell/AppShellMain.svelte

@@ -8,15 +8,24 @@
   let {
     ref = $bindable(null),
     tabindex: _tabindex,
+    inert: inertProp,
+    "aria-hidden": ariaHidden,
     class: className,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 
   const controller = useAppShell();
+  let mainOccluded = $state(controller.mainOccluded);
+  const unsubscribeProjection = controller.onProjectionChange(() => {
+    mainOccluded = controller.mainOccluded;
+  });
 
   $effect(() => controller.mobile.setMainElement(ref));
-  onDestroy(() => controller.mobile.setMainElement(null));
+  onDestroy(() => {
+    unsubscribeProjection();
+    controller.mobile.setMainElement(null);
+  });
 </script>
 
 <div
@@ -30,6 +39,8 @@
   class={["ui-minimal-app-shell__main", className].filter(Boolean).join(" ")}
   data-ui-component="app-shell"
   data-ui-part="main"
+  inert={Boolean(inertProp) || mainOccluded}
+  aria-hidden={Boolean(inertProp) || mainOccluded ? "true" : ariaHidden}
 >
   {@render children?.()}
 </div>

package/src/shared/shell/app-shell/AppShellMobilePanelSelector.svelte

@@ -37,7 +37,7 @@
     <Select.Root
       type="single"
       bind:open
-      value={activePanelId}
+      value={activePanelId ?? panels[0]?.id ?? ""}
       onValueChange={(value) => {
         if (value) controller.mobile.selectPanel(side, value);
       }}

package/src/shared/shell/app-shell/AppShellRoot.svelte

@@ -64,6 +64,10 @@
   let dragOffset = $state<number | null>(null);
   let measuredPanelWidth = $state(0);
   let measuredDesktopMinMainWidth = $state(576);
+  let projectionVersion = $state(0);
+  const unsubscribeProjection = rootController.onProjectionChange(() => {
+    projectionVersion += 1;
+  });
   let rootStyle = $derived(
     [
       style,
@@ -93,6 +97,7 @@
     rootController.mobile.panelsFor("right").length > 0,
   );
   let constrainedDesktopPanelIds = $derived.by(() => {
+    void projectionVersion;
     if (resolvedMode !== "desktop" || !Number.isFinite(observedWidth)) {
       return [] as string[];
     }
@@ -101,7 +106,7 @@
       desktopMinMainWidth ?? measuredDesktopMinMainWidth,
     );
     if (minimumMainWidth === 0) return [] as string[];
-    const candidates = [
+    const registeredPanels = [
       ...rootController.mobile
         .panelsFor("right")
         .filter((panel) => panel.kind === "sidebar"),
@@ -111,18 +116,33 @@
       ...rootController.mobile
         .panelsFor("left")
         .filter((panel) => panel.kind === "sidebar" && panel.id === "left"),
-    ].flatMap((panel) => {
+    ];
+    const candidates = registeredPanels.flatMap((panel, order) => {
       const sidebar = rootController.getPanel(panel.id);
-      if (!sidebar || sidebar.closed) return [];
+      if (
+        !sidebar ||
+        sidebar.closed ||
+        rootController.isPanelSuspended(panel.id)
+      ) {
+        return [];
+      }
       return [
         {
           id: panel.id,
+          order,
+          priority: Number.isFinite(panel.constraintPriority)
+            ? (panel.constraintPriority ?? order)
+            : order,
           width: sidebar.collapsed
             ? 48
             : (sidebar.width ?? APP_SHELL_DEFAULT_SIDEBAR_WIDTH),
         },
       ];
     });
+    candidates.sort(
+      (left, right) =>
+        left.priority - right.priority || left.order - right.order,
+    );
     let occupiedWidth = candidates.reduce(
       (total, candidate) => total + candidate.width,
       minimumMainWidth + 16,
@@ -139,16 +159,8 @@
   $effect(() => rootController.mobile.setResolvedMode(resolvedMode));
   $effect(() => {
     const panelIds = constrainedDesktopPanelIds;
-    queueMicrotask(() => {
-      for (const sidebar of ref?.querySelectorAll<HTMLElement>(
-        '[data-ui-part="sidebar"][data-desktop-overlay-preview]',
-      ) ?? []) {
-        const panelId = sidebar.dataset.mobilePanelId;
-        if (!panelId || !panelIds.includes(panelId)) {
-          sidebar.removeAttribute("data-desktop-overlay-preview");
-        }
-      }
-    });
+    untrack(() => rootController.setConstrainedPanelIds(panelIds));
+    untrack(() => rootController.syncPanelProjections());
   });
   $effect(() => rootController.mobile.setRootElement(ref));
   $effect(() => rootController.mobile.setPanelHost("left", leftPanelHost));
@@ -175,11 +187,13 @@
   });
 
   onDestroy(() => {
+    unsubscribeProjection();
     clearGesture();
     rootController.mobile.setRootElement(null);
     rootController.mobile.setPanelHost("left", null);
     rootController.mobile.setMainHost(null);
     rootController.mobile.setPanelHost("right", null);
+    rootController.setConstrainedPanelIds([]);
     void rootController.flushSave();
   });