Pre Release New Changes

packages/ui/components/PageHeader.wrn

@@ -4,11 +4,17 @@ component PageHeader {
     title = ""
     description = ""
     icon = ""
+    id = "page-title"
     align = "left"
-    size = "default"
+    centered = false
     compact = false
+    size = "default"
+    maxWidth = "xl"
     showBreadcrumbs = false
     breadcrumbs = []
+    breadcrumbParent = ""
+    breadcrumbParentHref = ""
+    breadcrumbCurrent = ""
     primaryLabel = ""
     primaryHref = ""
     primaryIcon = ""
@@ -17,89 +23,665 @@ component PageHeader {
     secondaryIcon = ""
     color = "primary"
     variant = "default"
+    borderBottom = true
     class = ""
   }
 
   view {
-    <div
+    <section
       {...attrs}
       data-ui-component="PageHeader"
       data-size='{size}'
+      data-align='{centered ? "center" : align}'
       data-color='{color}'
-      class='{class}'
+      data-variant='{variant}'
+      data-compact='{compact ? "true" : "false"}'
+      data-max-width='{maxWidth}'
+      data-border-bottom='{borderBottom ? "true" : "false"}'
+      aria-labelledby='{id}'
+      class='wire-page-header {class}'
     >
-      <Section
-        spacing='{compact || size === "compact" ? "md" : "lg"}'
-        variant='{variant}'
-        color='{color}'
-        borderBottom="true"
+      <div
+        class="wire-page-header__decoration"
+        aria-hidden="true"
+      >
+        <span
+          class="wire-page-header__glow wire-page-header__glow--one"
+        >
+        </span>
+        <span
+          class="wire-page-header__glow wire-page-header__glow--two"
+        >
+        </span>
+        <span
+          class="wire-page-header__grid-pattern"
+        >
+        </span>
+      </div>
+
+      <div
+        class="wire-page-header__inner"
       >
         {#if showBreadcrumbs && breadcrumbs.length > 0}
-          <Breadcrumb
-            label="Breadcrumb"
-            items='{breadcrumbs}'
-            active='{breadcrumbs[breadcrumbs.length - 1]?.value || breadcrumbs[breadcrumbs.length - 1]?.label || ""}'
-            color='{color}'
-            class="mb-6"
-          />
+          <div
+            class="wire-page-header__breadcrumb"
+          >
+            <Breadcrumb
+              label="Breadcrumb"
+              items='{breadcrumbs}'
+              active='{breadcrumbs[breadcrumbs.length - 1]?.value || breadcrumbs[breadcrumbs.length - 1]?.label || breadcrumbs[breadcrumbs.length - 1]?.title || ""}'
+              color='{color}'
+              size='{compact ? "sm" : "default"}'
+              variant='{variant === "solid" ? "contrast" : "minimal"}'
+            />
+          </div>
+        {:else if showBreadcrumbs && breadcrumbParent}
+          <div
+            class="wire-page-header__breadcrumb"
+          >
+            <Breadcrumb
+              label="Breadcrumb"
+              items='{[
+{
+label: breadcrumbParent,
+href: breadcrumbParentHref,
+value: breadcrumbParent
+},
+{
+label: breadcrumbCurrent || title,
+value: breadcrumbCurrent || title,
+current: true
+}
+]}'
+              active='{breadcrumbCurrent || title}'
+              color='{color}'
+              size='{compact ? "sm" : "default"}'
+              variant='{variant === "solid" ? "contrast" : "minimal"}'
+            />
+          </div>
+        {:else if showBreadcrumbs && (breadcrumbCurrent || title)}
+          <div
+            class="wire-page-header__breadcrumb"
+          >
+            <Breadcrumb
+              label="Breadcrumb"
+              items='{[
+{
+label: breadcrumbCurrent || title,
+value: breadcrumbCurrent || title,
+current: true
+}
+]}'
+              active='{breadcrumbCurrent || title}'
+              color='{color}'
+              size='{compact ? "sm" : "default"}'
+              variant='{variant === "solid" ? "contrast" : "minimal"}'
+            />
+          </div>
         {/if}
 
         <div
-          class="flex flex-col gap-6"
-          class:items-center='align === "center"'
-          class:text-center='align === "center"'
-          class:lg:flex-row='align !== "center"'
-          class:lg:items-end='align !== "center"'
-          class:lg:justify-between='align !== "center"'
+          class="wire-page-header__layout"
         >
-          <div class="max-w-4xl">
-            {#if icon}
-              <span class="mb-5 inline-flex size-12 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
-                <span class='{icon + " size-6"}' aria-hidden="true"></span>
-              </span>
-            {/if}
-
-            <SectionHeader
-              eyebrow='{eyebrow}'
-              title='{title}'
-              description='{description}'
-              align='{align === "center" ? "center" : "left"}'
-              size='{compact || size === "compact" ? "sm" : "lg"}'
-              color='{color}'
-              headingLevel="1"
-              maxWidth="4xl"
+          <div
+            class="wire-page-header__content"
+          >
+            <div
+              class="wire-page-header__intro"
             >
-              <slot name="meta"></slot>
-            </SectionHeader>
+              {#if icon}
+                <span
+                  class="wire-page-header__icon-wrap"
+                >
+                  {#if icon === "sparkles"}
+                    <span
+                      class="icon-[lucide--sparkles] wire-page-header__icon"
+                      aria-hidden="true"
+                    >
+                    </span>
+                  {:else if icon === "component"}
+                    <span
+                      class="icon-[lucide--component] wire-page-header__icon"
+                      aria-hidden="true"
+                    >
+                    </span>
+                  {:else}
+                    <span
+                      class='{icon} wire-page-header__icon'
+                      aria-hidden="true"
+                    >
+                    </span>
+                  {/if}
+                </span>
+              {/if}
+
+              <div
+                class="wire-page-header__copy"
+              >
+                {#if eyebrow}
+                  <div
+                    class="wire-page-header__eyebrow-row"
+                  >
+                    <span
+                      class="wire-page-header__eyebrow-mark"
+                      aria-hidden="true"
+                    >
+                    </span>
+                    <p
+                      class="wire-page-header__eyebrow"
+                    >
+                      {eyebrow}
+                    </p>
+                  </div>
+                {/if}
+
+                {#if title}
+                  <h1
+                    id='{id}'
+                    class="wire-page-header__title"
+                  >
+                    {title}
+                  </h1>
+                {/if}
+
+                {#if description}
+                  <p
+                    class="wire-page-header__description"
+                  >
+                    {description}
+                  </p>
+                {/if}
+
+                <div
+                  class="wire-page-header__meta"
+                >
+                  <slot
+                    name="meta"
+                  >
+                  </slot>
+                </div>
+              </div>
+            </div>
           </div>
 
-          <div class="flex flex-wrap items-center gap-3" class:justify-center='align === "center"'>
-            {#if secondaryLabel}
-              <Button
-                label='{secondaryLabel}'
-                href='{secondaryHref}'
-                icon='{secondaryIcon}'
-                variant="outline"
-                color='{color}'
-              />
-            {/if}
+          {#if primaryLabel || secondaryLabel}
+            <div
+              class="wire-page-header__actions"
+            >
+              {#if secondaryLabel}
+                <Button
+                  label='{secondaryLabel}'
+                  href='{secondaryHref || "#"}'
+                  icon='{secondaryIcon}'
+                  size='{compact ? "sm" : "default"}'
+                  variant="outline"
+                  color='{color}'
+                  class="wire-page-header__action wire-page-header__action--secondary"
+                />
+              {/if}
 
-            {#if primaryLabel}
-              <Button
-                label='{primaryLabel}'
-                href='{primaryHref}'
-                icon='{primaryIcon}'
-                variant="default"
-                color='{color}'
-              />
-            {/if}
+              {#if primaryLabel}
+                <Button
+                  label='{primaryLabel}'
+                  href='{primaryHref || "#"}'
+                  icon='{primaryIcon}'
+                  size='{compact ? "sm" : "default"}'
+                  variant="default"
+                  color='{color}'
+                  class="wire-page-header__action wire-page-header__action--primary"
+                />
+              {/if}
 
-            <slot name="actions"></slot>
-          </div>
+              <slot
+                name="actions"
+              >
+              </slot>
+            </div>
+          {:else}
+            <div
+              class="wire-page-header__actions wire-page-header__actions--slot-only"
+            >
+              <slot
+                name="actions"
+              >
+              </slot>
+            </div>
+          {/if}
         </div>
 
-        <slot></slot>
-      </Section>
-    </div>
+        <div
+          class="wire-page-header__body"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </section>
+  }
+
+  style {
+    .wire-page-header {
+      --page-header-accent: var(--wire-color-primary);
+      --page-header-soft: var(--wire-color-primary-soft);
+      --page-header-muted: var(--wire-color-primary-muted);
+      --page-header-accent-text: var(--wire-color-primary-text);
+
+      position: relative;
+      isolation: isolate;
+      width: 100%;
+      overflow: hidden;
+      color: var(--wire-color-text);
+      background: var(--wire-color-background);
+    }
+
+    .wire-page-header[data-color="secondary"] {
+      --page-header-accent: var(--wire-color-secondary);
+      --page-header-soft: var(--wire-color-secondary-soft);
+      --page-header-muted: var(--wire-color-secondary-muted);
+      --page-header-accent-text: var(--wire-color-secondary-text);
+    }
+
+    .wire-page-header[data-color="info"] {
+      --page-header-accent: var(--wire-color-info);
+      --page-header-soft: var(--wire-color-info-soft);
+      --page-header-muted: var(--wire-color-info-muted);
+      --page-header-accent-text: var(--wire-color-info-text);
+    }
+
+    .wire-page-header[data-color="success"] {
+      --page-header-accent: var(--wire-color-success);
+      --page-header-soft: var(--wire-color-success-soft);
+      --page-header-muted: var(--wire-color-success-muted);
+      --page-header-accent-text: var(--wire-color-success-text);
+    }
+
+    .wire-page-header[data-color="warning"] {
+      --page-header-accent: var(--wire-color-warning);
+      --page-header-soft: var(--wire-color-warning-soft);
+      --page-header-muted: var(--wire-color-warning-muted);
+      --page-header-accent-text: var(--wire-color-warning-text);
+    }
+
+    .wire-page-header[data-color="danger"] {
+      --page-header-accent: var(--wire-color-danger);
+      --page-header-soft: var(--wire-color-danger-soft);
+      --page-header-muted: var(--wire-color-danger-muted);
+      --page-header-accent-text: var(--wire-color-danger-text);
+    }
+
+    .wire-page-header[data-variant="soft"] {
+      background: var(--wire-color-surface);
+    }
+
+    .wire-page-header[data-variant="raised"] {
+      background: var(--wire-color-surface-raised);
+      box-shadow: var(--wire-shadow-sm);
+    }
+
+    .wire-page-header[data-variant="tinted"] {
+      background:
+      linear-gradient(135deg, var(--page-header-soft), transparent 72%),
+      var(--wire-color-background);
+    }
+
+    .wire-page-header[data-variant="solid"] {
+      color: #ffffff;
+      background: var(--page-header-accent);
+    }
+
+    .wire-page-header[data-variant="minimal"] {
+      background: transparent;
+    }
+
+    .wire-page-header[data-border-bottom="true"] {
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+
+    .wire-page-header[data-variant="solid"][data-border-bottom="true"] {
+      border-bottom-color: rgba(255, 255, 255, 0.18);
+    }
+
+    .wire-page-header__decoration {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      overflow: hidden;
+      pointer-events: none;
+    }
+
+    .wire-page-header__glow {
+      position: absolute;
+      display: block;
+      border-radius: 999px;
+      filter: blur(60px);
+      opacity: 0.17;
+    }
+
+    .wire-page-header__glow--one {
+      top: -9rem;
+      right: -5rem;
+      width: 24rem;
+      height: 24rem;
+      background: var(--page-header-accent);
+    }
+
+    .wire-page-header__glow--two {
+      bottom: -10rem;
+      left: 18%;
+      width: 18rem;
+      height: 18rem;
+      background: var(--page-header-muted);
+      opacity: 0.13;
+    }
+
+    .wire-page-header__grid-pattern {
+      position: absolute;
+      inset: 0;
+      opacity: 0.2;
+      background-image:
+      linear-gradient(to right, var(--wire-color-border) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--wire-color-border) 1px, transparent 1px);
+      background-size: 32px 32px;
+      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 78%);
+    }
+
+    .wire-page-header[data-variant="minimal"] .wire-page-header__decoration,
+    .wire-page-header[data-compact="true"] .wire-page-header__grid-pattern {
+      display: none;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__grid-pattern {
+      opacity: 0.1;
+      background-image:
+      linear-gradient(to right, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
+    }
+
+    .wire-page-header__inner {
+      position: relative;
+      width: 100%;
+      max-width: 80rem;
+      margin-inline: auto;
+      padding: 1.25rem 1rem 2.75rem;
+    }
+
+    .wire-page-header[data-max-width="compact"] .wire-page-header__inner,
+    .wire-page-header[data-max-width="lg"] .wire-page-header__inner {
+      max-width: 64rem;
+    }
+
+    .wire-page-header[data-max-width="wide"] .wire-page-header__inner,
+    .wire-page-header[data-max-width="2xl"] .wire-page-header__inner {
+      max-width: 90rem;
+    }
+
+    .wire-page-header[data-max-width="full"] .wire-page-header__inner {
+      max-width: none;
+    }
+
+    .wire-page-header[data-compact="true"] .wire-page-header__inner {
+      padding-top: 1rem;
+      padding-bottom: 1.75rem;
+    }
+
+    .wire-page-header[data-size="lg"] .wire-page-header__inner {
+      padding-bottom: 3.5rem;
+    }
+
+    .wire-page-header__breadcrumb {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      margin-bottom: 1.75rem;
+      padding-bottom: 0.9rem;
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__breadcrumb {
+      border-bottom-color: rgba(255, 255, 255, 0.18);
+    }
+
+    .wire-page-header[data-compact="true"] .wire-page-header__breadcrumb {
+      margin-bottom: 1.25rem;
+      padding-bottom: 0.7rem;
+    }
+
+    .wire-page-header__layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 1.75rem;
+      align-items: start;
+    }
+
+    .wire-page-header__content,
+    .wire-page-header__copy {
+      min-width: 0;
+    }
+
+    .wire-page-header__intro {
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+      min-width: 0;
+    }
+
+    .wire-page-header__icon-wrap {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: 3.25rem;
+      height: 3.25rem;
+      margin-top: 0.15rem;
+      color: var(--page-header-accent);
+      background: var(--page-header-soft);
+      border: 1px solid var(--page-header-muted);
+      border-radius: 1rem;
+      box-shadow: var(--wire-shadow-sm);
+    }
+
+    .wire-page-header[data-compact="true"] .wire-page-header__icon-wrap {
+      width: 2.75rem;
+      height: 2.75rem;
+      border-radius: 0.8rem;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__icon-wrap {
+      color: #ffffff;
+      background: rgba(255, 255, 255, 0.12);
+      border-color: rgba(255, 255, 255, 0.22);
+    }
+
+    .wire-page-header__icon {
+      width: 1.35rem;
+      height: 1.35rem;
+    }
+
+    .wire-page-header__eyebrow-row {
+      display: flex;
+      align-items: center;
+      gap: 0.65rem;
+      margin-bottom: 0.65rem;
+    }
+
+    .wire-page-header__eyebrow-mark {
+      width: 1.75rem;
+      height: 2px;
+      flex: 0 0 auto;
+      background: var(--page-header-accent);
+      border-radius: 999px;
+    }
+
+    .wire-page-header__eyebrow {
+      margin: 0;
+      color: var(--page-header-accent-text);
+      font-size: 0.72rem;
+      font-weight: 800;
+      line-height: 1.3;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__eyebrow,
+    .wire-page-header[data-variant="solid"] .wire-page-header__title,
+    .wire-page-header[data-variant="solid"] .wire-page-header__description {
+      color: #ffffff;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__eyebrow-mark {
+      background: rgba(255, 255, 255, 0.8);
+    }
+
+    .wire-page-header__title {
+      max-width: 54rem;
+      margin: 0;
+      color: var(--wire-color-text);
+      font-size: clamp(2rem, 4vw, 3.75rem);
+      font-weight: 800;
+      line-height: 1.08;
+      letter-spacing: -0.035em;
+      text-wrap: balance;
+    }
+
+    .wire-page-header[data-compact="true"] .wire-page-header__title {
+      font-size: clamp(1.75rem, 3vw, 2.65rem);
+    }
+
+    .wire-page-header[data-size="lg"] .wire-page-header__title {
+      font-size: clamp(2.35rem, 5vw, 4.5rem);
+    }
+
+    .wire-page-header__description {
+      max-width: 48rem;
+      margin: 0.9rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 1rem;
+      line-height: 1.75;
+      text-wrap: pretty;
+    }
+
+    .wire-page-header[data-size="lg"] .wire-page-header__description {
+      font-size: 1.075rem;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__description {
+      opacity: 0.82;
+    }
+
+    .wire-page-header__meta:empty,
+    .wire-page-header__body:empty,
+    .wire-page-header__actions--slot-only:empty {
+      display: none;
+    }
+
+    .wire-page-header__meta {
+      margin-top: 1.1rem;
+    }
+
+    .wire-page-header__actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.75rem;
+      min-width: 0;
+    }
+
+    .wire-page-header__body {
+      margin-top: 1.75rem;
+    }
+
+    .wire-page-header[data-align="center"] .wire-page-header__layout {
+      justify-items: center;
+      text-align: center;
+    }
+
+    .wire-page-header[data-align="center"] .wire-page-header__intro {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .wire-page-header[data-align="center"] .wire-page-header__eyebrow-row,
+    .wire-page-header[data-align="center"] .wire-page-header__actions {
+      justify-content: center;
+    }
+
+    .wire-page-header[data-align="center"] .wire-page-header__title,
+    .wire-page-header[data-align="center"] .wire-page-header__description {
+      margin-inline: auto;
+    }
+
+    .wire-page-header[data-align="right"] .wire-page-header__layout {
+      justify-items: end;
+      text-align: right;
+    }
+
+    .wire-page-header[data-align="right"] .wire-page-header__intro {
+      flex-direction: row-reverse;
+    }
+
+    .wire-page-header[data-align="right"] .wire-page-header__eyebrow-row,
+    .wire-page-header[data-align="right"] .wire-page-header__actions {
+      justify-content: flex-end;
+    }
+
+    .wire-page-header[data-align="right"] .wire-page-header__title,
+    .wire-page-header[data-align="right"] .wire-page-header__description {
+      margin-left: auto;
+    }
+
+    @media (min-width: 640px) {
+      .wire-page-header__inner {
+        padding-inline: 1.5rem;
+      }
+
+      .wire-page-header__intro {
+        gap: 1.25rem;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-page-header__inner {
+        padding-inline: 2rem;
+      }
+
+      .wire-page-header__layout {
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: start;
+        gap: 2.5rem;
+      }
+
+      .wire-page-header[data-align="center"] .wire-page-header__layout,
+      .wire-page-header[data-align="right"] .wire-page-header__layout {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      .wire-page-header__actions {
+        align-self: start;
+        justify-self: end;
+        justify-content: flex-end;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-page-header__intro {
+        flex-direction: column;
+      }
+
+      .wire-page-header__actions {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      .wire-page-header__action {
+        width: 100%;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-page-header__glow {
+        filter: blur(52px);
+      }
+    }
   }
 }