@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/components/forms/time-picker/time-picker.svelte

@@ -0,0 +1,127 @@
+<!--
+  Origin: the React package 2.23.0 `time-picker.tsx`
+  Diverged: `value` is an `@internationalized/date` `Time`, bindable, with
+    `onValueChange` for React's `onChange`, where React carried a JS `Date`
+    whose date part passed through untouched (round 7 plan, R7-1, R7-6). A
+    caller with a full datetime joins a DatePicker's day and this time. Spreads
+    the rest onto the row, as every component does.
+-->
+<script lang="ts" module>
+  import type { Time } from '@internationalized/date'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * Three selects standing in for a clock: hour, minute, and AM/PM.
+   *
+   * There is no popover and no dial: these are schedule and shift-boundary
+   * fields, not a stopwatch, and a row of selects reads faster than a dial for
+   * "set this to 5:30 PM" while composing cleanly next to a `DatePicker`.
+   *
+   * A partial selection (only the hour picked, say) fills the rest from the
+   * current value or 12:00 AM rather than emitting a half-formed time.
+   */
+  export type TimePickerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    value?: Time
+    onValueChange?: (value: Time) => void
+    disabled?: boolean
+  }
+
+  type Period = 'AM' | 'PM'
+
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  const HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1))
+  const MINUTES = Array.from({ length: 60 }, (_, i) => pad(i))
+  const PERIODS: Period[] = ['AM', 'PM']
+  const toItems = (values: readonly string[]) => values.map((value) => ({ value, label: value }))
+  const HOUR_ITEMS = toItems(HOURS)
+  const MINUTE_ITEMS = toItems(MINUTES)
+  const PERIOD_ITEMS = toItems(PERIODS)
+</script>
+
+<script lang="ts">
+  import { Time as TimeValue } from '@internationalized/date'
+
+  import { cn } from '../../../utils/cn.js'
+  import Select from '../select/select.svelte'
+  import SelectContent from '../select/select-content.svelte'
+  import SelectItem from '../select/select-item.svelte'
+  import SelectTrigger from '../select/select-trigger.svelte'
+  import SelectValue from '../select/select-value.svelte'
+
+  let {
+    value = $bindable(),
+    onValueChange,
+    disabled = false,
+    class: className,
+    ...rest
+  }: TimePickerProps = $props()
+
+  const hour = $derived(value ? String(value.hour % 12 === 0 ? 12 : value.hour % 12) : '')
+  const minute = $derived(value ? pad(value.minute) : '')
+  const period = $derived<Period | ''>(value ? (value.hour >= 12 ? 'PM' : 'AM') : '')
+
+  function commit(next: { hour?: string; minute?: string; period?: Period }) {
+    const nextHour = Number(next.hour ?? (hour || '12'))
+    const nextMinute = Number(next.minute ?? (minute || '0'))
+    const nextPeriod = next.period ?? (period || 'AM')
+    const hours24 = nextPeriod === 'PM' ? (nextHour % 12) + 12 : nextHour % 12
+    const time = new TimeValue(hours24, nextMinute)
+    value = time
+    onValueChange?.(time)
+  }
+</script>
+
+<div data-slot="time-picker" class={cn('flex items-center gap-2', className)} {...rest}>
+  <Select
+    type="single"
+    value={hour}
+    items={HOUR_ITEMS}
+    {disabled}
+    onValueChange={(picked) => commit({ hour: picked })}
+  >
+    <SelectTrigger class="w-[72px]" aria-label="Hour">
+      <SelectValue placeholder="--" />
+    </SelectTrigger>
+    <SelectContent>
+      {#each HOURS as option (option)}
+        <SelectItem value={option} label={option} />
+      {/each}
+    </SelectContent>
+  </Select>
+
+  <span class="text-muted-foreground">:</span>
+
+  <Select
+    type="single"
+    value={minute}
+    items={MINUTE_ITEMS}
+    {disabled}
+    onValueChange={(picked) => commit({ minute: picked })}
+  >
+    <SelectTrigger class="w-[72px]" aria-label="Minute">
+      <SelectValue placeholder="--" />
+    </SelectTrigger>
+    <SelectContent>
+      {#each MINUTES as option (option)}
+        <SelectItem value={option} label={option} />
+      {/each}
+    </SelectContent>
+  </Select>
+
+  <Select
+    type="single"
+    value={period}
+    items={PERIOD_ITEMS}
+    {disabled}
+    onValueChange={(picked) => commit({ period: picked as Period })}
+  >
+    <SelectTrigger class="w-[76px]" aria-label="AM or PM">
+      <SelectValue placeholder="AM" />
+    </SelectTrigger>
+    <SelectContent>
+      {#each PERIODS as option (option)}
+        <SelectItem value={option} label={option} />
+      {/each}
+    </SelectContent>
+  </Select>
+</div>

package/dist/components/forms/time-picker/time-picker.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Time } from '@internationalized/date';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Three selects standing in for a clock: hour, minute, and AM/PM.
+ *
+ * There is no popover and no dial: these are schedule and shift-boundary
+ * fields, not a stopwatch, and a row of selects reads faster than a dial for
+ * "set this to 5:30 PM" while composing cleanly next to a `DatePicker`.
+ *
+ * A partial selection (only the hour picked, say) fills the rest from the
+ * current value or 12:00 AM rather than emitting a half-formed time.
+ */
+export type TimePickerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    value?: Time;
+    onValueChange?: (value: Time) => void;
+    disabled?: boolean;
+};
+declare const TimePicker: import("svelte").Component<TimePickerProps, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/components/forms/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Toggle, type ToggleProps } from './toggle.svelte';
+export { type ToggleSize, type ToggleVariant, toggleVariants } from './toggle-variants.js';

package/dist/components/forms/toggle/index.js

@@ -0,0 +1,2 @@
+export { default as Toggle } from './toggle.svelte';
+export { toggleVariants } from './toggle-variants.js';

package/dist/components/forms/toggle/toggle-variants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Origin: the React package 2.23.0 `toggle.tsx` (`toggleVariants`), itself shadcn/ui new-york `toggle`
+ * Diverged: split out of the component file, as badge-variants.ts is.
+ *   Classes, variants and defaults unchanged.
+ */
+import { type VariantProps } from 'class-variance-authority';
+export declare const toggleVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "solid" | "outline" | "segmented" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToggleVariant = NonNullable<VariantProps<typeof toggleVariants>['variant']>;
+export type ToggleSize = NonNullable<VariantProps<typeof toggleVariants>['size']>;

package/dist/components/forms/toggle/toggle-variants.js

@@ -0,0 +1,63 @@
+/**
+ * Origin: the React package 2.23.0 `toggle.tsx` (`toggleVariants`), itself shadcn/ui new-york `toggle`
+ * Diverged: split out of the component file, as badge-variants.ts is.
+ *   Classes, variants and defaults unchanged.
+ */
+import { cva } from 'class-variance-authority';
+import { segmentedItem } from '../../../utils/segmented-control.js';
+export const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+    // `size` first, `variant` second. cva emits variants in declaration order,
+    // so the later group wins a conflict — and `segmented` carries its own
+    // height and padding, which a size would otherwise overwrite.
+    variants: {
+        size: {
+            default: 'h-9 px-2 min-w-9',
+            sm: 'h-8 px-1.5 min-w-8',
+            lg: 'h-10 px-2.5 min-w-10',
+        },
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+            // One option inside a segmented track. It measures itself against the
+            // track rather than against a size, which is why it overrides both.
+            segmented: segmentedItem,
+            /**
+             * Outlined when off, filled with the brand when on — for a grid of
+             * toggles read at a glance, where "on" has to stand out across a whole
+             * table rather than sit quietly in a toolbar. The default `accent`
+             * fill is too close to the off state at that distance.
+             *
+             * Pressed and disabled keeps the fill at the disabled opacity: a value
+             * that is on and cannot be changed, such as a locked role's column.
+             *
+             * Keyed off `aria-pressed`, not `data-state`. A `TooltipTrigger
+             * asChild` writes its own `data-state` (`closed`, `delayed-open`) onto
+             * the toggle and erases `on`, so a solid toggle with a tooltip, which
+             * is every editable cell of a matrix, would always read as off. The
+             * `data-[state=on]` pair stays only to replace the base's accent fill,
+             * which would otherwise fight the brand fill on a toggle with no
+             * tooltip.
+             */
+            solid: 'border border-input bg-transparent text-muted-foreground hover:bg-muted data-[state=on]:bg-primary data-[state=on]:text-primary-foreground aria-pressed:border-primary aria-pressed:bg-primary aria-pressed:text-primary-foreground aria-pressed:hover:bg-primary/90',
+        },
+        /**
+         * One glyph and no label: a circle the size of the toggle's height. It
+         * needs an `aria-label`. A flag rather than more sizes, as on `Button`,
+         * so "how big" and "what shape" stay two choices.
+         */
+        iconOnly: {
+            true: 'rounded-full px-0 min-w-0',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        { iconOnly: true, size: 'sm', class: 'size-8' },
+        { iconOnly: true, size: 'default', class: 'size-9' },
+        { iconOnly: true, size: 'lg', class: 'size-10' },
+    ],
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+        iconOnly: false,
+    },
+});

package/dist/components/forms/toggle/toggle.svelte

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `toggle.tsx`, itself shadcn/ui new-york `toggle`
+  Svelte: shadcn-svelte `toggle`
+  Diverged: bits-ui Toggle for Radix Toggle, with `bind:pressed`. The React
+    divergences from shadcn (`segmented`, `solid`, `iconOnly`, size before
+    variant) carry over in toggle-variants.ts.
+-->
+<script lang="ts" module>
+  import { Toggle as TogglePrimitive } from 'bits-ui'
+
+  import type { ToggleSize, ToggleVariant } from './toggle-variants.js'
+
+  /**
+   * One on/off control, not a group: reach for `ToggleGroup` the moment a
+   * second option joins it. `variant="segmented"` only makes sense inside that
+   * group's track; a lone `Toggle` wants `default`, `outline` or `solid`.
+   */
+  export type ToggleProps = TogglePrimitive.RootProps & {
+    variant?: ToggleVariant
+    size?: ToggleSize
+    /** One glyph and no label: a circle the size of the toggle's height. Needs an `aria-label`. */
+    iconOnly?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { toggleVariants } from './toggle-variants.js'
+
+  let {
+    ref = $bindable(null),
+    pressed = $bindable(false),
+    variant,
+    size,
+    iconOnly,
+    class: className,
+    ...rest
+  }: ToggleProps = $props()
+</script>
+
+<TogglePrimitive.Root
+  bind:ref
+  bind:pressed
+  data-slot="toggle"
+  data-icon-only={iconOnly || undefined}
+  class={cn(toggleVariants({ variant, size, iconOnly }), className)}
+  {...rest}
+/>

package/dist/components/forms/toggle/toggle.svelte.d.ts

@@ -0,0 +1,16 @@
+import { Toggle as TogglePrimitive } from 'bits-ui';
+import type { ToggleSize, ToggleVariant } from './toggle-variants.js';
+/**
+ * One on/off control, not a group: reach for `ToggleGroup` the moment a
+ * second option joins it. `variant="segmented"` only makes sense inside that
+ * group's track; a lone `Toggle` wants `default`, `outline` or `solid`.
+ */
+export type ToggleProps = TogglePrimitive.RootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+    /** One glyph and no label: a circle the size of the toggle's height. Needs an `aria-label`. */
+    iconOnly?: boolean;
+};
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "ref" | "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/forms/toggle-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup, type ToggleGroupProps } from './toggle-group.svelte';
+export { default as ToggleGroupItem, type ToggleGroupItemProps } from './toggle-group-item.svelte';

package/dist/components/forms/toggle-group/index.js

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './toggle-group.svelte';
+export { default as ToggleGroupItem } from './toggle-group-item.svelte';

package/dist/components/forms/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,60 @@
+<!--
+  Origin: the React package 2.23.0 `toggle-group.tsx` (`ToggleGroupItem`), itself shadcn/ui new-york `toggle-group`
+  Svelte: shadcn-svelte `toggle-group`
+  Diverged: none beyond the port. The variant and size come from the group's
+    context first, as in React.
+-->
+<script lang="ts" module>
+  import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui'
+
+  import type { ToggleSize, ToggleVariant } from '../toggle/toggle-variants.js'
+
+  export type ToggleGroupItemProps = ToggleGroupPrimitive.ItemProps & {
+    variant?: ToggleVariant
+    size?: ToggleSize
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { toggleVariants } from '../toggle/toggle-variants.js'
+  import { getToggleGroupContext } from './toggle-group.svelte'
+
+  let {
+    ref = $bindable(null),
+    variant,
+    size,
+    class: className,
+    ...rest
+  }: ToggleGroupItemProps = $props()
+
+  const context = getToggleGroupContext()
+  const resolvedVariant = $derived(context?.variant || variant)
+  const resolvedSize = $derived(context?.size || size)
+
+  // The joined-border rules square off the inner edges of adjacent options so
+  // the group reads as one control. A segmented option is a pill floating in a
+  // track, so squaring its corners would draw the seam the track exists to avoid.
+  const joined = $derived(
+    resolvedVariant === 'segmented'
+      ? ''
+      : 'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+  )
+</script>
+
+<ToggleGroupPrimitive.Item
+  bind:ref
+  data-slot="toggle-group-item"
+  data-variant={resolvedVariant}
+  data-size={resolvedSize}
+  data-spacing={context?.spacing}
+  class={cn(
+    toggleVariants({ variant: resolvedVariant, size: resolvedSize }),
+    'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
+    resolvedVariant === 'segmented' &&
+      'data-[size=sm]:px-2 data-[size=sm]:text-xs data-[size=lg]:px-4 data-[size=lg]:text-sm',
+    joined,
+    className,
+  )}
+  {...rest}
+/>

package/dist/components/forms/toggle-group/toggle-group-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+import type { ToggleSize, ToggleVariant } from '../toggle/toggle-variants.js';
+export type ToggleGroupItemProps = ToggleGroupPrimitive.ItemProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare const ToggleGroupItem: import("svelte").Component<ToggleGroupItemProps, {}, "ref">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;

package/dist/components/forms/toggle-group/toggle-group.svelte

@@ -0,0 +1,82 @@
+<!--
+  Origin: the React package 2.23.0 `toggle-group.tsx` (`ToggleGroup`), itself shadcn/ui new-york `toggle-group`
+  Svelte: shadcn-svelte `toggle-group`
+  Diverged: bits-ui ToggleGroup for Radix, with `bind:value`. React's context
+    becomes Svelte context with getters, so items follow a group whose props
+    change. The `segmented` variant carries over from React.
+-->
+<script lang="ts" module>
+  import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui'
+  import { getContext, setContext } from 'svelte'
+
+  import type { ToggleSize, ToggleVariant } from '../toggle/toggle-variants.js'
+
+  interface ToggleGroupContext {
+    readonly variant: ToggleVariant | undefined
+    readonly size: ToggleSize | undefined
+    readonly spacing: number
+  }
+
+  const CONTEXT = Symbol('toggle-group')
+
+  export function getToggleGroupContext(): ToggleGroupContext | undefined {
+    return getContext<ToggleGroupContext | undefined>(CONTEXT)
+  }
+
+  /**
+   * A segmented group is a track, not a row of joined buttons: no gap between
+   * options, no shared border to collapse, and the wash is the point. `size`
+   * sizes the track, because a segmented item measures itself against it.
+   */
+  export type ToggleGroupProps = ToggleGroupPrimitive.RootProps & {
+    variant?: ToggleVariant
+    size?: ToggleSize
+    spacing?: number
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { segmentedTrack } from '../../../utils/segmented-control.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    variant,
+    size,
+    spacing = 0,
+    class: className,
+    ...rest
+  }: ToggleGroupProps = $props()
+
+  setContext<ToggleGroupContext>(CONTEXT, {
+    get variant() {
+      return variant
+    },
+    get size() {
+      return size
+    },
+    get spacing() {
+      return spacing
+    },
+  })
+
+  const group = $derived(
+    variant === 'segmented'
+      ? cn(segmentedTrack, 'data-[size=sm]:h-6 data-[size=lg]:h-9')
+      : 'flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
+  )
+</script>
+
+<!-- bits-ui types value per `type`; destructuring for bind loses that union. -->
+<ToggleGroupPrimitive.Root
+  bind:ref
+  bind:value={value as never}
+  data-slot="toggle-group"
+  data-variant={variant}
+  data-size={size}
+  data-spacing={spacing}
+  style="--gap: {spacing}"
+  class={cn('group/toggle-group', group, className)}
+  {...rest}
+/>

package/dist/components/forms/toggle-group/toggle-group.svelte.d.ts

@@ -0,0 +1,21 @@
+import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+import type { ToggleSize, ToggleVariant } from '../toggle/toggle-variants.js';
+interface ToggleGroupContext {
+    readonly variant: ToggleVariant | undefined;
+    readonly size: ToggleSize | undefined;
+    readonly spacing: number;
+}
+export declare function getToggleGroupContext(): ToggleGroupContext | undefined;
+/**
+ * A segmented group is a track, not a row of joined buttons: no gap between
+ * options, no shared border to collapse, and the wash is the point. `size`
+ * sizes the track, because a segmented item measures itself against it.
+ */
+export type ToggleGroupProps = ToggleGroupPrimitive.RootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+    spacing?: number;
+};
+declare const ToggleGroup: import("svelte").Component<ToggleGroupProps, {}, "ref" | "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/layout/aside-card/aside-card.svelte

@@ -0,0 +1,76 @@
+<!--
+  Origin: the React package 2.23.0 `aside-card.tsx`
+  Diverged: `icon` is a snippet; `open` is bindable, React's `defaultOpen` its
+    initial value (round 8 plan, R8-9). Lucide's chevron-down. Spreads the rest
+    onto the card, as every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  import type { CardProps } from '../card/card.svelte'
+
+  /**
+   * A collapsible card for a page's right-hand column.
+   *
+   * The column beside a form is guidance rather than input, so it folds.
+   * Someone who has read the tips once should be able to put them away for the
+   * rest of the flow: the answer stays available without staying in the way.
+   */
+  export type AsideCardProps = Omit<CardProps, 'title' | 'children'> & {
+    icon: Snippet
+    title: string
+    /** Open to start. Collapsed suits a card that repeats on every step of a flow. */
+    open?: boolean
+    children: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+  import Card from '../card/card.svelte'
+  import CardContent from '../card/card-content.svelte'
+  import CardHeader from '../card/card-header.svelte'
+  import CardTitle from '../card/card-title.svelte'
+  import Collapsible from '../collapsible/collapsible.svelte'
+  import CollapsibleContent from '../collapsible/collapsible-content.svelte'
+  import CollapsibleTrigger from '../collapsible/collapsible-trigger.svelte'
+
+  let {
+    icon,
+    title,
+    open = $bindable(true),
+    class: className,
+    children,
+    ...rest
+  }: AsideCardProps = $props()
+</script>
+
+<Card class={cn('h-fit gap-0 py-4', className)} {...rest}>
+  <Collapsible bind:open>
+    <CardHeader class="flex flex-wrap items-center justify-between gap-2 px-4">
+      <CardTitle class="flex items-center gap-2 text-base">
+        <span class="text-muted-foreground [&_svg]:size-4">{@render icon()}</span>
+        {title}
+      </CardTitle>
+      <CollapsibleTrigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="ghost"
+            iconOnly
+            class="size-7"
+            aria-label={open ? `Collapse ${title}` : `Expand ${title}`}
+          >
+            <ChevronDownIcon class={cn('size-4 transition-transform', open && 'rotate-180')} />
+          </Button>
+        {/snippet}
+      </CollapsibleTrigger>
+    </CardHeader>
+    <CollapsibleContent>
+      <CardContent class="px-4 pt-4">{@render children()}</CardContent>
+    </CollapsibleContent>
+  </Collapsible>
+</Card>

package/dist/components/layout/aside-card/aside-card.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { CardProps } from '../card/card.svelte';
+/**
+ * A collapsible card for a page's right-hand column.
+ *
+ * The column beside a form is guidance rather than input, so it folds.
+ * Someone who has read the tips once should be able to put them away for the
+ * rest of the flow: the answer stays available without staying in the way.
+ */
+export type AsideCardProps = Omit<CardProps, 'title' | 'children'> & {
+    icon: Snippet;
+    title: string;
+    /** Open to start. Collapsed suits a card that repeats on every step of a flow. */
+    open?: boolean;
+    children: Snippet;
+};
+declare const AsideCard: import("svelte").Component<AsideCardProps, {}, "open">;
+type AsideCard = ReturnType<typeof AsideCard>;
+export default AsideCard;

package/dist/components/layout/aside-card/index.d.ts

@@ -0,0 +1 @@
+export { type AsideCardProps, default as AsideCard } from './aside-card.svelte';

package/dist/components/layout/aside-card/index.js

@@ -0,0 +1 @@
+export { default as AsideCard } from './aside-card.svelte';

package/dist/components/layout/card/card-action.svelte

@@ -0,0 +1,33 @@
+<!--
+  Origin: the React package 2.23.0 `card.tsx` (`CardAction`), itself shadcn/ui new-york `card`
+  Svelte: shadcn-svelte `card`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * The header's top-right slot, for something the reader can do: a menu, an
+   * Edit link, a view toggle. Not a place to park a figure. A count where every
+   * other card puts its action reads as one; if a heading needs qualifying, put
+   * a hint next to the title.
+   */
+  export type CardActionProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: CardActionProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-action"
+  class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/card/card-action.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The header's top-right slot, for something the reader can do: a menu, an
+ * Edit link, a view toggle. Not a place to park a figure. A count where every
+ * other card puts its action reads as one; if a heading needs qualifying, put
+ * a hint next to the title.
+ */
+export type CardActionProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const CardAction: import("svelte").Component<CardActionProps, {}, "ref">;
+type CardAction = ReturnType<typeof CardAction>;
+export default CardAction;