@hawiyah/styles 0.0.0-stage → 0.2.0

package/dist/nic-notification-dialog.css

@@ -0,0 +1,114 @@
+/* NIC global.css 3883–3957 and master.js 441–520. The Angular host carries the variant. */
+:where(dialog, hw-dialog)[data-variant='notification'] {
+  --_nq-notice-ink: var(--hw-color-info);
+  --_nq-notice-surface: var(--hw-color-info-subtle);
+  --_nq-notice-border: var(--hw-color-notice-info-border);
+  --_nq-notice-symbol: url('./assets/notifications/info-outline.svg');
+}
+:where(dialog, hw-dialog)[data-variant='notification'][data-tone='success'] {
+  --_nq-notice-ink: var(--hw-color-success);
+  --_nq-notice-surface: var(--hw-color-success-subtle);
+  --_nq-notice-border: var(--hw-color-notice-success-border);
+  --_nq-notice-symbol: url('./assets/notifications/success-outline.svg');
+}
+:where(dialog, hw-dialog)[data-variant='notification'][data-tone='warning'] {
+  --_nq-notice-ink: var(--hw-color-notice-warning-text);
+  --_nq-notice-surface: var(--hw-color-warning-subtle);
+  --_nq-notice-border: var(--hw-color-notice-warning-border);
+  --_nq-notice-symbol: url('./assets/notifications/warning-outline.svg');
+}
+:where(dialog, hw-dialog)[data-variant='notification'][data-tone='danger'] {
+  --_nq-notice-ink: var(--hw-color-danger);
+  --_nq-notice-surface: var(--hw-color-danger-subtle);
+  --_nq-notice-border: var(--hw-color-notice-danger-border);
+  --_nq-notice-symbol: url('./assets/notifications/danger-outline.svg');
+}
+:where(dialog, hw-dialog)[data-variant='notification'][data-tone='neutral'] {
+  --_nq-notice-ink: var(--hw-color-notice-neutral-text);
+  --_nq-notice-surface: var(--hw-color-badge-neutral-background);
+  --_nq-notice-border: var(--hw-color-notice-neutral-text);
+  --_nq-notice-symbol: url('./assets/notifications/neutral-outline.svg');
+}
+
+:is(dialog.hw-dialog[data-variant='notification'], hw-dialog[data-variant='notification'] > dialog.hw-dialog) {
+  box-sizing: border-box;
+  inline-size: min(500px, calc(100% - 40px));
+  max-inline-size: none;
+  max-block-size: calc(100dvh - 40px);
+  padding: 24px;
+  overflow: auto;
+  border: 0;
+  border-inline-start: 4px solid var(--_nq-notice-border);
+  border-radius: 12px;
+  background: var(--hw-color-surface);
+  color: var(--hw-color-text);
+  box-shadow: var(--hw-notification-dialog-shadow, 0 20px 25px -5px rgb(0 0 0 / .1), 0 10px 10px -5px rgb(0 0 0 / .04));
+
+  &[open] {
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr) auto;
+    column-gap: 16px;
+    row-gap: 8px;
+    animation: hw-notice-dialog-in 300ms ease-out;
+  }
+  &::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: none; animation: hw-notice-backdrop-in 200ms ease-out; }
+  & > .hw-dialog-header { display: contents; }
+  & > .hw-dialog-header::before, & > .hw-dialog-header::after {
+    content: '';
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    align-self: start;
+    justify-self: center;
+    pointer-events: none;
+  }
+  & > .hw-dialog-header::before { inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--_nq-notice-surface); }
+  & > .hw-dialog-header::after {
+    margin-block-start: 12px;
+    inline-size: 24px; block-size: 24px;
+    background-color: var(--_nq-notice-ink);
+    mask: var(--_nq-notice-symbol) center / contain no-repeat;
+  }
+  & > .hw-dialog-header > :is(h1, h2, h3) { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: 1.125rem; font-weight: 600; overflow-wrap: anywhere; }
+  & > .hw-dialog-header > button {
+    grid-column: 3; grid-row: 1 / span 2; align-self: start; justify-self: end;
+    display: grid; place-items: center; gap: 0; inline-size: 40px; min-inline-size: 40px;
+    padding: 0; font-size: 0; color: var(--hw-color-text-muted);
+  }
+  & > .hw-dialog-header > button::before {
+    content: ''; inline-size: 24px; block-size: 24px; background-color: currentColor;
+    mask: url('./assets/icons/cancel-01.svg') center / contain no-repeat;
+  }
+  & > .hw-dialog-header > button:hover { color: var(--hw-color-text); }
+  & > .hw-dialog-body {
+    grid-column: 2; grid-row: 2; min-inline-size: 0; padding: 0;
+    font-size: .875rem; line-height: 1.6; color: var(--hw-color-text-muted); overflow-wrap: anywhere;
+  }
+  & > .hw-dialog-body > :first-child { margin-block-start: 0; }
+  & > .hw-dialog-body > :last-child { margin-block-end: 0; }
+  & > .hw-dialog-footer {
+    grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end;
+    gap: 12px; margin-block-start: 12px; padding: 0; background: transparent; border: 0;
+  }
+  & > .hw-dialog-footer:empty { display: none; }
+}
+@keyframes hw-notice-dialog-in { from { transform: translateY(-20px); opacity: 0; } }
+@keyframes hw-notice-backdrop-in { from { opacity: 0; } }
+@media (max-width: 576px) {
+  :is(dialog.hw-dialog[data-variant='notification'], hw-dialog[data-variant='notification'] > dialog.hw-dialog) {
+    inline-size: calc(100% - 60px);
+    & > .hw-dialog-header::before, & > .hw-dialog-header::after, & > .hw-dialog-header > button { grid-row: 1; }
+    & > .hw-dialog-body { grid-column: 1 / -1; }
+    & > .hw-dialog-footer { flex-direction: column; align-items: stretch; }
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(dialog.hw-dialog[data-variant='notification'], hw-dialog[data-variant='notification'] > dialog.hw-dialog) {
+    &[open], &::backdrop { animation: none; }
+  }
+}
+@media (forced-colors: active) {
+  :is(dialog.hw-dialog[data-variant='notification'], hw-dialog[data-variant='notification'] > dialog.hw-dialog) {
+    border: 1px solid CanvasText; border-inline-start-width: 4px;
+    & > .hw-dialog-header::after, & > .hw-dialog-header > button::before { forced-color-adjust: none; background-color: CanvasText; }
+  }
+}

package/dist/nic-notifications.css

@@ -0,0 +1,124 @@
+/* NIC global.css 3797–3876 and master.js 318–412. */
+.hw-toast-region[data-variant='banner'] {
+  --_nq-toast-gutter: 20px;
+  --_nq-toast-top: var(--hw-toast-header-offset, 80px);
+  box-sizing: border-box;
+  inset-block: var(--_nq-toast-top) auto;
+  inset-inline: auto var(--_nq-toast-gutter);
+  inline-size: min(450px, calc(100% - 2 * var(--_nq-toast-gutter)));
+  max-block-size: calc(100dvh - var(--_nq-toast-top) - var(--_nq-toast-gutter));
+  padding: 0;
+  overscroll-behavior: contain;
+  /* The viewport edge bounds a fixed stack; notices may be taller when text wraps. */
+}
+.hw-toast-region[data-variant='banner']:is([data-position='top-start'], [data-position='bottom-start']) {
+  inset-inline: var(--_nq-toast-gutter) auto;
+}
+.hw-toast-region[data-variant='banner']:is([data-position='bottom-start'], [data-position='bottom-end']) {
+  inset-block: auto var(--_nq-toast-gutter);
+  max-block-size: calc(100dvh - 2 * var(--_nq-toast-gutter));
+}
+.hw-toast-region[data-position='inline'] {
+  position: static;
+  inline-size: 100%;
+  max-block-size: none;
+  overflow: visible;
+}
+.hw-toast-region[data-variant='banner'] .hw-toast {
+  --_nq-toast-accent: var(--hw-color-notice-info-border);
+  --_nq-toast-icon: url('./assets/notifications/info.svg');
+  --_nq-toast-text: var(--hw-color-info);
+  --_nq-toast-bg: var(--hw-color-info-subtle);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 16px 24px;
+  border: 0;
+  border-block-end: 2px solid var(--_nq-toast-accent);
+  border-radius: 0;
+  color: var(--_nq-toast-text);
+  background-color: var(--_nq-toast-bg);
+  box-shadow: var(--hw-toast-banner-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -1px rgb(0 0 0 / .06));
+  font-size: .875rem;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  animation: hw-toast-banner-in 300ms ease-out;
+}
+.hw-toast-region[data-variant='banner'] .hw-toast[data-tone='neutral'] {
+  --_nq-toast-icon: url('./assets/notifications/neutral.svg');
+  --_nq-toast-text: var(--hw-color-notice-neutral-text);
+  --_nq-toast-accent: var(--_nq-toast-text);
+  --_nq-toast-bg: var(--hw-color-badge-neutral-background);
+}
+.hw-toast-region[data-variant='banner'] .hw-toast[data-tone='success'] {
+  --_nq-toast-icon: url('./assets/notifications/success.svg');
+  --_nq-toast-text: var(--hw-color-success);
+  --_nq-toast-accent: var(--hw-color-notice-success-border);
+  --_nq-toast-bg: var(--hw-color-success-subtle);
+}
+.hw-toast-region[data-variant='banner'] .hw-toast[data-tone='warning'] {
+  --_nq-toast-icon: url('./assets/notifications/warning.svg');
+  --_nq-toast-text: var(--hw-color-notice-warning-text);
+  --_nq-toast-accent: var(--hw-color-notice-warning-border);
+  --_nq-toast-bg: var(--hw-color-warning-subtle);
+}
+.hw-toast-region[data-variant='banner'] .hw-toast[data-tone='danger'] {
+  --_nq-toast-icon: url('./assets/notifications/danger.svg');
+  --_nq-toast-text: var(--hw-color-danger);
+  --_nq-toast-accent: var(--hw-color-notice-danger-border);
+  --_nq-toast-bg: var(--hw-color-danger-subtle);
+}
+.hw-toast-region[data-variant='banner'] .hw-toast-icon {
+  grid-column: 1; inline-size: 20px; block-size: 20px;
+  background-color: currentColor;
+  mask: var(--_nq-toast-icon) center / contain no-repeat;
+}
+.hw-toast-region[data-variant='banner'] .hw-toast-content { grid-column: 2; min-inline-size: 0; }
+.hw-toast-region[data-variant='banner'] .hw-toast-content p { color: inherit; }
+.hw-toast-region[data-variant='banner'] .hw-toast-dismiss { grid-column: 3; grid-row: 1; align-self: center; color: inherit; }
+@keyframes hw-toast-banner-in { from { opacity: 0; transform: translateX(calc(100% * var(--_nq-inline-sign, 1))); } }
+@media (max-width: 576px) {
+  .hw-toast-region[data-variant='banner'] { --_nq-toast-gutter: 10px; --_nq-toast-top: var(--hw-toast-header-offset, 70px); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hw-toast-region[data-variant='banner'] .hw-toast { animation: none; }
+}
+@media (forced-colors: active) {
+  .hw-toast-region[data-variant='banner'] .hw-toast { border: 1px solid CanvasText; border-block-end-width: 2px; }
+  .hw-toast-region[data-variant='banner'] .hw-toast-icon { forced-color-adjust: none; background-color: CanvasText; }
+}
+
+
+/* Empty live regions stay mounted for announcements without occupying a gap. */
+.hw-toast-region[data-variant='banner'] { row-gap: 0; }
+.hw-toast-region[data-variant='banner'] > [data-hw-live]:has(.hw-toast) + [data-hw-live]:has(.hw-toast) {
+  margin-block-start: var(--hw-space-3);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .hw-toast-region[data-variant='banner'] .hw-toast-dismiss { transition: color 200ms ease, background-color 200ms ease; }
+}
+
+.hw-toast-region[data-variant='banner'] .hw-toast-dismiss {
+  color: var(--hw-color-text);
+  font-size: 0;
+  gap: 0;
+  inline-size: 40px;
+  min-inline-size: 40px;
+  padding-inline: 0;
+}
+.hw-toast-region[data-variant='banner'] .hw-toast-dismiss::before {
+  content: '';
+  display: block;
+  inline-size: 20px;
+  block-size: 20px;
+  background-color: currentColor;
+  mask: url('./assets/icons/cancel-01.svg') center / contain no-repeat;
+}
+@media (forced-colors: active) {
+  .hw-toast-region[data-variant='banner'] .hw-toast-dismiss::before {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+  }
+}

package/dist/nic-pagination.css

@@ -0,0 +1,73 @@
+/* NIC CSS 3505–3666 / 4005–4139. See docs/nic-pagination.md. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-page-size: 40px; --hw-profile-page-radius: 0px;
+  --hw-profile-page-margin: 40px; --hw-profile-page-current-bg: transparent;
+  --hw-profile-page-current-border: transparent; --hw-profile-page-underline: 3px;
+  --hw-profile-page-weight: 400; --hw-profile-page-align: center;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-page-size: initial; --hw-profile-page-radius: initial;
+  --hw-profile-page-margin: initial; --hw-profile-page-current-bg: initial;
+  --hw-profile-page-current-border: initial; --hw-profile-page-underline: initial;
+  --hw-profile-page-weight: initial; --hw-profile-page-align: initial;
+}
+.hw-pagination { position: relative; justify-content: var(--hw-profile-page-align, start); margin-block: var(--hw-profile-page-margin, 0px); gap: 8px; max-inline-size: 100%; }
+.hw-pagination[hidden] { display: none; }
+.hw-pagination-items { display: contents; }
+.hw-pagination :is(.hw-pagination-item, .hw-pagination-arrow, .hw-pagination-gap-trigger, [data-hw-page], .hw-pagination-ellipsis) {
+  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+  min-inline-size: var(--hw-profile-page-size, var(--hw-control-height-sm));
+  block-size: var(--hw-profile-page-size, var(--hw-control-height-sm)); min-block-size: var(--hw-profile-page-size, var(--hw-control-height-sm));
+  padding: 0 .25rem; border: 1px solid transparent; border-radius: var(--hw-profile-page-radius, var(--hw-radius-md));
+  background: transparent; color: var(--hw-color-text); font-family: inherit; font-size: 14px;
+  font-weight: 400; line-height: 1; text-decoration: none; cursor: pointer;
+  transition: background-color var(--hw-duration-pagination) ease, color var(--hw-duration-pagination) ease;
+}
+.hw-pagination :is(.hw-pagination-item, .hw-pagination-arrow, [data-hw-page]):is(:hover, :active):not(:disabled, [aria-disabled='true']) { background: var(--hw-color-surface-muted); color: var(--hw-color-text); box-shadow: none; }
+.hw-pagination :is(.hw-pagination-item, [data-hw-page])[aria-current='page'] { color: var(--hw-color-text); font-weight: var(--hw-profile-page-weight, var(--hw-weight-semibold)); background: var(--hw-profile-page-current-bg, var(--hw-color-primary-subtle)); border-color: var(--hw-profile-page-current-border, var(--hw-color-primary)); }
+.hw-pagination :is(.hw-pagination-item, [data-hw-page])[aria-current='page']::after {
+  content: ''; position: absolute; inset-inline: 4px; inset-block-end: -1px;
+  block-size: var(--hw-profile-page-underline, 0px); border-radius: 9999px; background: var(--hw-color-primary);
+}
+.hw-pagination .hw-button:is(:disabled, [aria-disabled='true']) { color: var(--hw-color-on-disabled); background: transparent; border-color: transparent; opacity: .5; cursor: not-allowed; }
+.hw-pagination .hw-pagination-gap-trigger[aria-disabled='true'] { color: var(--hw-color-on-disabled); opacity: .5; cursor: not-allowed; }
+.hw-pagination :is(.hw-pagination-item, .hw-pagination-arrow, .hw-pagination-gap-trigger, [data-hw-page]):focus-visible:not(:disabled, [aria-disabled='true']) { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: 2px; background: var(--hw-color-surface-muted); }
+.hw-pagination-arrow::before { content: ''; inline-size: 18px; block-size: 18px; background: currentColor; mask: url('./assets/pagination-arrow.svg') center / contain no-repeat; transform: scaleX(var(--_nq-inline-sign, 1)); }
+.hw-pagination-arrow[data-hw-previous]::before { transform: scaleX(calc(-1 * var(--_nq-inline-sign, 1))); }
+.hw-pagination-gap { position: static; }
+.hw-pagination-gap-trigger { list-style: none; }
+.hw-pagination-gap-trigger::-webkit-details-marker { display: none; }
+.hw-pagination-ellipsis { cursor: default; }
+.hw-pagination-menu {
+  position: absolute; z-index: 5; inset-block-start: calc(100% + 4px); inset-inline: 0; margin-inline: auto;
+  inline-size: max-content; min-inline-size: 80px; max-inline-size: 100%; max-block-size: 300px; overflow-y: auto;
+  box-sizing: border-box; padding: 8px 0; border: 1px solid var(--hw-color-pagination-menu-border);
+  border-radius: 4px; background: var(--hw-color-surface); box-shadow: var(--hw-shadow-pagination);
+}
+.hw-pagination-gap:not([open]) > .hw-pagination-menu { display: none; }
+.hw-pagination .hw-pagination-menu > .hw-pagination-item {
+  display: flex; inline-size: 100%; min-block-size: 40px; block-size: 40px; padding-inline: 16px;
+  border: 0; border-radius: 0; font-size: 14px; transition-duration: var(--hw-duration-pagination-item);
+}
+.hw-pagination .hw-pagination-menu > .hw-pagination-item:focus-visible { outline-color: var(--hw-color-focus); outline-offset: -2px; }
+.hw-pagination-jump { display: grid; gap: .5rem; padding: .5rem; inline-size: 12rem; max-inline-size: 100%; box-sizing: border-box; }
+.hw-pagination-jump .hw-label { display: grid; gap: .5rem; margin: 0; }
+.hw-pagination-jump .hw-input { min-inline-size: 0; inline-size: 100%; }
+@media (max-width: 576px) {
+  :where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) { --hw-profile-page-size: 30px; }
+  .hw-pagination { gap: 6px; }
+  .hw-pagination :is(.hw-pagination-item, .hw-pagination-arrow, .hw-pagination-gap-trigger, [data-hw-page], .hw-pagination-ellipsis) { font-size: 12px; }
+  .hw-pagination .hw-pagination-arrow { min-inline-size: 40px; min-block-size: 40px; block-size: 40px; }
+  .hw-pagination .hw-pagination-gap-trigger { min-inline-size: 40px; }
+  .hw-pagination-arrow::before { inline-size: 16px; block-size: 16px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hw-pagination :is(.hw-pagination-item, .hw-pagination-arrow, .hw-pagination-gap-trigger, [data-hw-page]) { transition: none; }
+}
+@media (forced-colors: active) {
+  .hw-pagination-arrow::before { background: ButtonText; forced-color-adjust: none; }
+  .hw-pagination-arrow:disabled::before { background: GrayText; }
+  .hw-pagination [aria-current='page'] { outline: 2px solid Highlight; outline-offset: -2px; }
+  .hw-pagination [aria-current='page']::after { background: Highlight; forced-color-adjust: none; }
+  .hw-pagination-menu { border-color: CanvasText; }
+}

package/dist/nic-rating.css

@@ -0,0 +1,53 @@
+/* NIC global.css 3427–3502: 30px stars and a 200ms fractional-fill transition.
+   Native radio targets, visible boundaries and direction-aware fill are Hawiyah
+   accessibility adaptations. See docs/nic-rating.md. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-rating-size: 30px;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-rating-size: initial;
+}
+.hw-rating label > span[aria-hidden='true'] {
+  font-size: var(--hw-profile-rating-size, 1.75rem);
+  color: var(--hw-color-rating-empty);
+  -webkit-text-stroke: .5px var(--hw-color-rating-outline);
+  transition: color var(--hw-duration-rating) ease;
+}
+.hw-rating label:is(:has(input:checked), :has(~ label input:checked)) > span[aria-hidden='true'] {
+  color: var(--hw-color-rating-fill); -webkit-text-stroke-color: currentColor;
+}
+@media (hover: hover) {
+  .hw-rating:not([data-hw-readonly='true']):not([aria-readonly='true']):has(label:hover input:not(:disabled)) label > span[aria-hidden='true'] {
+    color: var(--hw-color-rating-empty); -webkit-text-stroke-color: var(--hw-color-rating-outline);
+  }
+  .hw-rating:not([data-hw-readonly='true']):not([aria-readonly='true']):has(label:hover input:not(:disabled)) label:is(:hover, :has(~ label:hover input:not(:disabled))) > span[aria-hidden='true'] {
+    color: var(--hw-color-rating-fill); -webkit-text-stroke-color: currentColor;
+  }
+}
+.hw-rating-display { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); max-inline-size: 100%; }
+.hw-rating-stars { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-inline-size: 0; }
+.hw-rating-star {
+  position: relative; display: inline-block; flex: none;
+  inline-size: var(--hw-profile-rating-size, 1.75rem); block-size: var(--hw-profile-rating-size, 1.75rem);
+  font-family: sans-serif; font-size: var(--hw-profile-rating-size, 1.75rem);
+  font-weight: 400; line-height: var(--hw-profile-rating-size, 1.75rem); text-align: center;
+  color: var(--hw-color-rating-empty); -webkit-text-stroke: .5px var(--hw-color-rating-outline);
+}
+.hw-rating-fill {
+  position: absolute; inset-inline-start: 0; inset-block-start: 0;
+  inline-size: clamp(0%, var(--hw-rating-fill, 0%), 100%); block-size: 100%;
+  overflow: hidden; color: var(--hw-color-rating-fill); -webkit-text-stroke-color: currentColor;
+  transition: inline-size var(--hw-duration-rating) ease;
+}
+.hw-rating-fill::before {
+  content: '★'; position: absolute; inset-inline-start: 0; inset-block-start: 0;
+  inline-size: var(--hw-profile-rating-size, 1.75rem); block-size: 100%;
+}
+.hw-rating-score { font-weight: var(--hw-weight-bold); color: var(--hw-color-text); direction: ltr; unicode-bidi: isolate; }
+@media (prefers-reduced-motion: reduce) {
+  .hw-rating label > span[aria-hidden='true'], .hw-rating-fill { transition: none; }
+}
+@media (forced-colors: active) {
+  .hw-rating-star { color: Canvas; -webkit-text-stroke-color: CanvasText; forced-color-adjust: none; }
+  .hw-rating-fill { color: Highlight; -webkit-text-stroke-color: Highlight; forced-color-adjust: none; }
+}

package/dist/nic-search.css

@@ -0,0 +1,70 @@
+/* NIC global.css 2148–2312. Scoped free-text search composition; see docs/nic-search.md. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-search-input-start: 12px;
+  --hw-profile-search-clear-size: 18px;
+  --hw-profile-search-clear-hover: var(--hw-color-danger);
+  --hw-profile-search-duration: 200ms;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-search-input-start: initial;
+  --hw-profile-search-clear-size: initial;
+  --hw-profile-search-clear-hover: initial;
+  --hw-profile-search-duration: initial;
+}
+.hw-search-field { min-inline-size: 0; }
+.hw-search-control > .hw-input { padding-inline-start: var(--hw-profile-search-input-start, var(--hw-space-4)); border-radius: var(--hw-profile-control-radius, var(--hw-radius-md)); }
+.hw-search-control > .hw-search-clear {
+  display: grid; place-items: center; color: var(--hw-color-search-clear, var(--hw-color-text-muted));
+  transition: color var(--hw-profile-search-duration, var(--hw-duration-fast)) ease, background-color var(--hw-profile-search-duration, var(--hw-duration-fast)) ease;
+}
+.hw-search-control > .hw-search-clear:hover:not(:disabled) { color: var(--hw-profile-search-clear-hover, var(--hw-color-text)); }
+.hw-search-clear-icon { inline-size: var(--hw-profile-search-clear-size, 20px); block-size: var(--hw-profile-search-clear-size, 20px); }
+.hw-search-control > .hw-search-suggestions {
+  position: absolute; z-index: 10; inset-block-start: calc(100% + 4px); inset-inline: 0;
+  box-sizing: border-box; margin: 0; padding: 0; list-style: none;
+  max-block-size: 280px; overflow-y: auto; overscroll-behavior: contain;
+  background: var(--hw-color-surface); color: var(--hw-color-text-muted);
+  border: 1px solid var(--hw-color-search-suggestion-border, var(--hw-color-border)); border-radius: 8px;
+  box-shadow: var(--hw-search-suggestion-shadow, 0 8px 24px rgb(16 24 40 / .12));
+}
+.hw-search-control > .hw-search-suggestions[hidden] { display: none; }
+.hw-search-option {
+  box-sizing: border-box; min-block-size: 40px; padding: 10px 14px;
+  font: inherit; font-size: 14px; line-height: 1.4; color: var(--hw-color-text-muted);
+  border-block-end: 1px solid var(--hw-color-surface-muted); cursor: pointer; overflow-wrap: anywhere;
+}
+.hw-search-option:last-child { border-block-end: 0; }
+.hw-search-option:hover, .hw-search-option[aria-selected='true'] { background: var(--hw-color-surface-muted); }
+.hw-search-option[aria-selected='true'] { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: -2px; }
+.hw-search-option strong { color: var(--hw-color-primary-text); font-weight: 700; }
+.hw-search-submit { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--hw-control-height); min-inline-size: var(--hw-control-height); padding: 0; }
+.hw-search-submit-icon { display: inline-block; flex: none; inline-size: 24px; block-size: 24px; background: currentColor; mask: url('./assets/icons/search-01.svg') center / contain no-repeat; }
+.hw-search-form { display: flex; align-items: start; gap: 16px; min-inline-size: 0; }
+.hw-search-form > :is(.hw-field, .hw-search-field, hw-search-field) { flex: 1; min-inline-size: 0; }
+.hw-search-form > .hw-search-submit { align-self: end; }
+.hw-search-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 16px; }
+.hw-search-terms > :is(h3, h4) { flex: 0 0 100%; margin: 0 0 4px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--hw-color-text-muted); }
+.hw-search-term {
+  display: inline-block; box-sizing: border-box; padding: 6px 14px; margin: 0; font: inherit; font-size: 13px; line-height: 1.4;
+  border-radius: 20px; border: 1px solid var(--hw-color-search-term-border, var(--hw-color-border));
+  background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); text-decoration: none; cursor: pointer;
+  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
+}
+.hw-search-term:is(:hover, :focus) { background: var(--hw-color-primary); border-color: var(--hw-color-primary); color: var(--hw-color-on-primary); text-decoration: none; }
+.hw-search-advanced { display: flex; justify-content: center; }
+.hw-search-advanced > :is(a, button) {
+  display: inline-block; box-sizing: border-box; margin-block-start: 16px; padding: 10px 28px; border-radius: 6px;
+  font: inherit; font-size: 16px; line-height: 28px; background: var(--hw-color-primary); border: 1px solid var(--hw-color-primary); color: var(--hw-color-on-primary); text-decoration: none; cursor: pointer;
+  transition: background-color 200ms ease, border-color 200ms ease;
+}
+.hw-search-advanced > :is(a, button):is(:hover, :focus) { background: var(--hw-color-primary-hover); border-color: var(--hw-color-primary-hover); color: var(--hw-color-on-primary); text-decoration: none; }
+.hw-search-term:focus-visible, .hw-search-advanced > :is(a, button):focus-visible { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .hw-search-control > .hw-search-clear, .hw-search-term, .hw-search-advanced > :is(a, button) { transition: none; }
+}
+@media (forced-colors: active) {
+  .hw-search-control > .hw-search-clear, .hw-search-option, .hw-search-option strong { color: CanvasText; }
+  .hw-search-submit-icon { forced-color-adjust: none; background: ButtonText; }
+  .hw-search-option[aria-selected='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
+  .hw-search-term, .hw-search-advanced > :is(a, button) { border-color: ButtonText; }
+}

package/dist/nic-segmented.css

@@ -0,0 +1,117 @@
+/* NIC global.css 1294–1386. See docs/nic-segmented.md for cascade,
+   disabled, dark-mode and focus adaptations. Calendar switches are separate. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-segment-gap: 0px;
+  --hw-profile-segment-group-padding: 0px 0.5rem;
+  --hw-profile-segment-group-border: 0px;
+  --hw-profile-segment-group-background: transparent;
+  --hw-profile-segment-min-width: 4.75rem;
+  --hw-profile-segment-padding: 0.375rem 0.75rem;
+  --hw-profile-segment-font: 1rem;
+  --hw-profile-segment-leading: 1.5rem;
+  --hw-profile-segment-radius: 0px;
+  --hw-profile-segment-outer-radius: 0.5rem;
+  --hw-profile-segment-border: 0px;
+  --hw-profile-segment-selected-border: transparent;
+  --hw-profile-segment-selected-shadow: none;
+  --hw-profile-segment-separator: 1px;
+  --hw-profile-segment-transition: none;
+  --hw-profile-segment-focus-width: 2px;
+  --hw-profile-segment-focus-offset: -3px;
+  --hw-profile-segment-mobile-height: 3rem;
+  --hw-profile-segment-mobile-padding: 1.25rem;
+  --hw-profile-segment-mobile-width: 100%;
+  --hw-profile-segment-mobile-flex: 1 1 auto;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-segment-gap: initial;
+  --hw-profile-segment-group-padding: initial;
+  --hw-profile-segment-group-border: initial;
+  --hw-profile-segment-group-background: initial;
+  --hw-profile-segment-min-width: initial;
+  --hw-profile-segment-padding: initial;
+  --hw-profile-segment-font: initial;
+  --hw-profile-segment-leading: initial;
+  --hw-profile-segment-radius: initial;
+  --hw-profile-segment-outer-radius: initial;
+  --hw-profile-segment-border: initial;
+  --hw-profile-segment-selected-border: initial;
+  --hw-profile-segment-selected-shadow: initial;
+  --hw-profile-segment-separator: initial;
+  --hw-profile-segment-transition: initial;
+  --hw-profile-segment-focus-width: initial;
+  --hw-profile-segment-focus-offset: initial;
+  --hw-profile-segment-mobile-height: initial;
+  --hw-profile-segment-mobile-padding: initial;
+  --hw-profile-segment-mobile-width: initial;
+  --hw-profile-segment-mobile-flex: initial;
+}
+.hw-toggle-group:not([data-variant='outline']) {
+  gap: var(--hw-profile-segment-gap, var(--hw-space-1));
+  padding: var(--hw-profile-segment-group-padding, var(--hw-space-1));
+  border-width: var(--hw-profile-segment-group-border, 1px);
+  background: var(--hw-profile-segment-group-background, var(--hw-color-surface-muted));
+}
+.hw-toggle-group:not([data-variant='outline']) > :is(button,label) {
+  box-sizing: border-box; min-inline-size: var(--hw-profile-segment-min-width, 0px); min-block-size: var(--hw-control-height-sm);
+  padding: var(--hw-profile-segment-padding, var(--hw-space-1) var(--hw-space-3));
+  border-width: var(--hw-profile-segment-border, 1px); border-radius: var(--hw-profile-segment-radius, var(--hw-radius-sm));
+  background: transparent; color: var(--hw-dga-on, var(--hw-color-text-muted)) var(--hw-dga-off, var(--hw-color-text));
+  font-family: var(--hw-font-sans); font-size: var(--hw-profile-segment-font, var(--hw-text-sm));
+  line-height: var(--hw-profile-segment-leading, var(--hw-leading-normal)); font-weight: var(--hw-weight-medium);
+  box-shadow: none; transition: var(--hw-profile-segment-transition, background-color var(--hw-duration-fast));
+}
+.hw-toggle-group:not([data-variant='outline']) > :is(button,label):first-of-type { border-start-start-radius: var(--hw-profile-segment-outer-radius, var(--hw-radius-sm)); border-end-start-radius: var(--hw-profile-segment-outer-radius, var(--hw-radius-sm)); }
+.hw-toggle-group:not([data-variant='outline']) > :is(button,label):last-of-type { border-start-end-radius: var(--hw-profile-segment-outer-radius, var(--hw-radius-sm)); border-end-end-radius: var(--hw-profile-segment-outer-radius, var(--hw-radius-sm)); }
+.hw-toggle-group:not([data-variant='outline']) > :is(button,label) + :is(button,label)::before { content:''; pointer-events:none; position:absolute; inset-block:0; inset-inline-start:0; inline-size:var(--hw-profile-segment-separator,0px); background:var(--hw-color-border); }
+.hw-toggle-group:not([data-variant='outline']) > :is(button,label):hover:not(:disabled,[aria-disabled='true'],:has(input:disabled,input[readonly]),[aria-pressed='true'],:has(input:checked)) { background:var(--hw-dga-on,transparent) var(--hw-dga-off,var(--hw-color-segment-hover)); color:var(--hw-dga-on,var(--hw-color-primary-text)) var(--hw-dga-off,var(--hw-color-text)); }
+.hw-toggle-group:not([data-variant='outline']) > :is([aria-pressed='true'],label:has(input:checked)) {
+  background:var(--hw-color-segment-selected); color:var(--hw-color-on-segment-selected);
+  border-color:var(--hw-profile-segment-selected-border,var(--hw-color-border)); box-shadow:var(--hw-profile-segment-selected-shadow,var(--hw-shadow-sm));
+}
+.hw-toggle-group:not([data-variant='outline']) > :is(button,label):active:not(:disabled,[aria-disabled='true'],:has(input:disabled,input[readonly])) { background:var(--hw-color-segment-selected); color:var(--hw-color-on-segment-selected); box-shadow:none; }
+.hw-toggle-group:not([data-variant='outline']) > :is([aria-pressed='true'],label:has(input:checked),:active)::before,
+.hw-toggle-group:not([data-variant='outline']) > :is([aria-pressed='true'],label:has(input:checked),:active) + :is(button,label)::before { opacity:0; }
+/* A focus ring stays visible on selected and read-only choices. */
+.hw-toggle-group:not([data-variant='outline']) > :is(button:focus-visible,label:has(input:focus-visible)) {
+  background:var(--hw-color-segment-selected); color:var(--hw-color-on-segment-selected);
+  outline:var(--hw-profile-segment-focus-width,var(--hw-focus-width)) solid var(--hw-dga-on,var(--hw-color-focus)) var(--hw-dga-off,var(--hw-color-on-segment-selected));
+  outline-offset:var(--hw-profile-segment-focus-offset,1px); z-index:1;
+}
+.hw-toggle-group:not([data-variant='outline']) > :is(button:disabled,label:has(input:disabled)) { background:var(--hw-color-disabled); color:var(--hw-color-on-disabled); box-shadow:none; cursor:not-allowed; }
+.hw-toggle-group:not([data-variant='outline']) > :is(button:disabled[aria-pressed='true'],label:has(input:disabled:checked)) { outline:1px solid var(--hw-color-border-strong); outline-offset:-1px; }
+@media (max-width:576px) {
+  .hw-toggle-group:not([data-variant='outline']) { inline-size:var(--hw-profile-segment-mobile-width,auto); }
+  .hw-toggle-group:not([data-variant='outline']) > :is(button,label) { flex:var(--hw-profile-segment-mobile-flex,0 1 auto); min-block-size:var(--hw-profile-segment-mobile-height,var(--hw-control-height-sm)); padding-inline:var(--hw-profile-segment-mobile-padding,var(--hw-space-3)); }
+}
+@media (prefers-reduced-motion:reduce) { .hw-toggle-group > :is(button,label) { transition:none; } }
+@media (forced-colors:active) {
+  .hw-toggle-group:not([data-variant='outline']) > :is(button,label) { background:Canvas; color:CanvasText; border:1px solid ButtonText; }
+  .hw-toggle-group:not([data-variant='outline']) > :is([aria-pressed='true'],label:has(input:checked)) { background:Highlight; color:HighlightText; outline:2px solid Highlight; outline-offset:-2px; }
+  .hw-toggle-group:not([data-variant='outline']) > :is(button:focus-visible,label:has(input:focus-visible)) { outline:2px solid Highlight; outline-offset:2px; }
+  .hw-toggle-group:not([data-variant='outline']) > :is(button:disabled,label:has(input:disabled)) { color:GrayText; background:Canvas; border-color:GrayText; }
+}
+/* Attached action groups keep ordinary button semantics. Support Angular's
+   native IconButton wrapper without reparenting framework-owned content. */
+.hw-button-group > hw-icon-button { display:inline-flex; }
+.hw-button-group[data-variant='attached'] > hw-icon-button > .hw-button { inline-size:100%; }
+.hw-button-group[data-variant='attached'] > :is(.hw-button,hw-icon-button) + :is(.hw-button,hw-icon-button) { margin-inline-start:-1px; }
+.hw-button-group[data-variant='attached'] > hw-icon-button:not(:first-child) > .hw-button { border-start-start-radius:0; border-end-start-radius:0; }
+.hw-button-group[data-variant='attached'] > hw-icon-button:not(:last-child) > .hw-button { border-start-end-radius:0; border-end-end-radius:0; }
+.hw-button-group[data-variant='attached'][data-orientation='vertical'] > :is(.hw-button,hw-icon-button) { margin-inline:0; }
+.hw-button-group[data-variant='attached'][data-orientation='vertical'] > :is(.hw-button,hw-icon-button) + :is(.hw-button,hw-icon-button) { margin-block-start:-1px; }
+.hw-button-group[data-variant='attached'][data-orientation='vertical'] > .hw-button,
+.hw-button-group[data-variant='attached'][data-orientation='vertical'] > hw-icon-button > .hw-button { border-radius:0; }
+.hw-button-group[data-variant='attached'][data-orientation='vertical'] > .hw-button:first-child,
+.hw-button-group[data-variant='attached'][data-orientation='vertical'] > hw-icon-button:first-child > .hw-button { border-start-start-radius:var(--hw-profile-control-radius,var(--hw-radius-md)); border-start-end-radius:var(--hw-profile-control-radius,var(--hw-radius-md)); }
+.hw-button-group[data-variant='attached'][data-orientation='vertical'] > .hw-button:last-child,
+.hw-button-group[data-variant='attached'][data-orientation='vertical'] > hw-icon-button:last-child > .hw-button { border-end-start-radius:var(--hw-profile-control-radius,var(--hw-radius-md)); border-end-end-radius:var(--hw-profile-control-radius,var(--hw-radius-md)); }
+.hw-button-group > hw-icon-button:has(:focus-visible) { position:relative; z-index:1; }
+
+/* Read-only pressed buttons remain keyboard stops, including outline mode. */
+.hw-toggle-group[data-hw-readonly='true'][data-variant='outline'] > button[aria-disabled='true']:focus-visible:not(:disabled) {
+  outline:var(--hw-focus-width) solid var(--hw-color-focus); outline-offset:2px;
+}
+@media (forced-colors:active) {
+  .hw-toggle-group[data-hw-readonly='true'][data-variant='outline'] > button[aria-disabled='true']:focus-visible:not(:disabled) { outline:2px solid Highlight; }
+}

package/dist/nic-select.css

@@ -0,0 +1,51 @@
+/* NIC global.css 2439–2446, 2497–2527 and 2641–2649.
+   Keep the native picker and draw its indicator independently of the focus line. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-select-down: , url('./assets/select-down.svg');
+  --hw-profile-select-up: , url('./assets/select-up.svg');
+  --hw-profile-select-size: , 18px 18px;
+  --hw-profile-select-position-ltr: , right 10px center;
+  --hw-profile-select-position-rtl: , left 12px center;
+  --hw-profile-select-appearance: none;
+  --hw-profile-select-font: .875rem;
+  --hw-profile-select-padding-ltr: 35px;
+  --hw-profile-select-padding-rtl: 36px;
+  --hw-profile-helper-size: .625rem;
+  --hw-profile-error-size: .75rem;
+  --hw-profile-error-offset: -.25rem;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-select-down: initial;
+  --hw-profile-select-up: initial;
+  --hw-profile-select-size: initial;
+  --hw-profile-select-position-ltr: initial;
+  --hw-profile-select-position-rtl: initial;
+  --hw-profile-select-appearance: initial;
+  --hw-profile-select-font: initial;
+  --hw-profile-select-padding-ltr: initial;
+  --hw-profile-select-padding-rtl: initial;
+  --hw-profile-helper-size: initial;
+  --hw-profile-error-size: initial;
+  --hw-profile-error-offset: initial;
+}
+@media (forced-colors: none) {
+  select.hw-select:where(:not([multiple]):is(:not([size]), [size='0'], [size='1'])) {
+    appearance: var(--hw-profile-select-appearance, auto);
+    --_nq-select-image: var(--hw-profile-select-down,);
+    --_nq-select-size: var(--hw-profile-select-size,);
+    --_nq-rtl-position: var(--_nq-rtl-only) var(--hw-profile-select-position-rtl,);
+    --_nq-select-position: var(--_nq-rtl-position, var(--hw-profile-select-position-ltr,));
+    --_nq-rtl-padding: var(--_nq-rtl-only) var(--hw-profile-select-padding-rtl, var(--hw-space-3));
+    --hw-profile-field-padding-end: var(--_nq-rtl-padding, var(--hw-profile-select-padding-ltr, var(--hw-space-3)));
+    font-size: var(--hw-profile-select-font, inherit);
+  }
+  select.hw-select:where(:not([multiple]):is(:not([size]), [size='0'], [size='1'])):focus { --_nq-select-image: var(--hw-profile-select-up,); }
+}
+.hw-field > .hw-hint { color: var(--hw-color-field-helper, var(--hw-color-text-muted)); font-size: var(--hw-profile-helper-size, var(--hw-text-sm)); }
+.hw-field > .hw-error {
+  color: var(--hw-color-field-error-text, var(--hw-color-danger));
+  font-size: var(--hw-profile-error-size, var(--hw-text-sm));
+  margin-block-start: var(--hw-profile-error-offset, 0);
+}
+
+.hw-label > .hw-required-marker { color: var(--hw-color-danger); }