css-tags 0.1.0

package/utilities/utilities.css

@@ -0,0 +1,564 @@
+/**
+ * Improved Utilities
+ * ==================
+ *
+ * Comprehensive utility classes that work with the improved theme system.
+ * Includes all the theme generator utilities plus framework compatibility.
+ */
+
+@layer utilities {
+  /* ============================================ */
+  /* BACKGROUND COLORS                           */
+  /* ============================================ */
+
+  .bg-base { background-color: var(--base); --bg: var(--base); }
+  .bg-bedrock { background-color: var(--bedrock); --bg: var(--bedrock); }
+  .bg-surface-muted { background-color: var(--surface-muted); --bg: var(--surface-muted); }
+  .bg-surface-subtle { background-color: var(--surface-subtle); --bg: var(--surface-subtle); }
+  .bg-surface { background-color: var(--surface); --bg: var(--surface); }
+  .bg-surface-overt { background-color: var(--surface-overt); --bg: var(--surface-overt); }
+
+  /* Legacy framework compatibility */
+  .surface-bg { background-color: var(--surface); }
+  .surface-bg-subtle { background-color: var(--surface-subtle); }
+  .surface-bg-muted { background-color: var(--surface-muted); }
+
+  /* ============================================ */
+  /* TEXT COLORS                                 */
+  /* ============================================ */
+
+  .text-muted { color: var(--text-muted); }
+  .text-subtle { color: var(--text-subtle); }
+  /* `.text` is the class host for core/text.css. Its default color is
+     derived from the inherited --bg value rather than duplicated here. */
+  .text-overt { color: var(--text-overt); }
+  .text-link { color: var(--text-link); }
+  .text-link:hover { color: var(--text-link-hover); }
+  .text-link:visited { color: var(--text-link-visited); }
+  .text-highlight-subtle { color: var(--text-highlight-subtle); }
+  .text-highlight-overt { color: var(--text-highlight-overt); }
+
+  /* Text on surfaces */
+  .text-on-base { color: var(--text-on-base); }
+  .text-on-bedrock { color: var(--text-on-bedrock); }
+  .text-on-surface-muted { color: var(--text-on-surface-muted); }
+  .text-on-surface-subtle { color: var(--text-on-surface-subtle); }
+  .text-on-surface { color: var(--text-on-surface); }
+  .text-on-surface-overt { color: var(--text-on-surface-overt); }
+
+   /* Legacy framework compatibility */
+   .text-color-muted { color: var(--text-muted); }
+   .text-color-subtle { color: var(--text-subtle); }
+   .text-color { color: var(--text); }
+   .text-color-overt { color: var(--text-overt); }
+
+   /* ============================================ */
+   /* AUTOMATIC TEXT COLOR ADJUSTMENTS            */
+   /* ============================================ */
+
+   /* On dark bedrock background, use light text */
+   .bg-bedrock .text-muted,
+   .bg-bedrock .text-subtle,
+   .bg-bedrock .text-overt,
+   .bg-bedrock .text-link,
+   .bg-bedrock .text-link:hover,
+   .bg-bedrock .text-link:visited {
+     color: var(--text-on-bedrock);
+   }
+
+   /* On dark bedrock background, buttons need light text */
+   .bg-bedrock .button {
+     color: var(--text-on-bedrock);
+     border-color: var(--outline-overt);
+   }
+   .bg-bedrock .button-primary {
+     color: var(--text-on-bedrock);
+   }
+
+   /* On accent background, use appropriate text */
+   .bg-accent .text-muted,
+   .bg-accent .text-subtle,
+   .bg-accent .text-overt {
+     color: var(--accent-on-base);
+   }
+
+   /* On accent background, buttons need appropriate colors */
+   .bg-accent .button {
+     color: var(--accent-on-base);
+     border-color: var(--accent-overt);
+   }
+   .bg-accent .button-primary {
+     color: var(--accent-on-base);
+   }
+
+    /* On secondary background, use appropriate text */
+    .bg-secondary .text-muted,
+    .bg-secondary .text-subtle,
+    .bg-secondary .text-overt {
+      color: var(--text-on-secondary);
+    }
+
+    .bg-secondary .button {
+      color: var(--text-on-secondary);
+      border-color: var(--secondary-overt);
+    }
+    .bg-secondary .button-secondary {
+      color: var(--text-on-secondary);
+    }
+
+    /* On tertiary background, use appropriate text */
+    .bg-tertiary .text-muted,
+    .bg-tertiary .text-subtle,
+    .bg-tertiary .text-overt {
+      color: var(--text-on-tertiary);
+    }
+
+    .bg-tertiary .button {
+      color: var(--text-on-tertiary);
+      border-color: var(--tertiary-overt);
+    }
+    .bg-tertiary .button-secondary {
+      color: var(--text-on-tertiary);
+    }
+
+    /* ============================================ */
+    /* OUTLINE/BORDER COLORS                       */
+   /* ============================================ */
+
+  .border-muted { border-color: var(--outline-muted); }
+  .border-subtle { border-color: var(--outline-subtle); }
+  .border { border-color: var(--outline); }
+  .border-overt { border-color: var(--outline-overt); }
+  .border-focus { border-color: var(--outline-focus); }
+  .border-active { border-color: var(--outline-active); }
+  .border-error { border-color: var(--outline-error); }
+  .border-warning { border-color: var(--outline-warning); }
+  .border-success { border-color: var(--outline-success); }
+  .border-info { border-color: var(--outline-info); }
+
+  /* ============================================ */
+  /* HIGHLIGHT BACKGROUNDS                       */
+  /* ============================================ */
+
+  .bg-highlight-muted { background-color: var(--highlight-muted); }
+  .bg-highlight-subtle { background-color: var(--highlight-subtle); }
+  .bg-highlight-overt { background-color: var(--highlight-overt); }
+  .bg-text-highlight { background-color: var(--text-highlight-bg); }
+
+  /* ============================================ */
+  /* ACCENT COLORS                               */
+  /* ============================================ */
+
+  .bg-accent { background-color: var(--accent); --bg: var(--accent); }
+  .bg-accent-muted { background-color: var(--accent-muted); --bg: var(--accent-muted); }
+  .bg-accent-subtle { background-color: var(--accent-subtle); --bg: var(--accent-subtle); }
+  .bg-accent-surface { background-color: var(--accent-surface); --bg: var(--accent-surface); }
+  .bg-accent-overt { background-color: var(--accent-overt); --bg: var(--accent-overt); }
+  .bg-accent-highlight { background-color: var(--accent-highlight); --bg: var(--accent-highlight); }
+
+  .text-accent { color: var(--accent); }
+  .text-accent-muted { color: var(--accent-muted); }
+  .text-accent-subtle { color: var(--accent-subtle); }
+  .text-accent-overt { color: var(--accent-overt); }
+
+  .text-accent-on-base { color: var(--accent-on-base); }
+  .text-accent-on-bedrock { color: var(--accent-on-bedrock); }
+  .text-accent-on-surface { color: var(--accent-on-surface); }
+
+  /* ============================================ */
+  /* SECONDARY COLORS                            */
+  /* ============================================ */
+
+  .bg-secondary { background-color: var(--secondary); --bg: var(--secondary); }
+  .bg-secondary-muted { background-color: var(--secondary-muted); --bg: var(--secondary-muted); }
+  .bg-secondary-subtle { background-color: var(--secondary-subtle); --bg: var(--secondary-subtle); }
+  .bg-secondary-overt { background-color: var(--secondary-overt); --bg: var(--secondary-overt); }
+  .bg-secondary-highlight { background-color: var(--secondary-highlight); --bg: var(--secondary-highlight); }
+
+  .text-secondary { color: var(--secondary); }
+  .text-secondary-muted { color: var(--secondary-muted); }
+  .text-secondary-subtle { color: var(--secondary-subtle); }
+  .text-secondary-overt { color: var(--secondary-overt); }
+  .text-on-secondary { color: var(--text-on-secondary); }
+
+  /* ============================================ */
+  /* TERTIARY COLORS                             */
+  /* ============================================ */
+
+  .bg-tertiary { background-color: var(--tertiary); --bg: var(--tertiary); }
+  .bg-tertiary-muted { background-color: var(--tertiary-muted); --bg: var(--tertiary-muted); }
+  .bg-tertiary-subtle { background-color: var(--tertiary-subtle); --bg: var(--tertiary-subtle); }
+  .bg-tertiary-overt { background-color: var(--tertiary-overt); --bg: var(--tertiary-overt); }
+  .bg-tertiary-highlight { background-color: var(--tertiary-highlight); --bg: var(--tertiary-highlight); }
+
+  .text-tertiary { color: var(--tertiary); }
+  .text-tertiary-muted { color: var(--tertiary-muted); }
+  .text-tertiary-subtle { color: var(--tertiary-subtle); }
+  .text-tertiary-overt { color: var(--tertiary-overt); }
+  .text-on-tertiary { color: var(--text-on-tertiary); }
+
+  /* ============================================ */
+  /* SEMANTIC COLORS                             */
+  /* ============================================ */
+
+  .bg-success { background-color: var(--surface-success); --bg: var(--surface-success); }
+  .bg-warning { background-color: var(--surface-warning); --bg: var(--surface-warning); }
+  .bg-error { background-color: var(--surface-error); --bg: var(--surface-error); }
+  .bg-info { background-color: var(--surface-info); --bg: var(--surface-info); }
+
+  .text-success { color: var(--text-success); }
+  .text-warning { color: var(--text-warning); }
+  .text-error { color: var(--text-error); }
+  .text-info { color: var(--text-info); }
+
+  .border-success { border-color: var(--outline-success); }
+  .border-warning { border-color: var(--outline-warning); }
+  .border-error { border-color: var(--outline-error); }
+  .border-info { border-color: var(--outline-info); }
+
+  /* ============================================ */
+  /* IMPROVED BUTTON SYSTEM                      */
+  /* ============================================ */
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    border: var(--border-width) solid var(--outline);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface);
+    color: var(--text-on-surface);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    text-decoration: none;
+  }
+
+  .button:hover { background-color: var(--highlight-subtle); }
+  .button:active { background-color: var(--highlight-overt); }
+  .button:disabled {
+    background-color: var(--surface-muted);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .button-primary {
+    background-color: var(--accent);
+    border-color: var(--accent);
+    color: var(--text-on-accent);
+  }
+  .button-primary:hover { background-color: var(--accent-overt); color: var(--text-on-accent); }
+  .button-primary:active { background-color: var(--accent-highlight); color: var(--text-on-accent); }
+  .button-primary:disabled { background-color: var(--accent-muted); color: var(--text-on-accent); }
+
+  .button-secondary {
+    background-color: var(--secondary);
+    border-color: var(--secondary);
+    color: var(--text-on-secondary);
+  }
+  .button-secondary:hover { background-color: var(--secondary-overt); color: var(--text-on-secondary); }
+  .button-secondary:active { background-color: var(--secondary-highlight); color: var(--text-on-secondary); }
+  .button-secondary:disabled { background-color: var(--secondary-muted); color: var(--text-on-secondary); }
+
+  .button-outline {
+    background-color: transparent;
+    border-color: var(--outline);
+    color: var(--text);
+  }
+  .button-outline:hover { background-color: var(--highlight-subtle); }
+  .button-outline:active { background-color: var(--highlight-overt); }
+  .button-outline:disabled { background-color: transparent; }
+
+  .button-ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--text);
+  }
+  .button-ghost:hover { background-color: var(--highlight-subtle); }
+  .button-ghost:active { background-color: var(--highlight-overt); }
+  .button-ghost:disabled { background-color: transparent; }
+
+  .button-text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--accent);
+    padding: 0.5rem 1rem;
+  }
+  .button-text:hover { color: var(--accent-overt); }
+  .button-text:active { color: var(--accent-highlight); }
+  .button-text:disabled { color: var(--text-muted); }
+
+  /* ============================================ */
+  /* IMPROVED FORM ELEMENTS                      */
+  /* ============================================ */
+
+  .input, .textarea, .select {
+    padding: 0.5rem;
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    border: var(--border-width) solid var(--outline);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface);
+    color: var(--text-on-surface);
+    transition: border-color 0.15s ease;
+  }
+
+  .input:focus, .textarea:focus, .select:focus {
+    outline: none;
+    border-color: var(--outline-focus);
+    box-shadow: 0 0 0 2px var(--outline-focus);
+  }
+
+  .input:hover, .textarea:hover, .select:hover {
+    border-color: var(--outline-overt);
+  }
+
+  .input:disabled, .textarea:disabled, .select:disabled {
+    background-color: var(--surface-muted);
+    color: var(--text-muted);
+    cursor: not-allowed;
+  }
+
+  /* ============================================ */
+  /* IMPROVED FOCUS STATES                       */
+  /* ============================================ */
+
+  .focus-ring:focus {
+    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .focus-ring-inset:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+  }
+
+  /* ============================================ */
+  /* IMPROVED TYPOGRAPHY UTILITIES               */
+  /* ============================================ */
+
+  .text-xs { font-size: var(--font-size-xs, 0.75rem); }
+  .text-sm { font-size: var(--font-size-sm, 0.875rem); }
+  .text-base { font-size: var(--font-size-base, 1rem); }
+  .text-lg { font-size: var(--font-size-lg, 1.125rem); }
+  .text-xl { font-size: var(--font-size-xl, 1.25rem); }
+  .text-2xl { font-size: var(--font-size-2xl, 1.5rem); }
+  .text-3xl { font-size: var(--font-size-3xl, 1.875rem); }
+  .text-4xl { font-size: var(--font-size-4xl, 2.25rem); }
+  .text-5xl { font-size: var(--font-size-5xl, 3rem); }
+  .text-6xl { font-size: var(--font-size-6xl, 3.75rem); }
+
+  .font-normal { font-weight: var(--font-weight-normal); }
+  .font-medium { font-weight: var(--font-weight-medium); }
+  .font-semibold { font-weight: var(--font-weight-semibold); }
+  .font-bold { font-weight: var(--font-weight-bold); }
+
+  /* ============================================ */
+  /* IMPROVED SPACING UTILITIES                  */
+  /* ============================================ */
+
+  .p-xs { padding: var(--spacing-xs, 0.25rem); }
+  .p-sm { padding: var(--spacing-sm, 0.5rem); }
+  .p-md { padding: var(--spacing-md, 1rem); }
+  .p-lg { padding: var(--spacing-lg, 1.5rem); }
+  .p-xl { padding: var(--spacing-xl, 2rem); }
+
+  .m-xs { margin: var(--spacing-xs, 0.25rem); }
+  .m-sm { margin: var(--spacing-sm, 0.5rem); }
+  .m-md { margin: var(--spacing-md, 1rem); }
+  .m-lg { margin: var(--spacing-lg, 1.5rem); }
+  .m-xl { margin: var(--spacing-xl, 2rem); }
+
+  /* ============================================ */
+  /* IMPROVED BORDER RADIUS                      */
+  /* ============================================ */
+
+  .rounded-sm { border-radius: var(--border-radius-sm); }
+  .rounded { border-radius: var(--border-radius-md); }
+  .rounded-md { border-radius: var(--border-radius-md); }
+  .rounded-lg { border-radius: var(--border-radius-lg); }
+  .rounded-xl { border-radius: var(--border-radius-xl); }
+  .rounded-full { border-radius: var(--border-radius-full); }
+
+  /* ============================================ */
+  /* IMPROVED SHADOWS                            */
+  /* ============================================ */
+
+  .shadow-sm { box-shadow: var(--shadow-sm); }
+  .shadow { box-shadow: var(--shadow-md); }
+  .shadow-md { box-shadow: var(--shadow-md); }
+  .shadow-lg { box-shadow: var(--shadow-lg); }
+  .shadow-xl { box-shadow: var(--shadow-xl); }
+  .shadow-inner { box-shadow: var(--shadow-inner); }
+
+  /* ============================================ */
+  /* IMPROVED DISPLAY UTILITIES                  */
+  /* ============================================ */
+
+  .d-block { display: block; }
+  .d-inline { display: inline; }
+  .d-inline-block { display: inline-block; }
+  .d-flex { display: flex; }
+  .d-grid { display: grid; }
+  .d-none { display: none; }
+
+  /* ============================================ */
+  /* IMPROVED FLEX UTILITIES                     */
+  /* ============================================ */
+
+  .flex-row { flex-direction: row; }
+  .flex-col { flex-direction: column; }
+  .flex-wrap { flex-wrap: wrap; }
+  .items-center { align-items: center; }
+  .justify-center { justify-content: center; }
+  .justify-between { justify-content: space-between; }
+  .justify-around { justify-content: space-around; }
+  .justify-end { justify-content: flex-end; }
+
+  /* ============================================ */
+  /* IMPROVED POSITION UTILITIES                 */
+  /* ============================================ */
+
+  .pos-static { position: static; }
+  .pos-relative { position: relative; }
+  .pos-absolute { position: absolute; }
+  .pos-fixed { position: fixed; }
+  .pos-sticky { position: sticky; }
+
+  /* ============================================ */
+  /* IMPROVED OVERFLOW UTILITIES                 */
+  /* ============================================ */
+
+  .overflow-auto { overflow: auto; }
+  .overflow-hidden { overflow: hidden; }
+  .overflow-scroll { overflow: scroll; }
+  .overflow-visible { overflow: visible; }
+
+   /* ============================================ */
+   /* IMPROVED INTERACTIVE STATE UTILITIES        */
+   /* ============================================ */
+
+   .hover-highlight:hover { background-color: var(--highlight-bg-subtle); }
+   .active-press:active { transform: scale(0.98); }
+   .focus-ring:focus { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
+
+   /* ============================================ */
+   /* IMPROVED ANCHOR POSITIONING UTILITIES       */
+   /* ============================================ */
+   /*
+    * CSS Anchor Positioning utilities for creating positioned elements
+    * that tether to other elements (anchors) with automatic collision detection.
+    *
+    * Usage:
+    * 1. Add .anchor-name-* to the element you want to anchor to
+    * 2. Add .position-anchor-* to the positioned element
+    * 3. Add .position-area-* to control the positioning relative to the anchor
+    * 4. Optionally add .position-try-fallback for automatic repositioning
+    *
+    * Example:
+    * <button class="anchor-name-tooltip">Hover me</button>
+    * <div class="position-anchor-tooltip position-area-bottom position-try-fallback">
+    *   Tooltip content
+    * </div>
+    */
+
+   /* Anchor name utilities for creating anchor references */
+   .anchor-name-top { anchor-name: --anchor-top; }
+   .anchor-name-bottom { anchor-name: --anchor-bottom; }
+   .anchor-name-left { anchor-name: --anchor-left; }
+   .anchor-name-right { anchor-name: --anchor-right; }
+   .anchor-name-center { anchor-name: --anchor-center; }
+
+   /* Position anchor utilities for referencing anchors */
+   .position-anchor-top { position-anchor: --anchor-top; }
+   .position-anchor-bottom { position-anchor: --anchor-bottom; }
+   .position-anchor-left { position-anchor: --anchor-left; }
+   .position-anchor-right { position-anchor: --anchor-right; }
+   .position-anchor-center { position-anchor: --anchor-center; }
+
+   /* Position area utilities for common anchor positions */
+   @supports (position-area: top center) {
+     .position-area-top { position-area: top center; }
+     .position-area-bottom { position-area: bottom center; }
+     .position-area-left { position-area: left center; }
+     .position-area-right { position-area: right center; }
+     .position-area-top-left { position-area: top left; }
+     .position-area-top-right { position-area: top right; }
+     .position-area-bottom-left { position-area: bottom left; }
+     .position-area-bottom-right { position-area: bottom right; }
+     .position-area-center { position-area: center; }
+   }
+
+   /* Position try utilities for fallback positioning */
+   .position-try-fallback { position-try: --fallback-positions; }
+
+   @position-try --fallback-positions {
+     @try not media(viewport-right: 0px) { position-area: bottom center; }
+     @try { position-area: top center; }
+     @try not media(viewport-bottom: 0px) { position-area: right center; }
+     @try { position-area: left center; }
+   }
+
+   /* ============================================ */
+   /* IMPROVED SCRIM UTILITIES                    */
+   /* ============================================ */
+
+   .scrim { background-color: var(--scrim); }
+   .scrim-light { background-color: var(--scrim-light); }
+
+  /* ============================================ */
+  /* OUTLINE AND RING UTILITIES                  */
+  /* ============================================ */
+
+  .outline-thin { outline-width: 1px; outline-style: solid; }
+  .outline { outline-width: 2px; outline-style: solid; }
+  .outline-thick { outline-width: 3px; outline-style: solid; }
+  .ring-1 { box-shadow: 0 0 0 1px var(--outline-focus); }
+  .ring-2 { box-shadow: 0 0 0 2px var(--outline-focus); }
+  .ring-3 { box-shadow: 0 0 0 3px var(--outline-focus); }
+
+  /* ============================================ */
+  /* GAP UTILITIES                               */
+  /* ============================================ */
+
+  .gap-x-xs { column-gap: var(--spacing-xs); }
+  .gap-x-sm { column-gap: var(--spacing-sm); }
+  .gap-x-md { column-gap: var(--spacing-md); }
+  .gap-x-lg { column-gap: var(--spacing-lg); }
+  .gap-x-xl { column-gap: var(--spacing-xl); }
+  .gap-y-xs { row-gap: var(--spacing-xs); }
+  .gap-y-sm { row-gap: var(--spacing-sm); }
+  .gap-y-md { row-gap: var(--spacing-md); }
+  .gap-y-lg { row-gap: var(--spacing-lg); }
+  .gap-y-xl { row-gap: var(--spacing-xl); }
+
+  /* ============================================ */
+  /* GRID SHORTHANDS                             */
+  /* ============================================ */
+
+  .grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
+  .grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
+  .grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
+  .grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
+  .grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
+  .grid-cols-12 { grid-template-columns: var(--grid-cols-12); }
+
+  /* ============================================ */
+  /* LEGACY FRAMEWORK COMPATIBILITY              */
+  /* ============================================ */
+
+  /* Map to original framework class names */
+  .btn { @extend .button; }
+  .btn-primary { @extend .button-primary; }
+  .btn-secondary { @extend .button-secondary; }
+  .btn-outline { @extend .button-outline; }
+  .btn-ghost { @extend .button-ghost; }
+  .btn-text { @extend .button-text; }
+
+  .form-control { @extend .input; }
+}

package/view-transition.js

@@ -0,0 +1,111 @@
+/** A scoped, progressively enhanced router for the View Transitions API. */
+
+const ROUTER_SELECTOR = ':is(view-transitions, view-transition, [data-view-transitions], .view-transitions)';
+const PAGE_SELECTOR = ':is(view-page, [data-view-page], .view-page)';
+const TRIGGER_SELECTOR = ':is(nav-trigger, [data-view-trigger], .view-trigger)';
+
+function initializeViewTransitions(root = document) {
+  root.querySelectorAll(ROUTER_SELECTOR).forEach(router => {
+    if (router.dataset.viewTransitionsInitialized === 'true') return;
+
+    const pages = Array.from(router.querySelectorAll(PAGE_SELECTOR));
+    const triggers = Array.from(router.querySelectorAll(TRIGGER_SELECTOR));
+    if (pages.length === 0) return;
+
+    router.dataset.viewTransitionsInitialized = 'true';
+
+    const targetFor = trigger => {
+      const explicitTarget = trigger.getAttribute('to');
+      if (explicitTarget) return explicitTarget.replace(/^#/, '');
+
+      const href = trigger.getAttribute('href');
+      return href?.startsWith('#') ? href.slice(1) : '';
+    };
+
+    const setActivePage = pageId => {
+      const nextPage = pages.find(page => page.id === pageId);
+      if (!nextPage) return null;
+
+      pages.forEach(page => page.toggleAttribute('active', page === nextPage));
+      triggers.forEach(trigger => {
+        const isCurrent = targetFor(trigger) === pageId;
+        if (isCurrent) trigger.setAttribute('aria-current', 'page');
+        else trigger.removeAttribute('aria-current');
+      });
+
+      return nextPage;
+    };
+
+    const showPage = (pageId, options = {}) => {
+      const { updateHistory = true, focus = true } = options;
+      const nextPage = pages.find(page => page.id === pageId);
+      if (!nextPage) return;
+
+      const update = () => setActivePage(pageId);
+      const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+      let transition;
+
+      if (!reduceMotion && typeof document.startViewTransition === 'function') {
+        transition = document.startViewTransition(update);
+      } else {
+        update();
+      }
+
+      if (updateHistory && window.location.hash !== `#${pageId}`) {
+        window.history.pushState(null, '', `#${pageId}`);
+      }
+
+      const focusPage = () => {
+        if (!nextPage.hasAttribute('tabindex')) nextPage.setAttribute('tabindex', '-1');
+        nextPage.focus({ preventScroll: true });
+      };
+
+      if (focus) {
+        if (transition?.updateCallbackDone) transition.updateCallbackDone.then(focusPage);
+        else focusPage();
+      }
+    };
+
+    triggers.forEach(trigger => {
+      const pageId = targetFor(trigger);
+      if (!pageId) return;
+
+      if (!trigger.hasAttribute('aria-controls')) trigger.setAttribute('aria-controls', pageId);
+
+      trigger.addEventListener('click', event => {
+        event.preventDefault();
+        showPage(pageId);
+      });
+
+      if (trigger.matches('nav-trigger')) {
+        trigger.addEventListener('keydown', event => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            showPage(pageId);
+          }
+        });
+      }
+    });
+
+    const syncFromLocation = () => {
+      const hashTarget = window.location.hash.slice(1);
+      const initialPage = pages.find(page => page.id === hashTarget)
+        || pages.find(page => page.hasAttribute('active'))
+        || pages[0];
+
+      if (initialPage) showPage(initialPage.id, { updateHistory: false, focus: false });
+    };
+
+    window.addEventListener('popstate', syncFromLocation);
+    syncFromLocation();
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => initializeViewTransitions(), { once: true });
+} else {
+  initializeViewTransitions();
+}
+
+export { initializeViewTransitions };