@hawiyah/styles 0.0.0-stage → 0.2.1

package/dist/layout.css

@@ -0,0 +1,129 @@
+/* CSS-only responsive layout. Every boundary resets local options, so a nested
+   layout does not inherit its parent's breakpoint columns or padding. */
+:where(.hw-container, .hw-stack, .hw-inline, .hw-grid, .hw-columns,
+  .hw-sidebar, .hw-center, .hw-spacer, .hw-aspect-ratio, .hw-section,
+  .hw-app-shell, .hw-page-header) {
+  --hw-layout-gap: var(--hw-gap, var(--hw-space-4));
+  --hw-layout-gap-sm: initial;
+  --hw-layout-gap-md: initial;
+  --hw-layout-gap-lg: initial;
+  --hw-layout-gap-xl: initial;
+  --hw-layout-padding: 0px;
+  --hw-layout-padding-sm: initial;
+  --hw-layout-padding-md: initial;
+  --hw-layout-padding-lg: initial;
+  --hw-layout-padding-xl: initial;
+  --hw-layout-columns: 1;
+  --hw-layout-columns-sm: initial;
+  --hw-layout-columns-md: initial;
+  --hw-layout-columns-lg: initial;
+  --hw-layout-columns-xl: initial;
+  --hw-layout-align: stretch;
+  --hw-layout-justify: start;
+  --hw-layout-wrap: wrap;
+  --hw-layout-min-item: 0px;
+  --hw-layout-sidebar-width: 18rem;
+  --hw-layout-max-width: var(--hw-content-max);
+  --hw-layout-ratio: 1.777777778;
+  --hw-layout-current-gap: var(--hw-layout-gap);
+  --hw-layout-current-padding: var(--hw-layout-padding);
+  --hw-layout-current-columns: var(--hw-layout-columns);
+  box-sizing: border-box;
+  min-inline-size: 0;
+  gap: var(--hw-layout-current-gap);
+  padding: var(--hw-layout-current-padding);
+  font-family: var(--hw-font-sans);
+}
+:where(.hw-stack, .hw-inline, .hw-grid, .hw-columns, .hw-sidebar, .hw-app-shell) > * { min-inline-size: 0; }
+.hw-container { inline-size: min(var(--hw-layout-max-width), calc(100% - 2 * var(--hw-content-gutter, 1.5rem))); margin-inline: auto; }
+.hw-container[data-variant='fluid'] { inline-size: 100%; }
+/* Mobile gutter is a layout policy; the reference frame widths are not
+   themselves breakpoints. Figma variable 50:3/4/5: 1280 / 32 / 16px. */
+@media (max-width: 37.499rem) {
+  .hw-container:not([data-variant='fluid']) { inline-size: min(var(--hw-layout-max-width), calc(100% - 2 * var(--hw-content-gutter-mobile, 1rem))); }
+}
+.hw-stack { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: var(--hw-layout-align); justify-content: var(--hw-layout-justify); gap: var(--hw-layout-current-gap); }
+.hw-inline { --hw-layout-align: center; display: flex; flex-direction: row; flex-wrap: var(--hw-layout-wrap); align-items: var(--hw-layout-align); justify-content: var(--hw-layout-justify); }
+.hw-grid, .hw-columns {
+  display: grid;
+  grid-template-columns: repeat(var(--hw-layout-current-columns), minmax(min(100%, var(--hw-layout-min-item)), 1fr));
+  align-items: var(--hw-layout-align);
+  justify-content: var(--hw-layout-justify);
+}
+.hw-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: var(--hw-layout-align); }
+.hw-center { --hw-layout-align: center; --hw-layout-justify: center; display: flex; flex-direction: column; align-items: var(--hw-layout-align); justify-content: var(--hw-layout-justify); text-align: center; }
+.hw-spacer { --hw-layout-gap: 0px; flex: 1 1 0%; min-inline-size: var(--hw-layout-current-gap); min-block-size: var(--hw-layout-current-gap); pointer-events: none; }
+.hw-aspect-ratio { position: relative; inline-size: 100%; aspect-ratio: var(--hw-layout-ratio); overflow: hidden; }
+.hw-aspect-ratio > :is(img, video, iframe, canvas) { display: block; inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; }
+.hw-aspect-ratio[data-fit='contain'] > :is(img, video) { object-fit: contain; }
+.hw-section { --hw-layout-padding: var(--hw-space-6); }
+.hw-section[data-tone='muted'] { background: var(--hw-color-surface-muted); color: var(--hw-color-text); }
+.hw-section[data-tone='brand'] { background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); }
+.hw-app-shell { position: relative; --hw-layout-gap: 0px; display: grid; grid-template-areas: 'header' 'sidebar' 'main' 'footer'; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; min-block-size: 100dvh; background: var(--hw-color-canvas); color: var(--hw-color-text); }
+.hw-app-shell > :is(header, .hw-app-shell-header) { grid-area: header; }
+.hw-app-shell > :is(aside, nav, .hw-app-shell-sidebar) { grid-area: sidebar; }
+.hw-app-shell > :is(main, .hw-app-shell-main) { grid-area: main; }
+.hw-app-shell > :is(footer, .hw-app-shell-footer) { grid-area: footer; }
+/* Angular projection leaves empty region elements when callers omit a slot. */
+.hw-app-shell > :is(.hw-app-shell-header, .hw-app-shell-sidebar, .hw-app-shell-footer):empty { display: none; }
+.hw-app-shell-sidebar { padding: var(--hw-space-5); border-block-end: 1px solid var(--hw-color-border); background: var(--hw-color-surface); }
+.hw-app-shell-main { padding: clamp(1rem, 3vw, 3rem); }
+.hw-page-header { --hw-layout-align: start; --hw-layout-justify: space-between; display: flex; flex-wrap: var(--hw-layout-wrap); align-items: var(--hw-layout-align); justify-content: var(--hw-layout-justify); color: var(--hw-color-text); }
+.hw-page-header-content, .hw-page-header > :first-child:not(.hw-page-header-actions) { flex: 1 1 16rem; min-inline-size: 0; }
+.hw-page-header :is(h1, h2) { margin: 0; font-size: clamp(var(--hw-text-xl), 3vw, var(--hw-text-3xl)); font-weight: var(--hw-weight-semibold); line-height: var(--hw-leading-heading); }
+.hw-page-header p { max-inline-size: 65ch; margin-block: var(--hw-space-2) 0; color: var(--hw-color-text-muted); }
+.hw-page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-3); }
+@media (min-width: 40rem) {
+  :where(.hw-container, .hw-stack, .hw-inline, .hw-grid, .hw-columns, .hw-sidebar, .hw-center, .hw-spacer, .hw-aspect-ratio, .hw-section, .hw-app-shell, .hw-page-header) {
+    --hw-layout-current-gap: var(--hw-layout-gap-sm, var(--hw-layout-gap));
+    --hw-layout-current-padding: var(--hw-layout-padding-sm, var(--hw-layout-padding));
+    --hw-layout-current-columns: var(--hw-layout-columns-sm, var(--hw-layout-columns));
+  }
+  .hw-sidebar[data-collapse-at='sm'] { grid-template-columns: min(40%, var(--hw-layout-sidebar-width)) minmax(0, 1fr); }
+  .hw-sidebar[data-collapse-at='sm'][data-side='end'] { grid-template-columns: minmax(0, 1fr) min(40%, var(--hw-layout-sidebar-width)); }
+  .hw-sidebar[data-collapse-at='sm'][data-side='end'] > :first-child { grid-column: 2; grid-row: 1; }
+  .hw-sidebar[data-collapse-at='sm'][data-side='end'] > :nth-child(2) { grid-column: 1; grid-row: 1; }
+}
+@media (min-width: 48rem) {
+  :where(.hw-container, .hw-stack, .hw-inline, .hw-grid, .hw-columns, .hw-sidebar, .hw-center, .hw-spacer, .hw-aspect-ratio, .hw-section, .hw-app-shell, .hw-page-header) {
+    --hw-layout-current-gap: var(--hw-layout-gap-md, var(--hw-layout-gap-sm, var(--hw-layout-gap)));
+    --hw-layout-current-padding: var(--hw-layout-padding-md, var(--hw-layout-padding-sm, var(--hw-layout-padding)));
+    --hw-layout-current-columns: var(--hw-layout-columns-md, var(--hw-layout-columns-sm, var(--hw-layout-columns)));
+  }
+  .hw-sidebar:not([data-collapse-at]), .hw-sidebar[data-collapse-at='md'] { grid-template-columns: min(40%, var(--hw-layout-sidebar-width)) minmax(0, 1fr); }
+  .hw-sidebar:not([data-collapse-at])[data-side='end'], .hw-sidebar[data-collapse-at='md'][data-side='end'] { grid-template-columns: minmax(0, 1fr) min(40%, var(--hw-layout-sidebar-width)); }
+  .hw-sidebar:not([data-collapse-at])[data-side='end'] > :first-child, .hw-sidebar[data-collapse-at='md'][data-side='end'] > :first-child { grid-column: 2; grid-row: 1; }
+  .hw-sidebar:not([data-collapse-at])[data-side='end'] > :nth-child(2), .hw-sidebar[data-collapse-at='md'][data-side='end'] > :nth-child(2) { grid-column: 1; grid-row: 1; }
+}
+@media (min-width: 64rem) {
+  :where(.hw-container, .hw-stack, .hw-inline, .hw-grid, .hw-columns, .hw-sidebar, .hw-center, .hw-spacer, .hw-aspect-ratio, .hw-section, .hw-app-shell, .hw-page-header) {
+    --hw-layout-current-gap: var(--hw-layout-gap-lg, var(--hw-layout-gap-md, var(--hw-layout-gap-sm, var(--hw-layout-gap))));
+    --hw-layout-current-padding: var(--hw-layout-padding-lg, var(--hw-layout-padding-md, var(--hw-layout-padding-sm, var(--hw-layout-padding))));
+    --hw-layout-current-columns: var(--hw-layout-columns-lg, var(--hw-layout-columns-md, var(--hw-layout-columns-sm, var(--hw-layout-columns))));
+  }
+  .hw-sidebar[data-collapse-at='lg'] { grid-template-columns: min(40%, var(--hw-layout-sidebar-width)) minmax(0, 1fr); }
+  .hw-sidebar[data-collapse-at='lg'][data-side='end'] { grid-template-columns: minmax(0, 1fr) min(40%, var(--hw-layout-sidebar-width)); }
+  .hw-sidebar[data-collapse-at='lg'][data-side='end'] > :first-child { grid-column: 2; grid-row: 1; }
+  .hw-sidebar[data-collapse-at='lg'][data-side='end'] > :nth-child(2) { grid-column: 1; grid-row: 1; }
+  .hw-app-shell:has(.hw-app-shell-sidebar:not(:empty), > aside:not(:empty), > nav:not(:empty)) { grid-template-areas: 'header header' 'sidebar main' 'footer footer'; grid-template-columns: min(30%, var(--hw-layout-sidebar-width)) minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
+  .hw-app-shell[data-side='end']:has(.hw-app-shell-sidebar:not(:empty), > aside:not(:empty), > nav:not(:empty)) { grid-template-areas: 'header header' 'main sidebar' 'footer footer'; grid-template-columns: minmax(0, 1fr) min(30%, var(--hw-layout-sidebar-width)); }
+  .hw-app-shell-sidebar { border-block-end: 0; border-inline-end: 1px solid var(--hw-color-border); }
+  .hw-app-shell[data-side='end'] .hw-app-shell-sidebar { border-inline-end: 0; border-inline-start: 1px solid var(--hw-color-border); }
+}
+@media (min-width: 80rem) {
+  :where(.hw-container, .hw-stack, .hw-inline, .hw-grid, .hw-columns, .hw-sidebar, .hw-center, .hw-spacer, .hw-aspect-ratio, .hw-section, .hw-app-shell, .hw-page-header) {
+    --hw-layout-current-gap: var(--hw-layout-gap-xl, var(--hw-layout-gap-lg, var(--hw-layout-gap-md, var(--hw-layout-gap-sm, var(--hw-layout-gap)))));
+    --hw-layout-current-padding: var(--hw-layout-padding-xl, var(--hw-layout-padding-lg, var(--hw-layout-padding-md, var(--hw-layout-padding-sm, var(--hw-layout-padding)))));
+    --hw-layout-current-columns: var(--hw-layout-columns-xl, var(--hw-layout-columns-lg, var(--hw-layout-columns-md, var(--hw-layout-columns-sm, var(--hw-layout-columns)))));
+  }
+}
+
+/* Adapters may group the body for composition; display:contents preserves the
+   same outer grid while the landmarks themselves remain real elements. */
+.hw-app-shell-body { display: contents; }
+.hw-app-shell-body > .hw-app-shell-sidebar { grid-area: sidebar; }
+.hw-app-shell-body > .hw-app-shell-main { grid-area: main; }
+.hw-app-shell:not(:has(.hw-app-shell-sidebar:not(:empty), > aside:not(:empty), > nav:not(:empty))) { grid-template-areas: 'header' 'main' 'footer'; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
+.hw-page-header-main { display: flex; flex-wrap: wrap; align-items: var(--hw-layout-align); justify-content: var(--hw-layout-justify); gap: var(--hw-layout-current-gap); flex: 1 1 100%; min-inline-size: 0; }
+.hw-page-header-main > :first-child { flex: 1 1 16rem; min-inline-size: 0; }
+.hw-page-header > :is(.hw-breadcrumb, nav) { flex-basis: 100%; }

package/dist/link-composition.css

@@ -0,0 +1,10 @@
+/* Inline SVGs may be display:block in a consuming reset. Keep the label and
+   its icon on one flex row without changing link semantics or color variants. */
+.hw-link-icon, .hw-link:has(> svg, > .hw-icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hw-space-2);
+  max-inline-size: 100%;
+  vertical-align: middle;
+}
+.hw-link-icon > svg, .hw-link > :is(svg, .hw-icon) { flex: none; }

package/dist/mobile-navigation.css

@@ -0,0 +1,43 @@
+/* Mobile Components 8332:24202 / 24242 / 24282: color state changes,
+   not a translating indicator. Route navigation keeps native link semantics. */
+.hw-secondary-nav[data-variant='mobile'] {
+  border: 0;
+  padding-block-end: env(safe-area-inset-bottom, 0px);
+}
+.hw-secondary-nav[data-variant='mobile'] ul {
+  flex-wrap: nowrap;
+  gap: 0;
+  padding: 0 0.25rem;
+}
+.hw-secondary-nav[data-variant='mobile'] li { flex: 1 1 0; min-inline-size: 0; }
+.hw-secondary-nav[data-variant='mobile'] a {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.25rem;
+  inline-size: 100%;
+  min-block-size: 4.375rem;
+  padding: 0.6875rem 0.5rem 0.75rem;
+  border-block-start: 1px solid transparent;
+  border-block-end: 0;
+  background: transparent;
+  color: var(--hw-color-text-muted);
+  font: var(--hw-weight-medium) 0.75rem / 1.5 var(--hw-font-sans);
+  text-align: center;
+  overflow-wrap: anywhere;
+  transition: color var(--hw-duration-tab-bar, 300ms) var(--hw-ease-tab-bar, ease-out),
+    border-block-start-color var(--hw-duration-tab-bar, 300ms) var(--hw-ease-tab-bar, ease-out);
+}
+.hw-secondary-nav[data-variant='mobile'] .hw-icon { --hw-icon-size: 1.5rem; }
+.hw-secondary-nav[data-variant='mobile'] a:is(:hover, :active, [aria-current='page']) {
+  color: var(--hw-color-primary-text);
+  background: transparent;
+}
+.hw-secondary-nav[data-variant='mobile'] a[aria-current='page'] { border-block-start-color: currentColor; }
+@media (prefers-reduced-motion: reduce) {
+  .hw-secondary-nav[data-variant='mobile'] a { transition: none; }
+}
+@media (forced-colors: active) {
+  .hw-secondary-nav[data-variant='mobile'] a[aria-current='page'] { border-block-start-color: LinkText; }
+}

package/dist/mobile-top-bar.css

@@ -0,0 +1,15 @@
+/* Mobile 8335:15564/15565 and 8335:15397/15402/15403. OS status chrome is
+   excluded. Intrinsic height and 44px actions are accessibility adaptations. */
+.hw-mobile-top-bar { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); min-inline-size: 0; inline-size: 100%; min-block-size: 3.75rem; padding-block: max(var(--hw-space-2), env(safe-area-inset-top, 0px)) var(--hw-space-2); padding-left: max(var(--hw-space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--hw-space-4), env(safe-area-inset-right, 0px)); color: var(--hw-color-text); background: var(--hw-color-surface); font-family: var(--hw-font-sans); border-block-end: 1px solid var(--hw-color-border); }
+.hw-mobile-top-bar-copy { flex: 1 1 6rem; min-inline-size: 0; overflow-wrap: anywhere; }
+.hw-mobile-top-bar-title { margin: 0; color: var(--hw-color-heading, var(--hw-color-text)); font-size: .875rem; line-height: 1.5; font-weight: var(--hw-weight-semibold); }
+.hw-mobile-top-bar[data-variant='main'] .hw-mobile-top-bar-title { font-size: 1.625rem; font-weight: var(--hw-weight-bold, 700); }
+.hw-mobile-top-bar-subtitle { margin: 0; color: var(--hw-color-text-muted); font-size: .75rem; line-height: 1.5; }
+.hw-mobile-top-bar-leading, .hw-mobile-top-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); min-inline-size: 0; max-inline-size: 100%; }
+.hw-mobile-top-bar-leading:empty, .hw-mobile-top-bar-actions:empty { display: none; }
+.hw-mobile-top-bar-actions { margin-inline-start: auto; }
+.hw-mobile-top-bar :is(a, button) { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; white-space: normal; overflow-wrap: anywhere; }
+.hw-mobile-top-bar-back { color: inherit; text-decoration: none; border-radius: var(--hw-radius-sm); }
+.hw-mobile-top-bar-back:hover { background: var(--hw-color-surface-muted); }
+.hw-mobile-top-bar :is(a, button):focus-visible { outline: 2px solid var(--hw-color-focus); outline-offset: -2px; }
+@media (forced-colors: active) { .hw-mobile-top-bar :is(a, button):focus-visible { outline-color: Highlight; } }

package/dist/navigation-drawer.css

@@ -0,0 +1,104 @@
+/* Mobile Nav Drawer 1679:30949 / 538:296406. Source dimensions describe
+   examples; content grows and the existing Drawer owns modal behavior/motion. */
+:is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) {
+  box-sizing: border-box;
+  inline-size: min(20.4375rem, calc(100vw - 1rem));
+  max-inline-size: calc(100vw - 1rem);
+  color: var(--hw-color-text);
+  background: var(--hw-color-surface);
+  font-family: var(--hw-font-sans);
+}
+:is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-header {
+  align-items: center;
+  gap: 0.5rem;
+  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) 1rem max(1rem, env(safe-area-inset-left, 0px));
+}
+:is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-header h2 { min-inline-size: 0; overflow-wrap: anywhere; }
+:is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-header > button {
+  flex: none;
+  min-inline-size: 2.75rem;
+  min-block-size: 2.75rem;
+  padding: 0.5rem;
+  font-size: 0;
+}
+:is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-header > button::after {
+  content: '';
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  background: currentColor;
+  mask: url('./assets/icons/cancel-01.svg') center / contain no-repeat;
+}
+:is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-body {
+  padding: 0 max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
+}
+:is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-footer {
+  padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
+}
+.hw-navigation-drawer-host > hw-drawer > .hw-drawer > .hw-dialog-footer:has(> [hwDrawerFooter]:empty) { display: none; }
+.hw-navigation-drawer-user { padding-block: 1rem; border-block-end: 1px solid var(--hw-color-border); overflow-wrap: anywhere; }
+.hw-navigation-drawer-user:empty { display: none; }
+.hw-navigation-drawer-nav { padding-block-start: 1rem; }
+.hw-navigation-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
+.hw-navigation-drawer-nav li { min-inline-size: 0; }
+.hw-navigation-drawer-row {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-inline-size: 0;
+  min-block-size: 2.75rem;
+  padding: 0.75rem 1rem;
+  border: 0;
+  border-radius: 0.25rem;
+  color: var(--hw-color-text);
+  background: transparent;
+  font: var(--hw-weight-medium) 0.875rem / 1.4286 var(--hw-font-sans);
+  text-decoration: none;
+  text-align: start;
+  list-style: none;
+  overflow-wrap: anywhere;
+}
+.hw-navigation-drawer-label { min-inline-size: 0; }
+.hw-navigation-drawer-group > ul .hw-navigation-drawer-row { padding-inline-start: 2.5rem; }
+.hw-navigation-drawer-row .hw-icon { --hw-icon-size: 1rem; }
+:is(a,summary).hw-navigation-drawer-row { cursor: pointer; }
+:is(a,summary).hw-navigation-drawer-row:hover { background: var(--hw-color-surface-muted); }
+.hw-navigation-drawer-row[aria-current='page'] {
+  color: var(--hw-color-primary-text);
+  background: var(--hw-color-surface-muted);
+  font-weight: var(--hw-weight-semibold);
+}
+.hw-navigation-drawer-row[aria-current='page']::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 50%;
+  translate: 0 -50%;
+  inline-size: 0.375rem;
+  block-size: 2rem;
+  border-radius: var(--hw-radius-full);
+  background: currentColor;
+}
+.hw-navigation-drawer-row:focus-visible { outline: 2px solid var(--hw-color-focus); outline-offset: -2px; }
+.hw-navigation-drawer-row[aria-disabled='true'] { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+summary.hw-navigation-drawer-row::-webkit-details-marker { display: none; }
+summary.hw-navigation-drawer-row::after {
+  content: '';
+  flex: none;
+  margin-inline-start: auto;
+  inline-size: 1rem;
+  block-size: 1rem;
+  background: currentColor;
+  mask: url('./assets/icons/arrow-down-01.svg') center / contain no-repeat;
+}
+.hw-navigation-drawer-group[open] > summary.hw-navigation-drawer-row::after { rotate: 180deg; }
+@media (forced-colors: active) {
+  .hw-navigation-drawer-row[aria-current='page'] { color: LinkText; }
+  .hw-navigation-drawer-row[aria-current='page']::before { background: LinkText; forced-color-adjust: none; }
+  .hw-navigation-drawer-row:focus-visible { outline-color: Highlight; }
+  .hw-navigation-drawer-row[aria-disabled='true'] { color: GrayText; }
+  summary.hw-navigation-drawer-row::after,
+  :is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-header > button::after { background: ButtonText; forced-color-adjust: none; }
+}
+:is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-header > button:has(.hw-icon)::after { content: none; }

package/dist/nic-accordion.css

@@ -0,0 +1,97 @@
+/* NIC global.css 1677–1766; see docs/nic-accordion.md for DOM mapping.
+   The source header has 16px padding + a 2px transparent border around its
+   button. Item padding preserves that space without adding a wrapper to summary. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-accordion-radius: 0.375rem;
+  --hw-profile-accordion-item-padding: 1.125rem;
+  --hw-profile-accordion-trigger-padding: 0.75rem 1rem;
+  --hw-profile-accordion-trigger-leading: 1.5rem;
+  --hw-profile-accordion-content-padding: 1rem;
+  --hw-profile-accordion-content-margin: 1.125rem -1.125rem -1.125rem;
+  --hw-profile-accordion-surface-duration: 150ms;
+  --hw-profile-accordion-icon-size: 1.125rem;
+  --hw-profile-accordion-icon-offset: 1px;
+  --hw-profile-accordion-icon-content: '';
+  --hw-profile-accordion-icon-mask: url('./assets/icons/arrow-down-01.svg') center / contain no-repeat;
+  --hw-profile-accordion-icon-background: currentColor;
+  --hw-profile-accordion-icon-expanded: rotate(-180deg);
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-accordion-radius: initial;
+  --hw-profile-accordion-item-padding: initial;
+  --hw-profile-accordion-trigger-padding: initial;
+  --hw-profile-accordion-trigger-leading: initial;
+  --hw-profile-accordion-content-padding: initial;
+  --hw-profile-accordion-content-margin: initial;
+  --hw-profile-accordion-surface-duration: initial;
+  --hw-profile-accordion-icon-size: initial;
+  --hw-profile-accordion-icon-offset: initial;
+  --hw-profile-accordion-icon-content: initial;
+  --hw-profile-accordion-icon-mask: initial;
+  --hw-profile-accordion-icon-background: initial;
+  --hw-profile-accordion-icon-expanded: initial;
+}
+.hw-accordion {
+  border-color: var(--hw-color-accordion-border);
+  border-radius: var(--hw-profile-accordion-radius, var(--hw-radius-lg));
+}
+.hw-accordion-item {
+  box-sizing: border-box;
+  padding: var(--hw-profile-accordion-item-padding, 0px);
+}
+.hw-accordion-item + .hw-accordion-item { border-block-start-color: var(--hw-color-accordion-border); }
+.hw-accordion-trigger {
+  --hw-accordion-trigger-background: transparent;
+  padding: var(--hw-profile-accordion-trigger-padding, var(--hw-space-4) var(--hw-space-5));
+  line-height: var(--hw-profile-accordion-trigger-leading, inherit);
+  background: var(--hw-accordion-trigger-background);
+  overflow-anchor: none;
+  transition: color var(--hw-profile-accordion-surface-duration, 0ms) ease-in-out,
+    background-color var(--hw-profile-accordion-surface-duration, 0ms) ease-in-out;
+}
+.hw-accordion-trigger:hover { --hw-accordion-trigger-background: var(--hw-color-surface-muted); }
+.hw-accordion-trigger:focus {
+  background: var(--hw-dga-on, var(--hw-accordion-trigger-background)) var(--hw-dga-off, var(--hw-color-accordion-focus));
+}
+.hw-accordion-trigger:focus-visible {
+  outline-width: var(--hw-dga-on, var(--hw-focus-width)) var(--hw-dga-off, 2px);
+  outline-color: var(--hw-dga-on, var(--hw-color-focus)) var(--hw-dga-off, var(--hw-color-focus-contrast));
+}
+.hw-accordion-item > .hw-accordion-content {
+  margin: var(--hw-profile-accordion-content-margin, 0px);
+  padding: var(--hw-profile-accordion-content-padding, 0 var(--hw-space-5) var(--hw-space-5));
+  color: var(--hw-dga-on, var(--hw-color-text-muted)) var(--hw-dga-off, var(--hw-color-text));
+}
+/* Native no-script disclosure gets the same indicator in the DGA profile. */
+.hw-accordion-trigger::after {
+  position: relative;
+  top: var(--hw-profile-accordion-icon-offset, 0px);
+  content: var(--hw-profile-accordion-icon-content, '');
+  inline-size: var(--hw-profile-accordion-icon-size, 1.5rem);
+  block-size: var(--hw-profile-accordion-icon-size, 1.5rem);
+  background: var(--hw-profile-accordion-icon-background, currentColor);
+  mask: var(--hw-profile-accordion-icon-mask, url('./assets/icons/add-01.svg') center / contain no-repeat);
+  transition: transform var(--hw-duration-accordion-indicator, 0ms) var(--hw-ease-accordion, ease-in-out);
+}
+.hw-accordion-item[open] > .hw-accordion-trigger::after {
+  content: var(--hw-profile-accordion-icon-content, '');
+  mask: var(--hw-profile-accordion-icon-mask, url('./assets/icons/minus-sign.svg') center / contain no-repeat);
+  transform: var(--hw-profile-accordion-icon-expanded, none);
+}
+.hw-accordion-item[data-hw-expanded] > .hw-accordion-trigger::after {
+  content: '';
+  inline-size: var(--hw-profile-accordion-icon-size, 1rem);
+  block-size: var(--hw-profile-accordion-icon-size, 1rem);
+  background: currentColor;
+  mask: url('./assets/icons/arrow-down-01.svg') center / contain no-repeat;
+  transform: rotate(0deg);
+}
+.hw-accordion-item[data-hw-expanded='true'] > .hw-accordion-trigger::after { transform: rotate(-180deg); }
+@media (prefers-reduced-motion: reduce) {
+  .hw-accordion-trigger, .hw-accordion-trigger::after { transition: none; }
+}
+@media (forced-colors: active) {
+  .hw-accordion, .hw-accordion-item + .hw-accordion-item { border-color: CanvasText; }
+  .hw-accordion-trigger:focus-visible { outline-color: Highlight; }
+  .hw-accordion-trigger::after { color: ButtonText; forced-color-adjust: none; }
+}

package/dist/nic-avatars.css

@@ -0,0 +1,33 @@
+/* NIC global.css 3156–3181. Explicit source sizes are additive;
+   existing sm/lg/xl options remain Hawiyah extensions. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-avatar-size: 2.5rem;
+  --hw-profile-avatar-border: 3px;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-avatar-size: initial;
+  --hw-profile-avatar-border: initial;
+}
+.hw-avatar, img.hw-avatar {
+  inline-size: var(--hw-avatar-size, var(--hw-profile-avatar-size, 2.75rem));
+  block-size: var(--hw-avatar-size, var(--hw-profile-avatar-size, 2.75rem));
+  border-width: var(--hw-profile-avatar-border, 1px);
+  border-color: var(--hw-color-avatar-border);
+  object-fit: cover; object-position: center;
+}
+.hw-avatar[data-size='sm'] { --hw-avatar-size: 2rem; }
+.hw-avatar[data-size='lg'] { --hw-avatar-size: 3.5rem; }
+.hw-avatar[data-size='xl'], .hw-avatar[data-size='80'] { --hw-avatar-size: 5rem; }
+.hw-avatar[data-size='40'] { --hw-avatar-size: 2.5rem; }
+.hw-avatar[data-size='64'] { --hw-avatar-size: 4rem; }
+.hw-avatar[data-size='120'] { --hw-avatar-size: 7.5rem; }
+.hw-avatar[data-size='64'] { font-size: var(--hw-text-lg); }
+.hw-avatar:is([data-size='80'], [data-size='120']) { font-size: var(--hw-text-2xl); }
+.hw-avatar > img { display: block; min-inline-size: 0; min-block-size: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
+.hw-avatar-group .hw-avatar {
+  border-width: var(--hw-profile-avatar-border, 2px);
+  border-color: var(--hw-dga-on, var(--hw-color-avatar-border)) var(--hw-dga-off, var(--hw-color-surface));
+}
+@media (forced-colors: active) {
+  .hw-avatar, .hw-avatar-group .hw-avatar { border-color: CanvasText; }
+}

package/dist/nic-badges.css

@@ -0,0 +1,56 @@
+/* NIC global.css 3018–3153. See docs/nic-badges.md for measured geometry,
+   the source's overridden badge height and accessible multiline adaptations. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-badge-radius: .25rem;
+  --hw-profile-badge-padding: 0 .5rem;
+  --hw-profile-badge-leading: 1.125rem;
+  --hw-profile-badge-min-width: 2rem;
+  --hw-profile-badge-dot: .625rem;
+  --hw-profile-badge-status-gap: .5rem;
+  --hw-profile-badge-status-height: 1.5rem;
+  --hw-profile-badge-status-border: 0px;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-badge-radius: initial;
+  --hw-profile-badge-padding: initial;
+  --hw-profile-badge-leading: initial;
+  --hw-profile-badge-min-width: initial;
+  --hw-profile-badge-dot: initial;
+  --hw-profile-badge-status-gap: initial;
+  --hw-profile-badge-status-height: initial;
+  --hw-profile-badge-status-border: initial;
+}
+.hw-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
+.hw-badge {
+  --hw-tone: var(--hw-color-badge-neutral-text);
+  --hw-tone-bg: var(--hw-color-badge-neutral-background);
+  --hw-tone-border: var(--hw-color-badge-neutral-border);
+  --hw-badge-dot-color: var(--hw-color-badge-neutral-dot);
+  box-sizing: border-box; justify-content: center; flex-shrink: 0;
+  min-inline-size: min(100%, var(--hw-profile-badge-min-width, 0px));
+  padding: var(--hw-profile-badge-padding, .125rem var(--hw-space-2));
+  border-color: var(--hw-tone-border);
+  border-radius: var(--hw-profile-badge-radius, var(--hw-radius-full));
+  line-height: var(--hw-profile-badge-leading, 1.65);
+  text-align: center; white-space: normal; overflow-wrap: anywhere;
+}
+.hw-badge[data-tone='info'] { --hw-tone: var(--hw-color-badge-info-text); --hw-tone-bg: var(--hw-color-badge-info-background); --hw-tone-border: var(--hw-color-badge-info-border); --hw-badge-dot-color: currentColor; }
+.hw-badge[data-tone='success'] { --hw-tone: var(--hw-color-badge-success-text); --hw-tone-bg: var(--hw-color-badge-success-background); --hw-tone-border: var(--hw-color-badge-success-border); --hw-badge-dot-color: currentColor; }
+.hw-badge[data-tone='warning'] { --hw-tone: var(--hw-color-badge-warning-text); --hw-tone-bg: var(--hw-color-badge-warning-background); --hw-tone-border: var(--hw-color-badge-warning-border); --hw-badge-dot-color: currentColor; }
+.hw-badge[data-tone='danger'] { --hw-tone: var(--hw-color-badge-danger-text); --hw-tone-bg: var(--hw-color-badge-danger-background); --hw-tone-border: var(--hw-color-badge-danger-border); --hw-badge-dot-color: currentColor; }
+/* The outline variant is an existing Hawiyah extension to the source. */
+.hw-badge[data-variant='outline'] { border-color: currentColor; background: transparent; }
+.hw-badge[data-variant='dot'] {
+  min-inline-size: 0; min-block-size: var(--hw-profile-badge-status-height, 0px);
+  gap: var(--hw-profile-badge-status-gap, var(--hw-space-1));
+  border-width: var(--hw-profile-badge-status-border, 1px);
+  border-radius: var(--hw-radius-full);
+}
+.hw-badge[data-variant='dot']::before {
+  inline-size: var(--hw-profile-badge-dot, .375rem); block-size: var(--hw-profile-badge-dot, .375rem);
+  flex: none; background: var(--hw-badge-dot-color);
+}
+@media (forced-colors: active) {
+  .hw-badge, .hw-badge[data-variant='outline'] { border-color: CanvasText; color: CanvasText; background: Canvas; }
+  .hw-badge[data-variant='dot']::before { background: CanvasText; forced-color-adjust: none; }
+}

package/dist/nic-buttons.css

@@ -0,0 +1,80 @@
+/* NIC global.css 971–1292. Keep public density sizes; see docs/nic-buttons.md.
+   Color switches resolve at the component, including nested theme boundaries. */
+.hw-button {
+  --hw-button-active: var(--hw-button-hover);
+  --hw-button-focus-bg: var(--hw-button-bg);
+  --hw-button-focus-color: var(--hw-color-focus-contrast);
+  --hw-button-rest-outline: none;
+  --hw-button-active-outline: var(--hw-button-rest-outline);
+  --hw-button-disabled-bg: var(--hw-color-disabled);
+  --hw-button-disabled-border: transparent;
+  --hw-button-disabled-outline: none;
+}
+.hw-button:not([data-variant]), .hw-button[data-variant='primary'] {
+  --hw-button-active: var(--hw-color-primary-active);
+}
+.hw-button[data-variant='default'] {
+  --hw-button-bg: var(--hw-color-action-default);
+  --hw-button-fg: var(--hw-color-on-action-default);
+  --hw-button-hover: var(--hw-color-action-default-hover);
+  --hw-button-active: var(--hw-color-action-default-active);
+}
+.hw-button[data-variant='secondary'] {
+  --hw-button-bg: var(--hw-color-action-secondary);
+  --hw-button-fg: var(--hw-color-on-action-secondary);
+  --hw-button-hover: var(--hw-color-action-secondary-hover);
+  --hw-button-border: var(--hw-dga-on, var(--hw-color-border-strong)) var(--hw-dga-off, transparent);
+}
+.hw-button[data-variant='outline'] {
+  --hw-button-bg: transparent;
+  --hw-button-fg: var(--hw-dga-on, var(--hw-color-primary-text)) var(--hw-dga-off, var(--hw-color-text));
+  --hw-button-border: var(--hw-dga-on, var(--hw-color-primary)) var(--hw-dga-off, transparent);
+  --hw-button-hover: var(--hw-color-action-outline-hover);
+  --hw-button-active: var(--hw-color-action-outline-active);
+  --hw-button-rest-outline: var(--hw-dga-on, none) var(--hw-dga-off, 1px solid var(--hw-color-action-outline-border));
+  --hw-button-active-outline: var(--hw-dga-on, none) var(--hw-dga-off, 1px solid var(--hw-color-action-outline-border-active));
+  --hw-button-disabled-bg: transparent;
+  --hw-button-disabled-outline: 1px solid var(--hw-color-action-outline-border);
+}
+.hw-button[data-variant='outline-white'] {
+  --hw-button-bg: transparent;
+  --hw-button-fg: #fff;
+  --hw-button-hover: rgb(255 255 255 / 0.2);
+  --hw-button-active: rgb(255 255 255 / 0.3);
+  --hw-button-focus-color: #fff;
+  --hw-button-rest-outline: 1px solid rgb(255 255 255 / 0.7);
+  --hw-button-disabled-bg: transparent;
+  --hw-button-disabled-outline: 1px solid var(--hw-color-action-outline-border);
+}
+.hw-button[data-variant='light'] {
+  --hw-button-bg: var(--hw-color-action-light);
+  --hw-button-fg: var(--hw-color-on-action-light);
+  --hw-button-hover: var(--hw-color-action-light-hover);
+  --hw-button-active: var(--hw-color-action-light-active);
+}
+.hw-button[data-variant='danger'] { --hw-button-active: var(--hw-color-danger-active); }
+@media (hover: hover) {
+  .hw-button:is([data-variant='secondary'], [data-variant='light'], [data-variant='danger']):hover { --hw-button-focus-bg: var(--hw-button-hover); }
+}
+.hw-button { outline: var(--hw-button-rest-outline); outline-offset: 0; }
+.hw-button:focus-visible:not(:disabled, [aria-disabled='true']) {
+  outline: var(--hw-dga-on, var(--hw-focus-width)) var(--hw-dga-off, 2px) solid var(--hw-button-focus-color);
+  outline-offset: var(--hw-dga-on, var(--hw-focus-offset)) var(--hw-dga-off, 0px);
+  background: var(--hw-dga-on, var(--hw-button-hover)) var(--hw-dga-off, var(--hw-button-focus-bg));
+}
+.hw-button:not(:disabled, [aria-disabled='true']):active {
+  background: var(--hw-button-active);
+  box-shadow: var(--hw-dga-on, inset 0 0 0 100px rgb(0 0 0 / 0.06)) var(--hw-dga-off, none);
+}
+.hw-button:active:not(:focus-visible, :disabled, [aria-disabled='true']) { outline: var(--hw-button-active-outline); }
+.hw-button:is(:disabled, [aria-disabled='true']) {
+  background: var(--hw-button-disabled-bg);
+  border-color: var(--hw-button-disabled-border);
+  outline: var(--hw-button-disabled-outline);
+}
+/* Retain a visible keyboard indicator even while the key is held down. */
+@media (forced-colors: active) {
+  .hw-button { border: 1px solid ButtonText; }
+  .hw-button:focus-visible:not(:disabled, [aria-disabled='true']) { outline: 2px solid Highlight; outline-offset: 2px; }
+  .hw-button:is(:disabled, [aria-disabled='true']) { border-color: GrayText; color: GrayText; }
+}