@hawiyah/styles 0.0.0-stage → 0.2.1

package/dist/nic-cards.css

@@ -0,0 +1,77 @@
+/* NIC global.css 1565–1641, snapshot hash in docs/nic-web-reference.md.
+   Shared CSS preserves adapter-owned markup and the original theme. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-card-padding: 1rem;
+  --hw-profile-card-gap: 1.5rem;
+  --hw-profile-card-border: 2px solid transparent;
+  --hw-profile-card-shadow: var(--hw-shadow-md);
+  --hw-profile-card-slot-padding: 0px;
+  --hw-profile-card-footer-border: 0px;
+  --hw-profile-card-heading-weight: 700;
+  --hw-profile-card-heading-leading: 1.75rem;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-card-padding: initial;
+  --hw-profile-card-gap: initial;
+  --hw-profile-card-border: initial;
+  --hw-profile-card-shadow: initial;
+  --hw-profile-card-slot-padding: initial;
+  --hw-profile-card-footer-border: initial;
+  --hw-profile-card-heading-weight: initial;
+  --hw-profile-card-heading-leading: initial;
+}
+@media (max-width: 767px) {
+  :where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+    --hw-profile-card-gap: 1rem;
+  }
+}
+.hw-card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: var(--hw-profile-card-padding, 0px);
+  gap: var(--hw-profile-card-gap, 0px);
+  border: var(--hw-profile-card-border, 1px solid var(--hw-color-border));
+  background: var(--hw-color-card);
+  color: var(--hw-color-card-text);
+  box-shadow: var(--hw-profile-card-shadow, var(--hw-shadow-sm));
+}
+.hw-card-header { padding: var(--hw-profile-card-slot-padding, var(--hw-space-5) var(--hw-space-5) 0); }
+.hw-card-body { min-inline-size: 0; padding: var(--hw-profile-card-slot-padding, var(--hw-space-5)); }
+.hw-card-footer {
+  padding: var(--hw-profile-card-slot-padding, var(--hw-space-4) var(--hw-space-5));
+  border-block-start: var(--hw-profile-card-footer-border, 1px solid var(--hw-color-border));
+}
+.hw-card > :is(.hw-card-header, .hw-card-footer):empty { display: none; }
+.hw-card-title, .hw-card-header :where(h2, h3, h4) {
+  margin: 0;
+  color: inherit;
+  font-size: var(--hw-text-lg);
+  font-weight: var(--hw-profile-card-heading-weight, var(--hw-weight-semibold));
+  line-height: var(--hw-profile-card-heading-leading, var(--hw-leading-heading));
+}
+.hw-card-description, .hw-card-description p {
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font-size: var(--hw-text-md);
+  font-weight: 400;
+  line-height: 1.5;
+}
+.hw-card-image { display: block; max-inline-size: 100%; inline-size: 100%; block-size: auto; border-radius: var(--hw-radius-lg); }
+.hw-card[data-variant='outlined'] { border: 1px solid var(--hw-color-card-border); box-shadow: none; }
+.hw-card[data-variant='flat'] { box-shadow: none; }
+.hw-card[data-variant='ghost'] { background: transparent; border-color: transparent; box-shadow: none; }
+.hw-card-action { text-decoration: none; cursor: pointer; }
+.hw-card-action:hover:not([aria-disabled='true'], :disabled) { background: var(--hw-color-card-hover); color: var(--hw-color-card-text); text-decoration: none; }
+.hw-card-action:focus:not([aria-disabled='true'], :disabled) { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: 0; background: var(--hw-color-card); }
+.hw-card:is([data-disabled='true'], [aria-disabled='true'], :disabled) { background: var(--hw-color-disabled); border: 0; box-shadow: none; cursor: not-allowed; }
+@media (max-width: 40rem) {
+  .hw-card-header { padding-inline: var(--hw-profile-card-slot-padding, var(--hw-space-4)); }
+  .hw-card-body, .hw-card-footer { padding-inline: var(--hw-profile-card-slot-padding, var(--hw-space-4)); }
+}
+@media (forced-colors: active) {
+  .hw-card { border: 1px solid CanvasText; }
+  .hw-card-action:focus { outline: 2px solid Highlight; }
+  .hw-card:is([aria-disabled='true'], :disabled) { color: GrayText; border-color: GrayText; }
+}

package/dist/nic-carousel.css

@@ -0,0 +1,77 @@
+/* NIC global.css 3279–3423. Source behavior and accessibility adaptations are
+   documented in docs/nic-carousel.md. No autoplay or external icon font. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-carousel-arrow-size: 45px;
+  --hw-profile-carousel-arrow-radius: 50%;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-carousel-arrow-size: initial;
+  --hw-profile-carousel-arrow-radius: initial;
+}
+.hw-carousel[data-hw-carousel-ready] { padding-block-end: 4rem; }
+.hw-carousel-viewport { overflow: hidden; padding-block: .5rem; }
+.hw-carousel-track {
+  display: flex; gap: var(--hw-carousel-gap, 1rem); inline-size: 100%;
+  transform: translateX(calc(-1 * var(--_hw-inline-sign, 1) * var(--hw-carousel-index, 0) * (100% + var(--hw-carousel-gap, 1rem))));
+  transition: transform var(--hw-duration-carousel) var(--hw-ease-carousel);
+}
+.hw-carousel-track > .hw-carousel-slide { box-sizing: border-box; flex: 0 0 100%; inline-size: 100%; visibility: visible; transition: visibility 0s; }
+/* hidden is retained as the no-CSS/no-enhancement fallback. In track mode the
+   inactive panel occupies space, but inert and aria-hidden protect interaction
+   immediately. Delayed visibility lets the outgoing panel finish sliding. */
+.hw-carousel[data-hw-carousel-ready] > .hw-carousel-viewport > .hw-carousel-track > .hw-carousel-slide[hidden] { display: block !important; }
+.hw-carousel-track > .hw-carousel-slide[aria-hidden='true'] { visibility: hidden; transition: visibility 0s linear var(--hw-duration-carousel); }
+.hw-carousel[data-hw-carousel-ready] > .hw-carousel-controls {
+  position: absolute; inset-inline: 0; inset-block-end: 0; margin: 0;
+  padding-inline: 1rem; display: flex; flex-wrap: wrap; align-items: center;
+  justify-content: space-between; gap: .75rem;
+}
+.hw-carousel-arrows { display: flex; flex: none; gap: .75rem; margin-inline-start: auto; }
+.hw-carousel-empty { margin: 0; padding: var(--hw-space-5); color: var(--hw-color-text-muted); }
+.hw-button.hw-carousel-arrow {
+  inline-size: var(--hw-profile-carousel-arrow-size, var(--hw-control-height));
+  min-inline-size: var(--hw-profile-carousel-arrow-size, var(--hw-control-height));
+  block-size: var(--hw-profile-carousel-arrow-size, var(--hw-control-height));
+  min-block-size: var(--hw-profile-carousel-arrow-size, var(--hw-control-height));
+  padding: 0; border: 0; border-radius: var(--hw-profile-carousel-arrow-radius, var(--hw-radius-md));
+  background: var(--hw-color-primary); color: var(--hw-color-on-primary);
+  transition: background-color var(--hw-duration-carousel-control) ease;
+}
+.hw-button.hw-carousel-arrow:hover:not(:disabled) { background: var(--hw-color-primary-hover); }
+.hw-button.hw-carousel-arrow:active:not(:disabled) { background: var(--hw-color-primary-active); }
+.hw-button.hw-carousel-arrow:disabled { opacity: .3; cursor: not-allowed; }
+.hw-carousel-arrow::before { content: ''; inline-size: 20px; block-size: 20px; background: currentColor; mask: url('./assets/icons/arrow-right-02.svg') center / contain no-repeat; transform: scaleX(var(--_hw-inline-sign, 1)); }
+.hw-carousel-arrow[data-hw-previous]::before { mask-image: url('./assets/icons/arrow-left-02.svg'); }
+.hw-carousel-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
+/* 12px source dots sit inside 24px targets; the 1px boundary keeps unselected
+   controls recognizable against the surface without changing their fill. */
+.hw-carousel-dot {
+  display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
+  inline-size: 24px; block-size: 24px; min-inline-size: 24px; padding: 0;
+  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
+}
+.hw-carousel-dot::before {
+  content: ''; display: block; inline-size: 12px; block-size: 12px;
+  border: 1px solid var(--hw-color-carousel-dot-border); border-radius: 50%;
+  background: var(--hw-color-carousel-dot);
+  transition: background-color var(--hw-duration-carousel-control) ease, transform var(--hw-duration-carousel-control) ease;
+}
+.hw-carousel-dot:hover:where(:not(:disabled))::before { background: var(--hw-color-carousel-dot-hover); }
+.hw-carousel-dot[aria-current='true']::before { background: var(--hw-color-primary); border-color: var(--hw-color-primary); transform: scale(1.3); }
+.hw-carousel-dot:disabled { cursor: not-allowed; opacity: .3; }
+.hw-carousel-dot:focus-visible { outline: var(--hw-focus-width) solid var(--hw-color-focus); outline-offset: 2px; }
+/* Many indicators may wrap; keep controls in flow rather than overlap content. */
+.hw-carousel[data-hw-carousel-ready]:has(.hw-carousel-dot:nth-child(n + 7)) { padding-block-end: 0; }
+.hw-carousel[data-hw-carousel-ready]:has(.hw-carousel-dot:nth-child(n + 7)) > .hw-carousel-controls { position: static; margin-block-start: .75rem; }
+@media (max-width: 25rem) {
+  .hw-carousel[data-hw-carousel-ready] { padding-block-end: 0; }
+  .hw-carousel[data-hw-carousel-ready] > .hw-carousel-controls { position: static; margin-block-start: .75rem; padding-inline: .25rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hw-carousel-track, .hw-carousel-track > .hw-carousel-slide[aria-hidden], .hw-carousel-dot::before, .hw-button.hw-carousel-arrow { transition: none; }
+}
+@media (forced-colors: active) {
+  .hw-button.hw-carousel-arrow { border: 1px solid ButtonText; }
+  .hw-carousel-dot::before { background: Canvas; border-color: ButtonText; forced-color-adjust: none; }
+  .hw-carousel-dot[aria-current='true']::before { background: Highlight; border-color: Highlight; }
+}

package/dist/nic-choices.css

@@ -0,0 +1,64 @@
+/* NIC global.css 2729–3009. Native form controls retain their semantics.
+   Theme switches preserve the original theme; system colors use native widgets. */
+.hw-choice:has(> :is(.hw-checkbox, .hw-radio)) {
+  gap: var(--hw-dga-on, var(--hw-space-3)) var(--hw-dga-off, 1rem);
+}
+:is(.hw-checkbox, .hw-radio) {
+  appearance: var(--hw-dga-on, auto) var(--hw-dga-off, none);
+  position: relative;
+  display: inline-grid;
+  place-content: center;
+  padding: 0;
+  border: var(--hw-dga-on, revert) var(--hw-dga-off, 1px solid var(--hw-color-border-strong));
+  background: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-surface));
+  color: var(--hw-color-on-primary);
+  border-radius: 0;
+  --hw-choice-mark: var(--hw-color-primary);
+}
+.hw-radio { border-radius: 50%; }
+label:has(> :is(.hw-checkbox, .hw-radio)) { position: relative; isolation: isolate; }
+:is(.hw-checkbox, .hw-radio)::after {
+  content: var(--hw-dga-on, none) var(--hw-dga-off, '');
+  position: absolute;
+  inline-size: 40px;
+  block-size: 40px;
+  inset-block-start: calc(50% - 20px);
+  inset-inline-start: auto;
+  left: calc(50% - 20px);
+  z-index: -1;
+  border-radius: 50%;
+  background: var(--hw-color-surface-muted);
+  transform: scale(0);
+  transition: transform var(--hw-duration-choice-halo, 300ms) ease-in-out;
+  pointer-events: none;
+}
+:is(.hw-checkbox, .hw-radio):hover:not(:disabled, [readonly], [aria-disabled='true'])::after { transform: scale(1); }
+:is(.hw-checkbox, .hw-radio):hover:not(:disabled, [readonly], [aria-disabled='true']) { background: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-canvas)); }
+.hw-checkbox:is(:checked, :indeterminate) { background: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-primary)); border-color: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-primary)); }
+.hw-checkbox:is(:checked, :indeterminate):hover:not(:disabled, [readonly], [aria-disabled='true']) { background: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-primary)); }
+:is(.hw-checkbox, .hw-radio)::before {
+  content: var(--hw-dga-on, none) var(--hw-dga-off, '');
+  visibility: hidden;
+}
+.hw-checkbox::before { inline-size: 14px; block-size: 14px; background: currentColor; mask: url('./assets/icons/tick-02.svg') center / contain no-repeat; }
+.hw-checkbox:indeterminate::before { mask-image: url('./assets/icons/minus-sign.svg'); }
+.hw-radio::before { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--hw-choice-mark); }
+:is(.hw-checkbox, .hw-radio):is(:checked, :indeterminate)::before { visibility: visible; }
+:is(.hw-checkbox, .hw-radio):active:not(:disabled, [readonly], [aria-disabled='true']) { border-color: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-choice-active)); --hw-choice-mark: var(--hw-color-choice-active); }
+.hw-checkbox:active:not(:disabled, [readonly], [aria-disabled='true']) { background: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-surface-muted)); }
+.hw-checkbox:is(:checked, :indeterminate):active:not(:disabled, [readonly], [aria-disabled='true']) { background: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-choice-active)); }
+:is(.hw-checkbox, .hw-radio):is(:disabled, [readonly], [aria-disabled='true']) {
+  opacity: var(--hw-dga-on, 0.6) var(--hw-dga-off, 1);
+  background: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-surface));
+  border-color: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-border));
+  color: var(--hw-color-primary-text);
+  cursor: default;
+}
+:is(.hw-checkbox, .hw-radio):disabled { color: var(--hw-color-border); --hw-choice-mark: var(--hw-color-border); cursor: not-allowed; }
+:is(.hw-checkbox, .hw-radio):focus-visible { outline: var(--hw-dga-on, var(--hw-focus-width) solid var(--hw-color-focus)) var(--hw-dga-off, 2px solid var(--hw-color-focus-contrast)); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { :is(.hw-checkbox, .hw-radio)::after { transition: none; } }
+@media (forced-colors: active) {
+  :is(.hw-checkbox, .hw-radio) { appearance: auto; forced-color-adjust: auto; }
+  :is(.hw-checkbox, .hw-radio)::before, :is(.hw-checkbox, .hw-radio)::after { content: none; }
+  :is(.hw-checkbox, .hw-radio):focus-visible { outline: 2px solid Highlight; }
+}

package/dist/nic-footer.css

@@ -0,0 +1,73 @@
+/* NIC global.css 3215–3275; existing DGA footer colors remain semantic.
+   Host-owned routes, social actions and licensed partner artwork are slots. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-footer-title-weight: 500;
+  --hw-profile-footer-title-gap: 0.5rem;
+  --hw-profile-footer-title-border: 1px;
+  --hw-profile-footer-link-gap: 0.5rem;
+  --hw-profile-footer-bottom-gap: 3rem;
+  --hw-profile-footer-row-gap: 0px;
+  --hw-profile-footer-link-hover-opacity: 0.8;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-footer-title-weight: initial;
+  --hw-profile-footer-title-gap: initial;
+  --hw-profile-footer-title-border: initial;
+  --hw-profile-footer-link-gap: initial;
+  --hw-profile-footer-bottom-gap: initial;
+  --hw-profile-footer-row-gap: initial;
+  --hw-profile-footer-link-hover-opacity: initial;
+}
+/* The source's 80% white is too faint on the brighter DGA dark footer.
+   Keep full foreground contrast in dark mode and caller-defined palettes. */
+:where([data-hw-mode='dark'], [data-hw-theme='custom']) { --hw-profile-footer-link-hover-opacity: 1; }
+.hw-portal-footer { row-gap: var(--hw-profile-footer-row-gap, var(--hw-space-8)); }
+.hw-portal-footer .hw-portal-footer-main { margin-inline: auto; max-inline-size: var(--hw-content-max); }
+.hw-portal-footer :is(.hw-portal-footer-group, .hw-portal-footer-support) { display: block; min-inline-size: 0; }
+.hw-portal-footer :is(.hw-portal-footer-group, .hw-portal-footer-support) > h2 {
+  margin: 0 0 var(--hw-profile-footer-title-gap, var(--hw-space-4));
+  padding-block-end: var(--hw-profile-footer-title-gap, 0px);
+  border-block-end: var(--hw-profile-footer-title-border, 0px) solid color-mix(in srgb, currentColor 30%, transparent);
+  color: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: var(--hw-profile-footer-title-weight, var(--hw-weight-semibold));
+}
+.hw-portal-footer .hw-portal-footer-links { display: flex; flex-direction: column; align-items: start; gap: var(--hw-profile-footer-link-gap, var(--hw-space-3)); margin: 0; padding: 0; list-style: none; }
+.hw-portal-footer :is(.hw-portal-footer-group, .hw-portal-footer-legal, .hw-portal-footer-support) a:not(.hw-button) {
+  color: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-decoration: none;
+  text-underline-offset: 0.2em;
+  overflow-wrap: anywhere;
+}
+.hw-portal-footer :is(.hw-portal-footer-group, .hw-portal-footer-legal, .hw-portal-footer-support) a:not(.hw-button):hover { color: inherit; text-decoration: underline; opacity: var(--hw-profile-footer-link-hover-opacity, 1); }
+.hw-portal-footer a:focus-visible, .hw-portal-footer button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; opacity: 1; }
+.hw-portal-footer-brand { display: grid; align-content: start; gap: var(--hw-space-4); }
+.hw-portal-footer-brand :is(p, strong) { margin: 0; color: inherit; }
+.hw-portal-footer-brand p { max-inline-size: 38ch; font-size: 0.875rem; line-height: 1.5rem; }
+.hw-portal-footer-brand-marks, .hw-portal-footer-partners { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-4); }
+.hw-portal-footer :is(.hw-portal-footer-brand-marks, .hw-portal-footer-partners) :is(img, svg) { display: block; block-size: 2.625rem; inline-size: auto; max-inline-size: 100%; object-fit: contain; }
+.hw-portal-footer-support-content { display: grid; gap: var(--hw-space-3); }
+.hw-portal-footer-support-content > p { margin: 0; font-size: 0.875rem; line-height: 1.5rem; }
+.hw-portal-footer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hw-space-2); }
+.hw-portal-footer-actions .hw-button[data-variant='outline-white']:not(:disabled, [disabled], [aria-disabled='true']) { --hw-button-hover: color-mix(in srgb, currentColor 20%, transparent); --hw-button-active: color-mix(in srgb, currentColor 30%, transparent); --hw-button-focus-color: currentColor; color: inherit; border-color: currentColor; }
+:is(.hw-portal-wordmark, .hw-portal-footer-wordmark) { display: inline-block; inline-size: 5.25rem; block-size: 2.625rem; background: currentColor; -webkit-mask: url('./assets/hawiyah-wordmark.svg') center / contain no-repeat; mask: url('./assets/hawiyah-wordmark.svg') center / contain no-repeat; }
+.hw-portal-footer .hw-portal-footer-bottom { margin-block-start: var(--hw-profile-footer-bottom-gap, var(--hw-space-6)); margin-inline: auto; max-inline-size: var(--hw-content-max); border-block-start-color: color-mix(in srgb, currentColor 30%, transparent); }
+.hw-portal-footer .hw-portal-footer-bottom :is(p, small) { color: inherit; }
+.hw-portal-footer .hw-portal-footer-legal > ul { flex-direction: row; flex-wrap: wrap; gap: var(--hw-space-3) var(--hw-space-4); }
+.hw-portal-footer-external { display: inline; margin-inline-start: 0.25em; }
+/* Angular projection containers disappear when their application-owned slot is empty. */
+.hw-portal-footer :is(.hw-portal-footer-brand-marks, .hw-portal-footer-extra, .hw-portal-footer-partners):empty,
+.hw-portal-footer-brand:has(> .hw-portal-footer-brand-marks:empty):not(:has(> strong, > p)),
+.hw-portal-footer-support:has(> .hw-portal-footer-support-content:empty),
+.hw-portal-footer-bottom:not(:has(> small, > p, > nav, > .hw-portal-footer-partners:not(:empty))) { display: none; }
+@media (forced-colors: active) {
+  .hw-portal-footer { background: Canvas; color: CanvasText; --hw-profile-footer-link-hover-opacity: 1; }
+  .hw-portal-footer :is(.hw-portal-footer-group, .hw-portal-footer-support) > h2, .hw-portal-footer .hw-portal-footer-bottom { border-color: CanvasText; }
+  .hw-portal-footer :is(.hw-portal-footer-group, .hw-portal-footer-legal, .hw-portal-footer-support) a:not(.hw-button) { color: LinkText; }
+  .hw-portal-footer a:hover { opacity: 1; }
+  .hw-portal-footer :is(a, button):focus-visible { outline-color: Highlight; }
+  :is(.hw-portal-wordmark, .hw-portal-footer-wordmark) { forced-color-adjust: none; background: CanvasText; }
+}

package/dist/nic-foundations.css

@@ -0,0 +1,115 @@
+/* NIC global.css 427–606. Visual scale is independent of heading semantics. */
+.hw-type {
+  font-family: var(--hw-font-sans);
+  font-size: var(--_hw-type-size, var(--hw-text-md));
+  line-height: var(--_hw-type-leading, 1.5);
+  font-weight: var(--hw-type-weight, var(--_hw-type-weight, var(--hw-weight-regular)));
+  margin-block: 0 var(--hw-type-spacing, var(--_hw-type-spacing, 0));
+}
+.hw-type[data-scale='display-2xl'] {
+  --_hw-type-size: var(--hw-text-7xl);
+  --_hw-type-leading: calc(90 / 72);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 2.375rem;
+}
+.hw-type[data-scale='display-xl'] {
+  --_hw-type-size: var(--hw-text-6xl);
+  --_hw-type-leading: calc(72 / 60);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 1.5rem;
+}
+.hw-type[data-scale='display-lg'] {
+  --_hw-type-size: var(--hw-text-5xl);
+  --_hw-type-leading: calc(60 / 48);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 0.625rem;
+}
+.hw-type[data-scale='display-md'] {
+  --_hw-type-size: var(--hw-text-4xl);
+  --_hw-type-leading: calc(44 / 36);
+  --_hw-type-weight: var(--hw-weight-semibold);
+  --_hw-type-spacing: 0.625rem;
+}
+.hw-type[data-scale='display-sm'] {
+  --_hw-type-size: var(--hw-text-3xl);
+  --_hw-type-leading: calc(38 / 30);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 0.625rem;
+}
+.hw-type[data-scale='display-xs'] {
+  --_hw-type-size: var(--hw-text-2xl);
+  --_hw-type-leading: calc(32 / 24);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 0.625rem;
+}
+.hw-type[data-scale='heading-lg'] {
+  --_hw-type-size: var(--hw-text-xl);
+  --_hw-type-leading: calc(30 / 20);
+  --_hw-type-weight: var(--hw-weight-semibold);
+  --_hw-type-spacing: 0.625rem;
+}
+.hw-type[data-scale='heading-md'] {
+  --_hw-type-size: var(--hw-text-lg);
+  --_hw-type-leading: calc(28 / 18);
+  --_hw-type-weight: var(--hw-weight-semibold);
+  --_hw-type-spacing: 0.625rem;
+}
+.hw-type[data-scale='heading-sm'] {
+  --_hw-type-size: var(--hw-text-md);
+  --_hw-type-leading: calc(24 / 16);
+  --_hw-type-weight: var(--hw-weight-semibold);
+  --_hw-type-spacing: 0.625rem;
+}
+.hw-type[data-scale='body-xl'] {
+  --_hw-type-size: var(--hw-text-xl);
+  --_hw-type-leading: calc(30 / 20);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
+}
+.hw-type[data-scale='body-lg'] {
+  --_hw-type-size: var(--hw-text-lg);
+  --_hw-type-leading: calc(28 / 18);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
+}
+.hw-type[data-scale='body-md'] {
+  --_hw-type-size: var(--hw-text-md);
+  --_hw-type-leading: calc(24 / 16);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
+}
+.hw-type[data-scale='body-sm'] {
+  --_hw-type-size: var(--hw-text-sm);
+  --_hw-type-leading: calc(20 / 14);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
+}
+.hw-type[data-scale='body-xs'] {
+  --_hw-type-size: var(--hw-text-xs);
+  --_hw-type-leading: calc(14 / 12);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
+}
+
+.hw-line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--hw-clamp-lines, 1);
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+.hw-line-clamp[data-lines='2'] { --hw-clamp-lines: 2; }
+.hw-line-clamp[data-lines='3'] { --hw-clamp-lines: 3; }
+.hw-line-clamp[data-lines='4'] { --hw-clamp-lines: 4; }
+.hw-line-clamp[data-lines='10'] { --hw-clamp-lines: 10; }
+
+.hw-divider[data-tone='primary'] { --_hw-divider-color: var(--hw-color-primary); }
+.hw-divider[data-tone='gold'] { --_hw-divider-color: var(--hw-color-divider-gold); }
+.hw-divider[data-tone='tertiary'] { --_hw-divider-color: var(--hw-color-divider-tertiary); }
+.hw-divider[data-tone] { border-color: var(--_hw-divider-color, var(--hw-color-border)); }
+@media (forced-colors: active) {
+  .hw-divider[data-tone] { border-color: CanvasText; }
+}
+
+/* The semantic hr itself participates in a flex or grid row in Angular. */
+hw-divider:has(> .hw-divider[aria-orientation='vertical']) { display: contents; }

package/dist/nic-icons.css

@@ -0,0 +1,72 @@
+/* NIC global.css 1388–1531; source sizes and adaptations: docs/nic-icons.md. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-icon-glyph: 1.25rem;
+  --hw-profile-icon-glyph-sm: 1rem;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-icon-glyph: initial;
+  --hw-profile-icon-glyph-sm: initial;
+}
+.hw-button:is(.hw-icon-button, [data-icon-only]) {
+  --hw-icon-context-size: var(--hw-profile-icon-glyph, 1.5rem);
+  inline-size: var(--hw-button-control-height); min-inline-size: var(--hw-button-control-height);
+  block-size: var(--hw-button-control-height); min-block-size: var(--hw-button-control-height);
+  flex: none; padding: 0; gap: 0;
+}
+.hw-button:is(.hw-icon-button, [data-icon-only])[data-size='sm'] { --hw-icon-context-size: var(--hw-profile-icon-glyph-sm, min(1.5rem, calc(var(--hw-button-control-height) - 2px))); }
+.hw-button:is(.hw-icon-button, [data-icon-only])[data-shape='circle'] { border-radius: var(--hw-radius-full); }
+.hw-button:is(.hw-icon-button, [data-icon-only]) > span { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
+/* Size both direct artwork and framework-projected artwork. Explicit CSS and
+   the existing --hw-icon-size override remain available. No SVG paths change. */
+.hw-button:is(.hw-icon-button, [data-icon-only]) > :is(svg,img),
+.hw-button:is(.hw-icon-button, [data-icon-only]) > span > :is(svg,img) {
+  inline-size:var(--hw-icon-size,var(--hw-icon-context-size));
+  block-size:var(--hw-icon-size,var(--hw-icon-context-size)); flex:none; object-fit:contain;
+}
+.hw-button:is(.hw-icon-button,[data-icon-only])[aria-pressed='true']:not(:disabled,[aria-disabled='true']) {
+  background:var(--hw-color-primary-subtle); color:var(--hw-color-primary-text);
+}
+.hw-button:is(.hw-icon-button, [data-icon-only]):is(:disabled,[aria-disabled='true']) {
+  color:var(--hw-color-on-disabled); box-shadow:none;
+}
+/* Background icons are decorative compositions, not extra interactive targets. */
+.hw-icon-background {
+  box-sizing:border-box; display:inline-flex; flex:none; align-items:center; justify-content:center;
+  inline-size:3rem; min-inline-size:3rem; block-size:3rem; padding:0;
+  border-radius:var(--hw-radius-full); background:var(--hw-color-success-subtle); color:var(--hw-color-success);
+  --hw-icon-context-size:1.5rem;
+}
+.hw-icon-background[data-size='xs'] { inline-size:1.875rem; min-inline-size:1.875rem; block-size:1.875rem; --hw-icon-context-size:0.875rem; }
+/* Source md and xl backgrounds are both 48px; size the artwork separately. */
+.hw-icon-background[data-size='xl'] { inline-size:3rem; min-inline-size:3rem; block-size:3rem; }
+/* Featured icon is the Figma composition; NIC icon-bg sizing above remains available. */
+.hw-icon-background[data-variant='featured'] {
+  --hw-featured-size: 2.5rem; --hw-icon-context-size: 1.25rem;
+  --hw-featured-radius: .25rem; --hw-featured-outline-radius: .5rem;
+  --hw-featured-color: var(--hw-color-primary-text);
+  --hw-featured-background: var(--hw-color-primary-subtle);
+  inline-size: var(--hw-featured-size); min-inline-size: var(--hw-featured-size); block-size: var(--hw-featured-size);
+  color: var(--hw-featured-color); background: var(--hw-featured-background);
+}
+.hw-icon-background[data-variant='featured'][data-size='sm'] { --hw-featured-size:2rem; --hw-icon-context-size:1rem; --hw-featured-outline-radius:.375rem; }
+.hw-icon-background[data-variant='featured'][data-size='lg'] { --hw-featured-size:3rem; --hw-icon-context-size:1.5rem; --hw-featured-radius:.5rem; --hw-featured-outline-radius:.625rem; }
+.hw-icon-background[data-variant='featured'][data-size='xl'] { --hw-featured-size:3.5rem; --hw-icon-context-size:1.75rem; --hw-featured-radius:.5rem; --hw-featured-outline-radius:.75rem; }
+.hw-icon-background[data-variant='featured'][data-shape='square'] { border-radius:var(--hw-featured-radius); }
+.hw-icon-background[data-variant='featured'][data-tone='neutral'] { --hw-featured-color:var(--hw-color-text-muted); --hw-featured-background:var(--hw-color-surface-muted); }
+.hw-icon-background[data-variant='featured'][data-tone='success'] { --hw-featured-color:var(--hw-color-success); --hw-featured-background:var(--hw-color-success-subtle); }
+.hw-icon-background[data-variant='featured'][data-tone='error'] { --hw-featured-color:var(--hw-color-danger); --hw-featured-background:var(--hw-color-danger-subtle); }
+.hw-icon-background[data-variant='featured'][data-tone='warning'] { --hw-featured-color:var(--hw-color-warning); --hw-featured-background:var(--hw-color-warning-subtle); }
+.hw-icon-background[data-variant='featured'][data-tone='info'] { --hw-featured-color:var(--hw-color-info); --hw-featured-background:var(--hw-color-info-subtle); }
+.hw-icon-background[data-variant='featured'][data-style='outline'] { background:transparent; border:1px solid var(--hw-featured-color); }
+.hw-icon-background[data-variant='featured'][data-style='outline'][data-shape='square'] { border-radius:var(--hw-featured-outline-radius); }
+.hw-icon-background[data-variant='featured'][data-style='dark'] { background:var(--hw-featured-color); color:var(--hw-color-surface); }
+.hw-featured-symbol { display:inline-flex; align-items:center; justify-content:center; inline-size:var(--hw-icon-context-size); block-size:var(--hw-icon-context-size); font-size:var(--hw-icon-context-size); font-weight:600; line-height:1; }
+.hw-icon[data-size='sm'] { --hw-icon-context-size:0.875rem; }
+.hw-icon[data-size='md'] { --hw-icon-context-size:1.25rem; }
+.hw-icon[data-size='lg'] { --hw-icon-context-size:1.5rem; }
+.hw-icon[data-size='xl'] { --hw-icon-context-size:1.875rem; }
+.hw-icon[data-size='2xl'] { --hw-icon-context-size:3rem; }
+@media (forced-colors:active) {
+  .hw-button:is(.hw-icon-button,[data-icon-only]):is(:disabled,[aria-disabled='true']) { color:GrayText; }
+  .hw-icon-background, .hw-icon-background[data-variant='featured'], .hw-icon-background[data-variant='featured'][data-style] { background:Canvas; color:CanvasText; border-color:CanvasText; outline:1px solid CanvasText; }
+}

package/dist/nic-input-groups.css

@@ -0,0 +1,35 @@
+/* NIC global.css 2554–2581: one animated line spans input + addons.
+   Only an editable focused control activates it, not a sibling addon button. */
+.hw-input-group:has(> .hw-input-addon) { position: relative; --hw-group-line-color: var(--hw-color-field-active); }
+.hw-input-addon:empty { display: none; }
+.hw-input-group > .hw-input-addon:empty:first-child + :is(.hw-input, .hw-select) { border-start-start-radius: var(--hw-profile-control-radius, var(--hw-radius-md)); border-end-start-radius: var(--hw-profile-control-radius, var(--hw-radius-md)); }
+.hw-input-group > :is(.hw-input, .hw-select):has(+ .hw-input-addon:empty:last-child) { border-start-end-radius: var(--hw-profile-control-radius, var(--hw-radius-md)); border-end-end-radius: var(--hw-profile-control-radius, var(--hw-radius-md)); }
+.hw-input-group:has(> .hw-input-addon)::after {
+  content: '';
+  display: var(--hw-dga-on, none) var(--hw-dga-off, block);
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: 2px;
+  background: linear-gradient(var(--hw-group-line-color), var(--hw-group-line-color)) center bottom / 0% 2px no-repeat;
+  transition: background-size var(--hw-duration-input) var(--hw-ease-input);
+}
+.hw-input-group:has(> .hw-input-addon) > :is(.hw-input, .hw-select) {
+  --hw-profile-field-focus-line: 0% 2px;
+  --hw-profile-field-pressed-line: 0% 2px;
+}
+.hw-input-group:has(> :is(.hw-input, .hw-select):focus:not(:disabled, [readonly]))::after { background-size: 100% 2px; }
+.hw-input-group:has(> :is(.hw-input, .hw-select):active:not(:disabled, [readonly]))::after { background-size: 50% 2px; }
+.hw-input-group:has(> :is(.hw-input, .hw-select):where([data-hw-filled='true']):valid) { --hw-group-line-color: var(--hw-color-primary-text); }
+.hw-input-group:has(> :is(.hw-input, .hw-select)[aria-invalid='true']) { --hw-group-line-color: var(--hw-color-danger); }
+@supports selector(:user-invalid) {
+  .hw-input-group:has(> :is(.hw-input, .hw-select):user-invalid) { --hw-group-line-color: var(--hw-color-danger); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hw-input-group:has(> .hw-input-addon)::after { transition: none; }
+}
+@media (forced-colors: active) {
+  .hw-input-group:has(> .hw-input-addon)::after { display: none; }
+}

package/dist/nic-links.css

@@ -0,0 +1,61 @@
+/* NIC global.css 853–965 and 2040–2143. Contrast substitutions and browser
+   visited-state privacy limits are recorded in docs/nic-links.md. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-link-hover-thickness: 1px;
+  --hw-profile-breadcrumb-gap: 0.25rem;
+  --hw-profile-breadcrumb-duration: 200ms;
+  --hw-profile-breadcrumb-weight: 400;
+  --hw-profile-breadcrumb-separator: '';
+  --hw-profile-breadcrumb-size: 0.375rem;
+  --hw-profile-breadcrumb-border: 1.5px;
+  --hw-profile-breadcrumb-angle: 45deg;
+  --hw-profile-breadcrumb-margin: 0.25rem;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-link-hover-thickness: initial;
+  --hw-profile-breadcrumb-gap: initial;
+  --hw-profile-breadcrumb-duration: initial;
+  --hw-profile-breadcrumb-weight: initial;
+  --hw-profile-breadcrumb-separator: initial;
+  --hw-profile-breadcrumb-size: initial;
+  --hw-profile-breadcrumb-border: initial;
+  --hw-profile-breadcrumb-angle: initial;
+  --hw-profile-breadcrumb-margin: initial;
+}
+.hw-link { --hw-link-rest: var(--hw-color-link); --hw-link-hover: var(--hw-color-link-hover); --hw-link-active: var(--hw-color-link-active); --hw-link-visited: var(--hw-color-link-visited); color: var(--hw-link-rest); }
+/* Hosts may supply their own decorative indicator using data-hw-external-icon. */
+:is(.hw-link, .hw-portal-header a)[target='_blank']:not([data-hw-external-icon='none']):not(:has([data-hw-external-icon], .hw-portal-footer-external))::after {
+  content: ''; display: inline-block; flex: none; inline-size: 1em; block-size: 1em;
+  margin-inline-start: .25em; vertical-align: -.125em;
+  background: currentColor; mask: url('./assets/icons/link-square-02.svg') center / contain no-repeat;
+}
+.hw-link:is([data-variant='subtle'], [data-variant='neutral']) { --hw-link-rest: var(--hw-color-link-neutral); --hw-link-hover: var(--hw-color-link-neutral-hover); --hw-link-active: var(--hw-color-link-neutral-active); --hw-link-visited: var(--hw-color-link-neutral); color: var(--hw-link-rest); text-decoration: none; }
+.hw-link:visited { color: var(--hw-link-visited); }
+.hw-link:hover { color: var(--hw-link-hover); text-decoration: underline; text-decoration-thickness: var(--hw-profile-link-hover-thickness, 2px); }
+.hw-link:focus-visible { color: var(--hw-link-rest); outline: 2px solid var(--hw-color-focus-contrast); outline-offset: 2px; }
+.hw-link:active { color: var(--hw-link-active); }
+.hw-link:is(.hw-link-icon, [data-variant='standalone']):is(:hover, :active) { text-decoration: none; }
+.hw-link[aria-disabled='true'], .hw-link[aria-disabled='true']:is(:hover, :active, :visited) { color: var(--hw-color-on-disabled); text-decoration: underline; cursor: not-allowed; }
+.hw-breadcrumb { line-height: 1.5rem; }
+.hw-breadcrumb :is(ol, ul), .hw-breadcrumb li { gap: var(--hw-profile-breadcrumb-gap, var(--hw-space-2)); }
+.hw-breadcrumb a { color: var(--hw-color-link-neutral); transition: color var(--hw-profile-breadcrumb-duration, 0ms) ease; }
+.hw-breadcrumb a:visited { color: var(--hw-color-link-neutral); }
+.hw-breadcrumb a:hover { color: var(--hw-color-link-neutral-hover); }
+.hw-breadcrumb a:focus-visible { color: var(--hw-color-link-neutral); text-decoration: none; outline: 2px solid var(--hw-color-focus-contrast); outline-offset: 2px; }
+.hw-breadcrumb a:active { color: var(--hw-color-link-neutral-active); }
+.hw-breadcrumb [aria-current='page'] { color: var(--hw-color-breadcrumb-current); font-weight: var(--hw-profile-breadcrumb-weight, var(--hw-weight-medium)); }
+.hw-breadcrumb [aria-disabled='true'] { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+/* Empty generated geometry is decorative; no private icon-font glyph is read
+   as content. A logical chevron follows direction independently of language. */
+.hw-breadcrumb li + li::before { content: var(--hw-profile-breadcrumb-separator, '/'); flex: none; inline-size: var(--hw-profile-breadcrumb-size, auto); block-size: var(--hw-profile-breadcrumb-size, auto); margin-inline: var(--hw-profile-breadcrumb-margin, 0px); border-block-start: var(--hw-profile-breadcrumb-border, 0px) solid currentColor; border-inline-end: var(--hw-profile-breadcrumb-border, 0px) solid currentColor; transform: rotate(calc(var(--_hw-inline-sign, 1) * var(--hw-profile-breadcrumb-angle, 0deg))); color: var(--hw-color-text-subtle); }
+@media (prefers-reduced-motion: reduce) { .hw-breadcrumb a { transition: none; } }
+@media (forced-colors: active) {
+  :is(.hw-link, .hw-portal-header a)[target='_blank']::after { background: LinkText; forced-color-adjust: none; }
+  .hw-link, .hw-link[data-variant] { --hw-link-rest: LinkText; --hw-link-hover: LinkText; --hw-link-active: LinkText; --hw-link-visited: VisitedText; color: LinkText; }
+  .hw-breadcrumb a { color: LinkText; }
+  .hw-link:visited { color: VisitedText; }
+  .hw-link:is(:hover, :active, :focus-visible), .hw-breadcrumb a:is(:hover, :active, :focus-visible) { color: LinkText; }
+  .hw-link:focus-visible, .hw-breadcrumb a:focus-visible { outline-color: Highlight; }
+  .hw-link[aria-disabled='true'], .hw-link[aria-disabled='true']:is(:hover, :active, :visited), .hw-breadcrumb [aria-disabled='true'] { color: GrayText; }
+  .hw-breadcrumb [aria-current='page'] { color: CanvasText; }
+}

package/dist/nic-lists.css

@@ -0,0 +1,68 @@
+/* NIC global.css 1645–1674 and 3183–3211. Styling is opt-in per list. */
+ul.hw-list-icon,
+ol.hw-list-ordered {
+  margin-inline: var(--hw-list-start-margin, 5px) 0;
+}
+
+ol.hw-list-ordered {
+  list-style-type: decimal;
+}
+
+ul.hw-list-icon > li,
+ul.hw-list-custom > li {
+  list-style-type: none;
+}
+
+ul.hw-list-icon > li {
+  position: relative;
+  padding-inline-start: var(--hw-list-icon-indent, 30px);
+}
+
+.hw-list-marker {
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--hw-list-marker-size, 16px);
+  block-size: var(--hw-list-marker-size, 16px);
+  color: inherit;
+  font-size: var(--hw-list-marker-size, 16px);
+}
+
+.hw-list-marker > svg {
+  display: block;
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+/* The source uses an external icon font. This local ring is decorative. */
+.hw-list-marker:empty::before {
+  content: '';
+  box-sizing: border-box;
+  inline-size: .45em;
+  block-size: .45em;
+  border: .1em solid currentColor;
+  border-radius: 50%;
+}
+
+ul.hw-list-icon > li > .hw-list-marker {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  block-size: var(--hw-list-marker-line, 28px);
+  line-height: var(--hw-list-marker-line, 28px);
+}
+
+ul.hw-list-custom {
+  margin-inline-start: 0;
+  padding-inline-start: var(--hw-list-custom-indent, 20px);
+}
+
+ul.hw-list-custom > li > .hw-list-marker {
+  position: relative;
+  inset-block-start: 1px;
+  margin-inline-end: .25em;
+  vertical-align: text-bottom;
+}
+
+@media (forced-colors: active) {
+  .hw-list-marker:empty::before { border-color: CanvasText; }
+}