@heyramzi/ui 2.1.0 → 2.2.0

package/src/shadcn/card/card-title.svelte

@@ -2,11 +2,7 @@
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../lib/utils.js";
 
-	// WHY: card titles render as a div by default for backwards compatibility,
-
-	// but a page whose sections are all cards ends up with no headings below the h1, so screen readers cannot navigate it by heading (WCAG 2.4.6).
-
-	// Pass `as="h2"` on real section titles.
+	// WHY: card titles default to a div, so pass `as="h2"` on real section titles or a page of cards has no headings for screen readers (WCAG 2.4.6).
 	let {
 		ref = $bindable(null),
 		class: className,

package/src/shadcn/hooks/use-highlighted-code.svelte.ts

@@ -6,19 +6,8 @@ import {
 import type { GrammarState } from "shiki/core";
 
 /**
- * Highlights `code` in `language`. `current` holds one entry per line: a plain
- * string until the highlighter loads, then the line's tokens. Pass each one to
- * the `code` prop of a `CodeBlock.Line`.
- *
- * ```svelte
- * <script lang="ts">
- * 	const lines = useHighlightedCode(() => code, () => "json");
- * </script>
- *
- * {#each lines.current as line, index (index)}
- * 	<CodeBlock.Line code={line} />
- * {/each}
- * ```
+ * Highlights `code`. Each `current` entry is a plain string until the highlighter loads, then
+ * tokens, so pass it to `CodeBlock.Line`'s `code` prop either way.
  */
 export function useHighlightedCode(value: () => string, language: () => string) {
   let loaded = $state.raw<{

package/src/shadcn/sheet/sheet-content.svelte

@@ -29,10 +29,8 @@
 		children: Snippet;
 	} = $props();
 
-	// Side classes are plain utilities, not `data-[side=x]:` variants. An attribute
-	// variant outranks a plain class and tailwind-merge won't dedupe across
-	// modifier sets, so a caller's `sm:max-w-xl` lost to the default 384px.
-	// Plain utilities let `cn` drop the default when a caller passes its own.
+	// Plain side utilities, not `data-[side=x]:` variants, because the variant outranks a
+	// caller's `sm:max-w-xl` and tailwind-merge can't dedupe across modifier sets.
 	const SIDE_CLASS: Record<Side, string> = {
 		// h-dvh, not h-full: on iOS Safari a fixed panel sizes against the layout
 		// viewport, which is taller than the visible area, so h-full hides the footer.

package/src/shadcn/table/table-cell.svelte

@@ -19,9 +19,8 @@
 	{@render children?.()}
 </td>
 
-<!-- WHY here: a link in a cell is 20px tall, and a cell is the only place that knows it sits in a
-     row of them. On a coarse pointer the link grows a 44px box centred on it, wider when the link
-     is. A link that positions itself (a stretched row link) keeps its own box. -->
+<!-- A cell's link is 20px tall, so on a coarse pointer it grows a 44px hit box here, unless it
+     positions itself, like a stretched row link. -->
 <style>
 	@media (any-pointer: coarse) {
 		td :global(a[href]:not([class*="absolute"], [class*="fixed"], [class*="sticky"])) {

package/src/shadcn/utilities.css

@@ -1,11 +1,6 @@
-/* Tailwind utilities the shadcn Attachment and Message components rely on:
-   scroll-fade-x and scrollbar-none for Attachment.Group's snap-scroller,
-   shimmer for a processing/uploading Attachment.Title. Vendored from
-   shadcn-svelte's own tailwind.css bundle (MIT) so this package stays
-   dependency-free (docs/decisions.md, "The package stays dependency-free").
-   `no-scrollbar` is deliberately left out: consumers already define it, and
-   a duplicate @utility breaks their build. Import this file once, after
-   Tailwind, alongside `@heyramzi/ui/design`. */
+/* Utilities the shadcn Attachment and Message parts need, vendored from
+   shadcn-svelte (MIT); `no-scrollbar` stays out because consumers define it
+   and a duplicate @utility breaks their build. */
 
 @utility scrollbar-none {
   -ms-overflow-style: none;

package/src/slides/Controls.svelte

@@ -1,138 +1,164 @@
 <script lang="ts">
-  import type { DeckController } from './deck-controller.svelte.js';
+	import type { DeckController } from "./deck-controller.svelte.js";
 
-  interface Props {
-    deck: DeckController;
-    /** Shown only when the deck has somewhere to open the presenter view. */
-    onpresenter?: () => void;
-    onfullscreen: () => void;
-  };
+	interface Props {
+		deck: DeckController;
+		/** Shown only when the deck has somewhere to open the presenter view. */
+		onpresenter?: () => void;
+		onfullscreen: () => void;
+	}
 
-  let { deck, onpresenter, onfullscreen }: Props = $props();
+	let { deck, onpresenter, onfullscreen }: Props = $props();
 
-  const icons = {
-    prev: 'M15 5 8 12l7 7',
-    next: 'm9 5 7 7-7 7',
-    overview: 'M4 5h6v6H4zM14 5h6v6h-6zM4 15h6v4H4zM14 15h6v4h-6z',
-    presenter: 'M4 5h16v10H4zM8 19h8M12 15v4',
-    fullscreen: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5',
-  };
+	const icons = {
+		prev: "M15 5 8 12l7 7",
+		next: "m9 5 7 7-7 7",
+		overview: "M4 5h6v6H4zM14 5h6v6h-6zM4 15h6v4H4zM14 15h6v4h-6z",
+		presenter: "M4 5h16v10H4zM8 19h8M12 15v4",
+		fullscreen: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5",
+	};
 </script>
 
-{#snippet button(icon: keyof typeof icons, label: string, onclick: () => void, disabled = false, pressed?: boolean)}
-  <button type="button" class="deck__button" {onclick} {disabled} aria-label={label} aria-pressed={pressed}>
-    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
-      <path d={icons[icon]} fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
-    </svg>
-  </button>
+{#snippet button(
+	icon: keyof typeof icons,
+	label: string,
+	onclick: () => void,
+	disabled = false,
+	pressed?: boolean,
+)}
+	<button
+		type="button"
+		class="deck__button"
+		{onclick}
+		{disabled}
+		aria-label={label}
+		aria-pressed={pressed}
+	>
+		<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+			<path
+				d={icons[icon]}
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.75"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	</button>
 {/snippet}
 
 <div class="deck__controls deck__chrome">
-  {@render button('prev', deck.labels.previous, () => deck.prev(), deck.atStart)}
-  <span class="deck__counter" aria-hidden="true">{deck.ordinal.n} / {deck.ordinal.of}</span>
-  {@render button('next', deck.labels.next, () => deck.next(), deck.atEnd)}
-  <span class="deck__divider" aria-hidden="true"></span>
-  {@render button('overview', deck.labels.overview, () => deck.toggleOverview(), false, deck.overview)}
-  {#if onpresenter}
-    {@render button('presenter', deck.labels.presenter, onpresenter)}
-  {/if}
-  {@render button('fullscreen', deck.labels.fullscreen, onfullscreen)}
+	{@render button("prev", deck.labels.previous, () => deck.prev(), deck.atStart)}
+	<span class="deck__counter" aria-hidden="true">{deck.ordinal.n} / {deck.ordinal.of}</span>
+	{@render button("next", deck.labels.next, () => deck.next(), deck.atEnd)}
+	<span class="deck__divider" aria-hidden="true"></span>
+	{@render button(
+		"overview",
+		deck.labels.overview,
+		() => deck.toggleOverview(),
+		false,
+		deck.overview,
+	)}
+	{#if onpresenter}
+		{@render button("presenter", deck.labels.presenter, onpresenter)}
+	{/if}
+	{@render button("fullscreen", deck.labels.fullscreen, onfullscreen)}
 </div>
 
 <style>
-  .deck__controls {
-    position: absolute;
-    right: 12px;
-    bottom: 14px;
-    z-index: 5;
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    padding: 4px;
-    color: var(--deck-fg);
-    background: color-mix(in srgb, var(--deck-bg) 72%, transparent);
-    border: 1px solid var(--deck-line);
-    border-radius: 12px;
-    backdrop-filter: blur(var(--blur-large, 8px));
-    opacity: 0.55;
-    transition: opacity var(--deck-t-quick) var(--deck-ease);
-  }
-  .deck__controls:focus-within {
-    opacity: 1;
-  }
-  @media (hover: hover) and (pointer: fine) {
-    .deck__controls:hover {
-      opacity: 1;
-    }
-  }
-  .deck__button {
-    display: grid;
-    place-items: center;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    color: inherit;
-    background: transparent;
-    border: 0;
-    border-radius: 8px;
-    cursor: pointer;
-    transition:
-      background-color var(--deck-t-quick) var(--deck-ease),
-      transform var(--deck-t-quick) var(--deck-ease);
-  }
-  @media (hover: hover) and (pointer: fine) {
-    .deck__button:hover:not(:disabled) {
-      background: var(--deck-line);
-    }
-  }
-  .deck__button:active:not(:disabled) {
-    transform: scale(var(--scale-medium, 0.97));
-  }
-  .deck__button[aria-pressed='true'] {
-    color: var(--deck-on-accent);
-    background: var(--deck-accent);
-  }
-  .deck__button:disabled {
-    opacity: 0.3;
-    cursor: default;
-  }
-  .deck__button:focus-visible {
-    outline: 2px solid var(--deck-accent);
-    outline-offset: 1px;
-  }
-  .deck__counter {
-    min-width: 52px;
-    font: 500 12px/1 var(--deck-font);
-    font-variant-numeric: tabular-nums;
-    text-align: center;
-    color: var(--deck-muted);
-  }
-  .deck__divider {
-    width: 1px;
-    height: 16px;
-    margin: 0 4px;
-    background: var(--deck-line);
-  }
+	.deck__controls {
+		position: absolute;
+		right: 12px;
+		bottom: 14px;
+		z-index: 5;
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		padding: 4px;
+		color: var(--deck-fg);
+		background: color-mix(in srgb, var(--deck-bg) 72%, transparent);
+		border: 1px solid var(--deck-line);
+		border-radius: 12px;
+		backdrop-filter: blur(var(--blur-large, 8px));
+		opacity: 0.55;
+		transition: opacity var(--deck-t-quick) var(--deck-ease);
+	}
+	.deck__controls:focus-within {
+		opacity: 1;
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.deck__controls:hover {
+			opacity: 1;
+		}
+	}
+	.deck__button {
+		display: grid;
+		place-items: center;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		color: inherit;
+		background: transparent;
+		border: 0;
+		border-radius: 8px;
+		cursor: pointer;
+		transition:
+			background-color var(--deck-t-quick) var(--deck-ease),
+			transform var(--deck-t-quick) var(--deck-ease);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.deck__button:hover:not(:disabled) {
+			background: var(--deck-line);
+		}
+	}
+	.deck__button:active:not(:disabled) {
+		transform: scale(var(--scale-medium, 0.97));
+	}
+	.deck__button[aria-pressed="true"] {
+		color: var(--deck-on-accent);
+		background: var(--deck-accent);
+	}
+	.deck__button:disabled {
+		opacity: 0.3;
+		cursor: default;
+	}
+	.deck__button:focus-visible {
+		outline: 2px solid var(--deck-accent);
+		outline-offset: 1px;
+	}
+	.deck__counter {
+		min-width: 52px;
+		font: 500 12px/1 var(--deck-font);
+		font-variant-numeric: tabular-nums;
+		text-align: center;
+		color: var(--deck-muted);
+	}
+	.deck__divider {
+		width: 1px;
+		height: 16px;
+		margin: 0 4px;
+		background: var(--deck-line);
+	}
 
-  @media (hover: none) {
-    .deck__controls {
-      opacity: 0.9;
-    }
-  }
-  /* On a small deck the controls shrink and drop the extras, so they don't cover the slide. */
-  @container (max-width: 520px) {
-    .deck__controls {
-      right: 6px;
-      bottom: 10px;
-      padding: 2px;
-    }
-    .deck__button {
-      width: 28px;
-      height: 28px;
-    }
-    .deck__counter,
-    .deck__divider {
-      display: none;
-    }
-  }
+	@media (hover: none) {
+		.deck__controls {
+			opacity: 0.9;
+		}
+	}
+	/* On a small deck the controls shrink and drop the extras, so they don't cover the slide. */
+	@container (max-width: 520px) {
+		.deck__controls {
+			right: 6px;
+			bottom: 10px;
+			padding: 2px;
+		}
+		.deck__button {
+			width: 28px;
+			height: 28px;
+		}
+		.deck__counter,
+		.deck__divider {
+			display: none;
+		}
+	}
 </style>