@lyeve-labs/ui-kit 0.15.0 → 0.16.0

package/dist/components/SectionHeading.svelte

@@ -10,17 +10,29 @@
    * the element, and the element is always a real heading.
    */
   import type { Snippet } from 'svelte';
-  import { sectionHeading } from '../internal/layout.js';
+  import { sectionHeading, type SectionVariant } from '../internal/layout.js';
 
   interface Props {
-    /** 2 under a page title, 3 inside a card. */
+    /** 2 under a page title, 3 inside a card. The element, not the treatment. */
     level?: 2 | 3;
+    /**
+     * `eyebrow` is the small uppercase label the consoles head a band with. It
+     * is separate from the level because an eyebrow appears at both, and it was
+     * unnamed here while thirty of them shipped hand rolled across two apps.
+     */
+    variant?: SectionVariant;
     actions?: Snippet;
     class?: string;
     children: Snippet;
   }
 
-  let { level = 2, actions, class: klass = '', children }: Props = $props();
+  let {
+    level = 2,
+    variant = 'default',
+    actions,
+    class: klass = '',
+    children,
+  }: Props = $props();
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-4 {klass}">
@@ -28,9 +40,9 @@
        structure decision, and a reader of this file should be able to see both
        headings it can produce. -->
   {#if level === 2}
-    <h2 class={sectionHeading(2)}>{@render children()}</h2>
+    <h2 class={sectionHeading(2, variant)}>{@render children()}</h2>
   {:else}
-    <h3 class={sectionHeading(3)}>{@render children()}</h3>
+    <h3 class={sectionHeading(3, variant)}>{@render children()}</h3>
   {/if}
 
   {#if actions}

package/dist/components/SectionHeading.svelte.d.ts

@@ -9,9 +9,16 @@
    * the element, and the element is always a real heading.
    */
 import type { Snippet } from 'svelte';
+import { type SectionVariant } from '../internal/layout.js';
 interface Props {
-    /** 2 under a page title, 3 inside a card. */
+    /** 2 under a page title, 3 inside a card. The element, not the treatment. */
     level?: 2 | 3;
+    /**
+     * `eyebrow` is the small uppercase label the consoles head a band with. It
+     * is separate from the level because an eyebrow appears at both, and it was
+     * unnamed here while thirty of them shipped hand rolled across two apps.
+     */
+    variant?: SectionVariant;
     actions?: Snippet;
     class?: string;
     children: Snippet;

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export { default as Table } from './components/Table.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as TreeView } from './components/TreeView.svelte';
-export type { PageWidth } from './internal/layout.js';
+export type { PageWidth, SectionVariant } from './internal/layout.js';
 export type { TreeNode, TriState } from './internal/tree.js';
 export { default as Button } from './components/Button.svelte';
 export { default as ButtonGroup } from './components/ButtonGroup.svelte';
@@ -86,4 +86,4 @@ export { openDialog, closeDialog, dismissDialog, dismissAllDialogs, confirm, set
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, setTheme, toggleTheme, themeBootScript, type Theme } from './utils/theme.js';
-export declare const VERSION = "0.15.0";
+export declare const VERSION = "0.16.0";

package/dist/index.js

@@ -92,4 +92,4 @@ export { getTheme, setTheme, toggleTheme, themeBootScript } from './utils/theme.
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.15.0';
+export const VERSION = '0.16.0';

package/dist/internal/layout.d.ts

@@ -17,6 +17,8 @@
  *
  * Not exported from the package entry point - this is an implementation detail.
  */
+/** The treatment a section heading takes, independent of its level. */
+export type SectionVariant = 'default' | 'eyebrow';
 /** How much of the viewport a page's content is allowed to fill. */
 export type PageWidth = 'narrow' | 'default' | 'wide' | 'full';
 /**
@@ -115,8 +117,16 @@ export declare const MODAL_PAD = "px-card py-card-sm";
  * page can render at different sizes and weights. Taking the level rather than
  * a free-form string means the class cannot disagree with the heading element
  * the caller is already writing.
+ *
+ * `eyebrow` is the small uppercase label the consoles use to head a band of
+ * content. It is a second treatment rather than a third level because the
+ * element is a decision about document structure and the treatment is not: an
+ * eyebrow appears at both levels. It went unnamed here while thirty of them
+ * shipped hand rolled across two apps in four different bottom margins, and a
+ * margin is exactly what this function must not carry - the stack around the
+ * heading owns the distance to what follows.
  */
-export declare function sectionHeading(level: 2 | 3): string;
+export declare function sectionHeading(level: 2 | 3, variant?: SectionVariant): string;
 /**
  * The authed app frame, stated once for every app that has one.
  *

package/dist/internal/layout.js

@@ -123,8 +123,20 @@ export const MODAL_PAD = 'px-card py-card-sm';
  * page can render at different sizes and weights. Taking the level rather than
  * a free-form string means the class cannot disagree with the heading element
  * the caller is already writing.
+ *
+ * `eyebrow` is the small uppercase label the consoles use to head a band of
+ * content. It is a second treatment rather than a third level because the
+ * element is a decision about document structure and the treatment is not: an
+ * eyebrow appears at both levels. It went unnamed here while thirty of them
+ * shipped hand rolled across two apps in four different bottom margins, and a
+ * margin is exactly what this function must not carry - the stack around the
+ * heading owns the distance to what follows.
  */
-export function sectionHeading(level) {
+export function sectionHeading(level, variant = 'default') {
+    // The eyebrow reads the same at both levels. It is a label for the band under
+    // it rather than a title, so it does not take the level's size at all.
+    if (variant === 'eyebrow')
+        return 'text-xs font-medium uppercase tracking-wide text-faint';
     // Level 3 drops a size rather than a weight. Inside a card it sits under the
     // card's own semibold title, and two semibold lines at the same size read as
     // one heading broken in half.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",