@happyvertical/smrt-ui 0.30.0

package/dist/components/layout/Header.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import Container from './Container.svelte';
+
+export interface Props {
+  logo?: Snippet;
+  nav?: Snippet;
+}
+
+const { logo, nav }: Props = $props();
+</script>
+
+<header class="site-header">
+  <Container>
+    <div class="header-content">
+      {#if logo}
+        <div class="logo">
+          {@render logo()}
+        </div>
+      {/if}
+
+      {#if nav}
+        <nav class="nav">
+          {@render nav()}
+        </nav>
+      {/if}
+    </div>
+  </Container>
+</header>
+
+<style>
+  .site-header {
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    padding: var(--smrt-spacing-4) 0;
+    box-shadow: var(--smrt-elevation-2);
+  }
+
+  .header-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .logo :global(h1) {
+    margin: 0;
+    font-size: var(--smrt-typography-display-small-size);
+    font-weight: var(--smrt-typography-display-small-weight);
+  }
+
+  .logo :global(a) {
+    color: var(--smrt-color-on-primary);
+    text-decoration: none;
+  }
+
+  .logo :global(a:hover) {
+    color: var(--smrt-color-on-primary);
+    opacity: 0.9;
+  }
+
+  .nav :global(a) {
+    color: var(--smrt-color-on-primary);
+    text-decoration: none;
+    margin-right: var(--smrt-spacing-6);
+    opacity: 0.95;
+    transition: opacity var(--smrt-duration-short2) var(--smrt-easing-standard);
+    font-weight: var(--smrt-typography-body-medium-weight);
+  }
+
+  .nav :global(a:hover) {
+    opacity: 1;
+    text-decoration: underline;
+  }
+
+  @media (min-width: 768px) {
+    .header-content {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .logo :global(h1) {
+      font-size: var(--smrt-typography-headline-medium-size);
+    }
+  }
+</style>

package/dist/components/layout/Header.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    logo?: Snippet;
+    nav?: Snippet;
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;
+//# sourceMappingURL=Header.svelte.d.ts.map

package/dist/components/layout/Header.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Header.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AA+BD,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/Masthead.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+import Container from './Container.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  date?: string;
+  dateHref?: string;
+  location?: string;
+  locationHref?: string;
+  nav?: Snippet;
+  mobileNav?: Snippet;
+}
+
+const {
+  date = new Date().toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }),
+  dateHref,
+  location = '',
+  locationHref = '/',
+  nav,
+  mobileNav,
+}: Props = $props();
+</script>
+
+<div class="masthead">
+  <Container>
+    <!-- Desktop layout -->
+    <div class="subheader desktop">
+      <div class="left">
+        {#if location}
+          <a href={locationHref} class="location">{location}</a>
+        {/if}
+      </div>
+      <div class="center">
+        {#if dateHref}
+          <a href={dateHref} class="date-link"><time>{date}</time></a>
+        {:else}
+          <time>{date}</time>
+        {/if}
+      </div>
+      <div class="right">
+        {#if nav}
+          <nav class="nav" aria-label={t(M['ui.masthead.primary_nav'])}>
+            {@render nav()}
+          </nav>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Mobile layout -->
+    <div class="subheader mobile">
+      <div class="left">
+        <a href={locationHref} class="home-icon" aria-label={t(M['ui.masthead.home'])}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/>
+            <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+          </svg>
+        </a>
+      </div>
+      <div class="right">
+        {#if mobileNav}
+          <nav class="nav mobile-nav" aria-label={t(M['ui.masthead.mobile_nav'])}>
+            {@render mobileNav()}
+          </nav>
+        {:else if nav}
+          <nav class="nav" aria-label={t(M['ui.masthead.mobile_nav'])}>
+            {@render nav()}
+          </nav>
+        {/if}
+      </div>
+    </div>
+  </Container>
+</div>
+
+<style>
+  .masthead {
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface);
+  }
+
+  .subheader {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    padding: var(--smrt-spacing-4) 0;
+    font-size: var(--smrt-typography-body-medium-size);
+  }
+
+  .subheader.desktop {
+    display: grid;
+  }
+
+  .subheader.mobile {
+    display: none;
+  }
+
+  .left {
+    justify-self: start;
+  }
+
+  .center {
+    justify-self: center;
+  }
+
+  .right {
+    justify-self: end;
+  }
+
+  time {
+    color: var(--smrt-color-on-surface-variant);
+    font-style: italic;
+  }
+
+  .date-link {
+    text-decoration: none;
+    transition: color var(--smrt-duration-short2) var(--smrt-easing-standard);
+  }
+
+  .date-link:hover {
+    color: var(--smrt-color-primary);
+  }
+
+  .date-link:hover time {
+    color: var(--smrt-color-primary);
+  }
+
+  .location {
+    color: var(--smrt-color-on-surface-variant);
+    font-weight: var(--smrt-typography-body-medium-weight);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: var(--smrt-typography-body-small-size);
+    text-decoration: none;
+    transition: color var(--smrt-duration-short2) var(--smrt-easing-standard);
+  }
+
+  .location:hover {
+    color: var(--smrt-color-primary);
+  }
+
+  .nav {
+    display: flex;
+    gap: var(--smrt-spacing-6);
+  }
+
+  .nav :global(a) {
+    color: var(--smrt-color-on-surface);
+    text-decoration: none;
+    font-weight: var(--smrt-typography-body-medium-weight);
+    transition: color var(--smrt-duration-short2) var(--smrt-easing-standard);
+    font-size: var(--smrt-typography-body-medium-size);
+  }
+
+  .nav :global(a:hover) {
+    color: var(--smrt-color-primary);
+  }
+
+  /* Mobile icon nav */
+  .home-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--smrt-color-on-surface);
+    text-decoration: none;
+    padding: var(--smrt-spacing-1);
+    transition: color var(--smrt-duration-short2) var(--smrt-easing-standard);
+  }
+
+  .home-icon:hover {
+    color: var(--smrt-color-primary);
+  }
+
+  .home-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .mobile-nav {
+    gap: var(--smrt-spacing-6);
+  }
+
+  .mobile-nav :global(a) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--smrt-spacing-1);
+  }
+
+  .mobile-nav :global(svg) {
+    width: 20px;
+    height: 20px;
+  }
+
+  @media (max-width: 640px) {
+    .subheader.desktop {
+      display: none;
+    }
+
+    .subheader.mobile {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      grid-template-columns: unset;
+    }
+
+    .mobile .left,
+    .mobile .right {
+      justify-self: unset;
+    }
+  }
+</style>

package/dist/components/layout/Masthead.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    date?: string;
+    dateHref?: string;
+    location?: string;
+    locationHref?: string;
+    nav?: Snippet;
+    mobileNav?: Snippet;
+}
+declare const Masthead: import("svelte").Component<Props, {}, "">;
+type Masthead = ReturnType<typeof Masthead>;
+export default Masthead;
+//# sourceMappingURL=Masthead.svelte.d.ts.map

package/dist/components/layout/Masthead.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masthead.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Masthead.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA+ED,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/layout/PageHeader.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+/**
+ * PageHeader - Standard page header with optional back navigation
+ * refactored for Material 3
+ *
+ * Provides consistent page header layout with title, optional back link,
+ * and slot for action buttons.
+ */
+import type { Snippet } from 'svelte';
+import { ripple } from '../../actions/ripple.js';
+import { Icon } from '../display/index.js';
+
+export interface Props {
+  /** Page title */
+  title: string;
+  /** Optional subtitle/description */
+  subtitle?: string;
+  /** Back navigation URL */
+  backHref?: string;
+  /** Back link label */
+  backLabel?: string;
+  /** Slot for action buttons */
+  actions?: Snippet;
+  /** Slot for additional content below title */
+  children?: Snippet;
+}
+
+const {
+  title,
+  subtitle,
+  backHref,
+  backLabel = 'Back',
+  actions,
+  children,
+}: Props = $props();
+</script>
+
+<header class="page-header">
+  <div class="header-main">
+    <div class="header-content">
+      {#if backHref}
+        <a href={backHref} class="back-link" use:ripple>
+          <Icon name="chevron-left" size={20} />
+          <span>{backLabel}</span>
+        </a>
+      {/if}
+      <h1 class="page-title">{title}</h1>
+      {#if subtitle}
+        <p class="page-subtitle">{subtitle}</p>
+      {/if}
+    </div>
+
+    {#if actions}
+      <div class="header-actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+
+  {#if children}
+    <div class="header-extra">
+      {@render children()}
+    </div>
+  {/if}
+</header>
+
+<style>
+  .page-header {
+    margin-bottom: 2rem;
+    padding-top: 1rem;
+  }
+
+  .header-main {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  .header-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 4px);
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-primary);
+    font: var(--smrt-typography-label-large-font);
+    text-decoration: none;
+    margin-bottom: 0.75rem;
+    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px) var(--smrt-spacing-1, 4px) var(--smrt-spacing-1, 4px);
+    border-radius: var(--smrt-radius-md, 8px);
+    margin-left: -4px; /* Align icon with text below */
+    transition: background-color 200ms;
+  }
+
+  .back-link:hover {
+    background-color: var(--smrt-color-surface-container-high);
+  }
+
+  .page-title {
+    font: var(--smrt-typography-headline-medium-font);
+    color: var(--smrt-color-on-surface);
+    margin: 0;
+    letter-spacing: -0.5px;
+  }
+
+  .page-subtitle {
+    font: var(--smrt-typography-body-medium-font);
+    color: var(--smrt-color-on-surface-variant);
+    margin: 0;
+    margin-top: var(--smrt-spacing-1, 4px);
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .header-extra {
+    margin-top: 1.5rem;
+  }
+</style>

package/dist/components/layout/PageHeader.svelte.d.ts

@@ -0,0 +1,26 @@
+/**
+ * PageHeader - Standard page header with optional back navigation
+ * refactored for Material 3
+ *
+ * Provides consistent page header layout with title, optional back link,
+ * and slot for action buttons.
+ */
+import type { Snippet } from 'svelte';
+export interface Props {
+    /** Page title */
+    title: string;
+    /** Optional subtitle/description */
+    subtitle?: string;
+    /** Back navigation URL */
+    backHref?: string;
+    /** Back link label */
+    backLabel?: string;
+    /** Slot for action buttons */
+    actions?: Snippet;
+    /** Slot for additional content below title */
+    children?: Snippet;
+}
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;
+//# sourceMappingURL=PageHeader.svelte.d.ts.map

package/dist/components/layout/PageHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkDD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/layout/SummaryCard.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+/**
+ * SummaryCard - Statistic/summary display card refactored for Material 3
+ *
+ * Shows a label with a prominent value, optionally with a count badge
+ * and link functionality.
+ */
+import { ripple } from '../../actions/ripple.js';
+import { Icon } from '../display/index.js';
+
+export interface Props {
+  /** Card label */
+  label: string;
+  /** Primary value to display */
+  value: string | number;
+  /** Optional count badge */
+  count?: number;
+  /** Highlight the card */
+  highlight?: boolean;
+  /** Make card clickable with href */
+  href?: string;
+  /** Optional icon (name for Icon or SVG string) */
+  icon?: string;
+  /** Value color variant */
+  variant?: 'default' | 'success' | 'warning' | 'danger';
+}
+
+const {
+  label,
+  value,
+  count,
+  highlight = false,
+  href,
+  icon,
+  variant = 'default',
+}: Props = $props();
+
+// Map variant to M3 color roles
+const valueColorClass = $derived.by(() => {
+  switch (variant) {
+    case 'success':
+      return 'color-success';
+    case 'warning':
+      return 'color-warning';
+    case 'danger':
+      return 'color-error';
+    default:
+      return 'color-default';
+  }
+});
+
+const isSvg = $derived(icon?.startsWith('<svg'));
+</script>
+
+{#if href}
+  <a 
+    class="summary-card" 
+    class:highlight 
+    class:clickable={true}
+    {href}
+    use:ripple
+  >
+    {#if icon}
+      <span class="card-icon">
+        {#if isSvg}
+          {@html icon}
+        {:else}
+          <Icon name={icon} size={24} />
+        {/if}
+      </span>
+    {/if}
+    <div class="card-content">
+      <span class="card-label">
+        {label}
+        {#if count !== undefined}
+          <span class="card-count">{count}</span>
+        {/if}
+      </span>
+      <span class="card-value {valueColorClass}">{value}</span>
+    </div>
+    <div class="trailing">
+      <Icon name="chevron-right" size={20} />
+    </div>
+  </a>
+{:else}
+  <div class="summary-card" class:highlight>
+    {#if icon}
+      <span class="card-icon">
+        {#if isSvg}
+          {@html icon}
+        {:else}
+          <Icon name={icon} size={24} />
+        {/if}
+      </span>
+    {/if}
+    <div class="card-content">
+      <span class="card-label">
+        {label}
+        {#if count !== undefined}
+          <span class="card-count">{count}</span>
+        {/if}
+      </span>
+      <span class="card-value {valueColorClass}">{value}</span>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .summary-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    background-color: var(--smrt-color-surface-container-low);
+    border-radius: var(--smrt-radius-lg, 12px);
+    text-decoration: none;
+    color: var(--smrt-color-on-surface);
+    transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .clickable:hover {
+    background-color: var(--smrt-color-surface-container-high);
+    box-shadow: var(--smrt-elevation-2);
+  }
+
+  .summary-card.highlight {
+    background-color: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
+  }
+
+  .card-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    background-color: var(--smrt-color-surface-container-high);
+    border-radius: var(--smrt-radius-lg, 12px);
+    color: var(--smrt-color-primary);
+    flex-shrink: 0;
+  }
+
+  .highlight .card-icon {
+    background-color: var(--smrt-color-on-secondary-container);
+    color: var(--smrt-color-secondary-container);
+  }
+
+  .card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 4px);
+  }
+
+  .card-label {
+    font: var(--smrt-typography-label-large-font);
+    color: var(--smrt-color-on-surface-variant);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .highlight .card-label {
+    color: var(--smrt-color-on-secondary-container);
+    opacity: 0.8;
+  }
+
+  .card-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 0.375rem;
+    font: var(--smrt-typography-label-small-font);
+    background-color: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    border-radius: var(--smrt-radius-full, 9999px);
+  }
+
+  .card-value {
+    font: var(--smrt-typography-headline-small-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .color-default { color: var(--smrt-color-on-surface); }
+  .color-success { color: var(--smrt-color-primary); }
+  .color-warning { color: var(--smrt-color-error-container); } /* M3 Warning is often custom, using error container as proxy */
+  .color-error { color: var(--smrt-color-error); }
+
+  .trailing {
+    color: var(--smrt-color-on-surface-variant);
+    opacity: 0.5;
+  }
+
+  .clickable:hover .trailing {
+    opacity: 1;
+    color: var(--smrt-color-primary);
+  }
+</style>