@hawiyah/styles 0.0.0-stage → 0.2.1

package/dist/components.css

@@ -0,0 +1,335 @@
+/* Hawiyah components are opt-in. Import reset.css separately for new applications. */
+:where(.hw-button, .hw-field, .hw-input, .hw-textarea, .hw-select, .hw-tabs,
+  .hw-dialog, .hw-combobox, .hw-listbox, .hw-card, .hw-badge, .hw-alert,
+  .hw-table, .hw-pagination, .hw-breadcrumb, .hw-accordion, .hw-avatar,
+  .hw-toolbar, .hw-chip, .hw-empty, .hw-stepper, .hw-timeline, .hw-upload,
+  .hw-tooltip, .hw-stack, .hw-cluster, .hw-container) {
+  box-sizing: border-box;
+  font-family: var(--hw-font-sans);
+  font-size: var(--hw-text-md);
+  line-height: var(--hw-leading-normal);
+}
+:where([class^='hw-'], [class*=' hw-'])::before,
+:where([class^='hw-'], [class*=' hw-'])::after { box-sizing: border-box; }
+:where(.hw-button, .hw-input, .hw-textarea, .hw-select, .hw-checkbox,
+  .hw-radio, .hw-switch, .hw-tab, .hw-accordion-trigger,
+  .hw-pagination a, .hw-pagination button, .hw-breadcrumb a,
+  .hw-chip button, .hw-upload input, .hw-tooltip-trigger):focus-visible {
+  outline: var(--hw-focus-width) solid var(--hw-color-focus);
+  outline-offset: var(--hw-focus-offset);
+}
+
+/* Actions */
+.hw-button {
+  --hw-button-bg: var(--hw-color-primary);
+  --hw-button-fg: var(--hw-color-on-primary);
+  --hw-button-border: transparent;
+  --hw-button-hover: var(--hw-color-primary-hover);
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  gap: var(--hw-space-2);
+  min-block-size: var(--hw-control-height);
+  padding: var(--hw-space-2) var(--hw-control-padding-inline);
+  border: 1px solid var(--hw-button-border);
+  border-radius: var(--hw-radius-md);
+  background: var(--hw-button-bg);
+  color: var(--hw-button-fg);
+  font-size: var(--hw-text-sm);
+  font-weight: var(--hw-weight-semibold);
+  line-height: var(--hw-leading-heading);
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--hw-duration-fast), border-color var(--hw-duration-fast), box-shadow var(--hw-duration-fast);
+}
+.hw-button[data-variant='secondary'] {
+  --hw-button-bg: var(--hw-color-surface);
+  --hw-button-fg: var(--hw-color-text);
+  --hw-button-border: var(--hw-color-border-strong);
+  --hw-button-hover: var(--hw-color-surface-muted);
+}
+.hw-button[data-variant='ghost'] {
+  --hw-button-bg: transparent;
+  --hw-button-fg: var(--hw-color-primary-text);
+  --hw-button-hover: var(--hw-color-primary-subtle);
+}
+.hw-button[data-variant='danger'] {
+  --hw-button-bg: var(--hw-color-danger);
+  --hw-button-fg: var(--hw-color-surface);
+  --hw-button-hover: var(--hw-color-danger-hover);
+}
+.hw-button[data-size='sm'] { min-block-size: var(--hw-control-height-sm); padding: var(--hw-space-1) var(--hw-space-3); font-size: var(--hw-text-xs); }
+.hw-button[data-size='lg'] { min-block-size: var(--hw-control-height-lg); padding-inline: var(--hw-space-6); font-size: var(--hw-text-md); }
+.hw-button[data-icon-only] { inline-size: var(--hw-control-height); padding-inline: var(--hw-space-2); }
+.hw-button[data-icon-only][data-size='sm'] { inline-size: var(--hw-control-height-sm); }
+.hw-button[data-icon-only][data-size='lg'] { inline-size: var(--hw-control-height-lg); }
+.hw-button > svg { flex: none; inline-size: 1.125em; block-size: 1.125em; }
+@media (hover: hover) {
+  .hw-button:not(:disabled, [aria-disabled='true']):hover { background: var(--hw-button-hover); }
+}
+.hw-button:not(:disabled, [aria-disabled='true']):active { box-shadow: inset 0 0 0 100px rgb(0 0 0 / 0.06); }
+.hw-button:where(:disabled, [aria-disabled='true']) {
+  background: var(--hw-color-disabled);
+  border-color: transparent;
+  color: var(--hw-color-on-disabled);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+.hw-button[aria-busy='true'] { cursor: progress; }
+
+/* Inputs and field anatomy */
+/* Equal-height form rows must not distribute spare height into labels/inputs. */
+.hw-field { display: grid; align-content: start; gap: var(--hw-space-2); min-inline-size: 0; color: var(--hw-color-text); }
+.hw-label { display: block; color: var(--hw-color-text); font-size: var(--hw-text-sm); font-weight: var(--hw-weight-semibold); line-height: var(--hw-leading-normal); }
+.hw-label abbr[title] { color: var(--hw-color-danger); text-decoration: none; }
+:where(.hw-input, .hw-textarea, .hw-select) {
+  display: block;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--hw-control-height);
+  padding: var(--hw-space-2) var(--hw-space-3);
+  border: 1px solid var(--hw-color-border-strong);
+  border-radius: var(--hw-radius-md);
+  background: var(--hw-color-surface);
+  color: var(--hw-color-text);
+  font-weight: var(--hw-weight-regular);
+  transition: border-color var(--hw-duration-fast), box-shadow var(--hw-duration-fast);
+}
+:where(.hw-input, .hw-textarea)::placeholder { color: var(--hw-color-text-subtle); opacity: 1; }
+:where(.hw-input, .hw-textarea, .hw-select):hover:not(:disabled, [readonly]) { border-color: var(--hw-color-primary); }
+:where(.hw-input, .hw-textarea, .hw-select):focus-visible { border-color: var(--hw-color-primary); }
+:where(.hw-input, .hw-textarea, .hw-select)[aria-invalid='true'] { border-color: var(--hw-color-danger); }
+@supports selector(:user-invalid) {
+  :where(.hw-input, .hw-textarea, .hw-select):user-invalid { border-color: var(--hw-color-danger); }
+}
+:where(.hw-input, .hw-textarea, .hw-select):disabled { background: var(--hw-color-disabled); border-color: var(--hw-color-border); color: var(--hw-color-on-disabled); cursor: not-allowed; }
+:where(.hw-input, .hw-textarea)[readonly] { background: var(--hw-color-surface-muted); }
+.hw-input[type='search'] { appearance: none; }
+.hw-input[type='number'] { font-variant-numeric: tabular-nums; }
+.hw-input::file-selector-button { margin-inline-end: var(--hw-space-3); padding: var(--hw-space-1) var(--hw-space-3); border: 0; border-radius: var(--hw-radius-sm); background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); font: inherit; cursor: pointer; }
+.hw-textarea { min-block-size: 7.5rem; resize: vertical; }
+/* Retain the native select arrow, keyboard behavior, and platform picker. */
+.hw-select { cursor: pointer; }
+.hw-hint, .hw-error { margin: 0; font-size: var(--hw-text-sm); line-height: var(--hw-leading-normal); }
+.hw-hint { color: var(--hw-color-text-muted); }
+.hw-error { color: var(--hw-color-danger); }
+.hw-choice { display: inline-flex; align-items: center; gap: var(--hw-space-3); min-block-size: var(--hw-control-height); color: var(--hw-color-text); font: inherit; cursor: pointer; }
+:where(.hw-checkbox, .hw-radio) { box-sizing: border-box; flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--hw-color-primary); vertical-align: middle; cursor: pointer; }
+:where(.hw-checkbox, .hw-radio, .hw-switch):disabled { cursor: not-allowed; opacity: 0.6; }
+.hw-switch {
+  box-sizing: border-box;
+  appearance: none;
+  position: relative;
+  flex: none;
+  inline-size: var(--hw-switch-width, 2.75rem);
+  block-size: var(--hw-switch-height, 1.625rem);
+  margin: 0;
+  border: 1px solid var(--hw-color-border-strong);
+  border-radius: var(--hw-radius-full);
+  background: var(--hw-color-text-subtle);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: background-color var(--hw-duration-switch, var(--hw-duration-normal)) var(--hw-ease-switch-track, ease), border-color var(--hw-duration-switch, var(--hw-duration-normal)) var(--hw-ease-switch-track, ease);
+}
+.hw-switch::before {
+  content: '';
+  position: absolute;
+  inset-block-start: var(--hw-switch-thumb-offset, 0.1875rem);
+  inset-inline-start: var(--hw-switch-thumb-offset, 0.1875rem);
+  inline-size: var(--hw-switch-thumb-size, 1.125rem);
+  block-size: var(--hw-switch-thumb-size, 1.125rem);
+  border-radius: 50%;
+  background: var(--hw-color-surface);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+  transition: inset-inline-start var(--hw-duration-switch, var(--hw-duration-normal)) var(--hw-ease-switch, var(--hw-ease-standard));
+}
+.hw-switch:checked { background: var(--hw-color-primary); border-color: var(--hw-color-primary); }
+.hw-switch:checked::before { inset-inline-start: var(--hw-switch-thumb-offset-checked, 1.3125rem); background: var(--hw-color-on-primary); }
+
+/* Navigation and disclosure */
+.hw-tabs { min-inline-size: 0; color: var(--hw-color-text); }
+.hw-tab-list { display: flex; gap: var(--hw-space-1); overflow-x: auto; padding: 3px 3px 0; border-block-end: 1px solid var(--hw-color-border); scrollbar-width: thin; }
+.hw-tab { position: relative; flex: none; min-block-size: var(--hw-control-height); padding: var(--hw-space-3) var(--hw-space-4); border: 0; border-radius: var(--hw-radius-sm) var(--hw-radius-sm) 0 0; background: transparent; color: var(--hw-color-text-muted); font: inherit; font-size: var(--hw-text-sm); font-weight: var(--hw-weight-medium); cursor: pointer; }
+.hw-tab::after { content: ''; position: absolute; inset-inline: var(--hw-space-3); inset-block-end: 0; block-size: 3px; border-radius: 3px 3px 0 0; background: transparent; }
+.hw-tab:focus-visible { outline-offset: -4px; }
+.hw-tab[aria-selected='true'] { color: var(--hw-color-primary-text); font-weight: var(--hw-weight-semibold); }
+.hw-tab[aria-selected='true']::after { background: var(--hw-color-primary); }
+.hw-tab:hover:not(:disabled) { background: var(--hw-color-surface-muted); }
+.hw-tab:disabled, .hw-tab[aria-disabled='true'] { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+.hw-tab-panel { padding-block: var(--hw-space-5); outline-offset: -3px; }
+.hw-tab-list[aria-orientation='vertical'] { flex-direction: column; border-block-end: 0; border-inline-end: 1px solid var(--hw-color-border); overflow: visible; }
+.hw-tab-list[aria-orientation='vertical'] .hw-tab { text-align: start; border-radius: var(--hw-radius-sm); }
+.hw-tab-list[aria-orientation='vertical'] .hw-tab::after { inset-inline-start: auto; inset-inline-end: -1px; inset-block: var(--hw-space-2); inline-size: 3px; block-size: auto; }
+.hw-accordion { border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); color: var(--hw-color-text); }
+.hw-accordion-item + .hw-accordion-item { border-block-start: 1px solid var(--hw-color-border); }
+.hw-accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--hw-space-4); padding: var(--hw-space-4) var(--hw-space-5); font-weight: var(--hw-weight-semibold); list-style: none; cursor: pointer; }
+.hw-accordion-trigger::-webkit-details-marker { display: none; }
+.hw-accordion-trigger::after { content: ''; display: inline-block; flex: none; inline-size: 1.25rem; block-size: 1.25rem; color: var(--hw-color-text-muted); background: currentColor; mask: url('./assets/icons/add-01.svg') center / contain no-repeat; }
+.hw-accordion-item[open] > .hw-accordion-trigger::after { mask-image: url('./assets/icons/minus-sign.svg'); }
+.hw-accordion-trigger:hover { background: var(--hw-color-surface-muted); }
+.hw-accordion-trigger:focus-visible { outline-offset: -4px; }
+.hw-accordion-content, .hw-accordion-item > :not(summary) { padding: 0 var(--hw-space-5) var(--hw-space-5); color: var(--hw-color-text-muted); }
+.hw-breadcrumb { color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }
+.hw-breadcrumb :where(ol, ul) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); margin: 0; padding: 0; list-style: none; }
+.hw-breadcrumb li { display: inline-flex; align-items: center; gap: var(--hw-space-2); }
+.hw-breadcrumb li + li::before { content: '/'; color: var(--hw-color-text-subtle); }
+.hw-breadcrumb a { border-radius: 2px; color: inherit; text-underline-offset: 0.2em; text-decoration: none; }
+.hw-breadcrumb a:hover { color: var(--hw-color-primary-text); text-decoration: underline; }
+.hw-breadcrumb [aria-current='page'] { color: var(--hw-color-text); font-weight: var(--hw-weight-medium); }
+.hw-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); }
+.hw-pagination :where(button, a) { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--hw-control-height-sm); min-block-size: var(--hw-control-height-sm); padding: var(--hw-space-1) var(--hw-space-3); border: 1px solid transparent; border-radius: var(--hw-radius-md); background: transparent; color: var(--hw-color-text-muted); font: inherit; font-size: var(--hw-text-sm); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
+.hw-pagination :where(button, a):hover:not(:disabled, [aria-disabled='true']) { background: var(--hw-color-surface-muted); }
+.hw-pagination [aria-current='page'] { border-color: var(--hw-color-primary); background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); font-weight: var(--hw-weight-semibold); }
+.hw-pagination :where(:disabled, [aria-disabled='true']) { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+
+/* Overlay and search selection */
+.hw-dialog {
+  position: fixed;
+  inline-size: min(36rem, calc(100vw - 2rem));
+  max-inline-size: none;
+  max-block-size: calc(100dvh - 3rem);
+  margin: auto;
+  padding: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--hw-color-border);
+  border-radius: var(--hw-radius-xl);
+  background: var(--hw-color-surface-raised);
+  color: var(--hw-color-text);
+  box-shadow: var(--hw-shadow-lg);
+}
+.hw-dialog::backdrop { background: var(--hw-color-overlay); backdrop-filter: blur(3px); }
+.hw-dialog[open] { animation: hw-dialog-in var(--hw-duration-normal) var(--hw-ease-standard); }
+.hw-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: var(--hw-space-4); padding: var(--hw-space-6) var(--hw-space-6) var(--hw-space-4); }
+.hw-dialog-header :where(h1, h2, h3) { margin: 0; color: var(--hw-color-text); font-size: var(--hw-text-xl); font-weight: var(--hw-weight-semibold); line-height: var(--hw-leading-heading); }
+.hw-dialog-body { padding: 0 var(--hw-space-6) var(--hw-space-6); }
+.hw-dialog-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--hw-space-3); padding: var(--hw-space-4) var(--hw-space-6); border-block-start: 1px solid var(--hw-color-border); background: var(--hw-color-surface-muted); }
+@keyframes hw-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
+.hw-combobox { position: relative; min-inline-size: 0; }
+.hw-listbox { position: absolute; z-index: var(--hw-z-popover); inset-inline: 0; inset-block-start: calc(100% + var(--hw-space-2)); max-block-size: 18rem; overflow: auto; overscroll-behavior: contain; margin: 0; padding: var(--hw-space-1); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-md); background: var(--hw-color-surface-raised); color: var(--hw-color-text); box-shadow: var(--hw-shadow-md); list-style: none; }
+.hw-option { display: flex; align-items: center; gap: var(--hw-space-2); min-block-size: var(--hw-control-height); padding: var(--hw-space-2) var(--hw-space-3); border-radius: var(--hw-radius-sm); font-size: var(--hw-text-sm); cursor: pointer; }
+.hw-option:hover:not([aria-disabled='true']), .hw-option[data-active] { background: var(--hw-color-surface-muted); }
+.hw-option[aria-selected='true'] { background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); font-weight: var(--hw-weight-semibold); }
+.hw-option[data-active] { outline: 2px solid var(--hw-color-focus); outline-offset: -2px; }
+.hw-option[aria-disabled='true'] { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+.hw-tooltip { position: absolute; z-index: var(--hw-z-tooltip); inset-block-end: calc(100% + var(--hw-space-2)); inset-inline-start: 0; inline-size: max-content; max-inline-size: min(20rem, calc(100vw - 2rem)); padding: var(--hw-space-2) var(--hw-space-3); border-radius: var(--hw-radius-sm); background: var(--hw-color-inverse); color: var(--hw-color-on-inverse); font-size: var(--hw-text-xs); font-weight: var(--hw-weight-medium); box-shadow: var(--hw-shadow-sm); }
+[data-hw='tooltip'], .hw-tooltip-anchor { position: relative; display: inline-flex; }
+
+/* Content surfaces */
+.hw-card { min-inline-size: 0; border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); color: var(--hw-color-text); box-shadow: var(--hw-shadow-sm); }
+.hw-card-header { display: flex; align-items: start; justify-content: space-between; gap: var(--hw-space-4); padding: var(--hw-space-5) var(--hw-space-5) 0; }
+.hw-card-header :where(h2, h3, h4) { margin: 0; font-size: var(--hw-text-lg); font-weight: var(--hw-weight-semibold); line-height: var(--hw-leading-heading); }
+.hw-card-body { padding: var(--hw-space-5); }
+.hw-card-footer { border-end-start-radius: var(--hw-radius-lg); border-end-end-radius: var(--hw-radius-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hw-space-3); padding: var(--hw-space-4) var(--hw-space-5); border-block-start: 1px solid var(--hw-color-border); }
+.hw-badge, .hw-chip { --hw-tone: var(--hw-color-text-muted); --hw-tone-bg: var(--hw-color-surface-muted); display: inline-flex; align-items: center; gap: var(--hw-space-1); max-inline-size: 100%; padding: 0.125rem var(--hw-space-2); border: 1px solid transparent; border-radius: var(--hw-radius-full); background: var(--hw-tone-bg); color: var(--hw-tone); font-size: var(--hw-text-xs); font-weight: var(--hw-weight-medium); line-height: 1.65; vertical-align: middle; }
+:is(.hw-badge, .hw-alert)[data-tone='success'] { --hw-tone: var(--hw-color-success); --hw-tone-bg: var(--hw-color-success-subtle); }
+:is(.hw-badge, .hw-alert)[data-tone='warning'] { --hw-tone: var(--hw-color-warning); --hw-tone-bg: var(--hw-color-warning-subtle); }
+:is(.hw-badge, .hw-alert)[data-tone='danger'] { --hw-tone: var(--hw-color-danger); --hw-tone-bg: var(--hw-color-danger-subtle); }
+:is(.hw-badge, .hw-alert)[data-tone='info'] { --hw-tone: var(--hw-color-info); --hw-tone-bg: var(--hw-color-info-subtle); }
+.hw-alert { --hw-tone: var(--hw-color-info); --hw-tone-bg: var(--hw-color-info-subtle); display: flex; align-items: start; gap: var(--hw-space-3); padding: var(--hw-space-4); border: 1px solid var(--hw-color-border); border-inline-start: 3px solid var(--hw-tone); border-radius: var(--hw-radius-md); background: var(--hw-tone-bg); color: var(--hw-tone); font-size: var(--hw-text-sm); }
+.hw-alert > svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.15rem; }
+.hw-alert :where(h2, h3, h4, p) { margin-block: 0; }
+.hw-alert :where(h2, h3, h4) { font-size: inherit; font-weight: var(--hw-weight-semibold); }
+.hw-alert[data-tone='neutral'] { --hw-tone: var(--hw-color-text-muted); --hw-tone-bg: var(--hw-color-canvas); }
+.hw-alert-content { flex: 1; min-inline-size: 0; }
+.hw-alert a { color: inherit; text-underline-offset: 0.2em; }
+.hw-chip { gap: var(--hw-space-2); min-block-size: 2rem; padding-inline: var(--hw-space-3) var(--hw-space-2); border-color: var(--hw-color-border); border-radius: var(--hw-radius-md); }
+.hw-chip button { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; padding: 0; border: 0; border-radius: var(--hw-radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.hw-chip button:hover { background: var(--hw-color-border); }
+.hw-avatar { display: inline-grid; flex: none; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; overflow: hidden; border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-full); background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); font-size: var(--hw-text-sm); font-weight: var(--hw-weight-semibold); }
+.hw-avatar img, img.hw-avatar { inline-size: 2.75rem; block-size: 2.75rem; object-fit: cover; }
+.hw-divider { inline-size: 100%; block-size: 0; margin-block: var(--hw-space-5); border: 0; border-block-start: 1px solid var(--hw-color-border); }
+.hw-divider[aria-orientation='vertical'] { align-self: stretch; inline-size: 0; block-size: auto; margin-block: 0; margin-inline: var(--hw-space-3); border-block-start: 0; border-inline-start: 1px solid var(--hw-color-border); }
+
+/* Tables and activity */
+.hw-table-wrap { position: relative; min-inline-size: 0; overflow-x: auto; border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); }
+.hw-table-wrap:focus-visible { outline: var(--hw-focus-width) solid var(--hw-color-focus); outline-offset: var(--hw-focus-offset); }
+.hw-table { inline-size: 100%; border-collapse: collapse; color: var(--hw-color-text); font-size: var(--hw-text-sm); text-align: start; }
+.hw-table caption { padding: var(--hw-space-4) var(--hw-space-5); color: var(--hw-color-text); font-weight: var(--hw-weight-semibold); text-align: start; }
+.hw-table :where(th, td) { padding: var(--hw-density-cell-padding) var(--hw-space-5); border-block-end: 1px solid var(--hw-color-border); text-align: start; vertical-align: middle; }
+.hw-table thead { background: var(--hw-color-surface-muted); color: var(--hw-color-text-muted); }
+.hw-table th { font-weight: var(--hw-weight-semibold); white-space: nowrap; }
+.hw-table tbody tr:last-child > * { border-block-end: 0; }
+.hw-table tbody tr:hover { background: var(--hw-color-canvas); }
+.hw-table tr[aria-selected='true'] { background: var(--hw-color-primary-subtle); }
+.hw-table [data-numeric] { font-variant-numeric: tabular-nums; text-align: end; }
+.hw-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hw-space-3); }
+.hw-toolbar > .hw-input, .hw-toolbar > .hw-combobox { flex: 1 1 16rem; }
+.hw-stepper { display: flex; gap: var(--hw-space-4); margin: 0; padding: 0; color: var(--hw-color-text-muted); list-style: none; counter-reset: hw-step; }
+.hw-step { position: relative; display: flex; align-items: center; flex: 1; gap: var(--hw-space-3); min-inline-size: 0; font-size: var(--hw-text-sm); counter-increment: hw-step; }
+.hw-step::before { content: counter(hw-step); display: inline-grid; flex: none; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--hw-color-border-strong); border-radius: var(--hw-radius-full); background: var(--hw-color-surface); color: var(--hw-color-text-muted); font-variant-numeric: tabular-nums; font-weight: var(--hw-weight-semibold); }
+.hw-step:not(:last-child)::after { content: ''; flex: 1; min-inline-size: var(--hw-space-4); block-size: 1px; background: var(--hw-color-border); }
+.hw-step[aria-current='step'], .hw-step[data-state='active'] { color: var(--hw-color-primary-text); font-weight: var(--hw-weight-semibold); }
+.hw-step[aria-current='step']::before, .hw-step[data-state='active']::before { border-color: var(--hw-color-primary); background: var(--hw-color-primary); color: var(--hw-color-on-primary); box-shadow: 0 0 0 4px var(--hw-color-primary-subtle); }
+.hw-step[data-state='complete']::before, .hw-step[data-state='completed']::before { content: ''; mask: url('./assets/icons/tick-02.svg') center / 1.25rem no-repeat exclude, linear-gradient(#000 0 0); border-color: var(--hw-color-primary); background: var(--hw-color-primary); color: var(--hw-color-on-primary); }
+.hw-step[data-state='error']::before { content: ''; mask: url('./assets/icons/exclamation-mark.svg') center / 1.25rem no-repeat exclude, linear-gradient(#000 0 0); border-color: var(--hw-color-danger); background: var(--hw-color-danger); color: var(--hw-color-on-primary); }
+.hw-timeline { margin: 0; padding: 0; color: var(--hw-color-text); list-style: none; }
+.hw-timeline > li { position: relative; padding-inline-start: var(--hw-space-8); padding-block-end: var(--hw-space-6); }
+.hw-timeline > li::before { content: ''; position: absolute; inset-inline-start: 0.3125rem; inset-block-start: 0.6rem; inline-size: 0.625rem; block-size: 0.625rem; border: 2px solid var(--hw-color-surface); border-radius: 50%; background: var(--hw-color-border-strong); box-shadow: 0 0 0 1px var(--hw-color-border-strong); }
+.hw-timeline > li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 0.5625rem; inset-block: 1.5rem 0.3rem; inline-size: 1px; background: var(--hw-color-border); }
+.hw-timeline > li[data-state='complete']::before, .hw-timeline > li[data-state='active']::before { background: var(--hw-color-primary); box-shadow: 0 0 0 1px var(--hw-color-primary); }
+.hw-timeline time { display: block; color: var(--hw-color-text-muted); font-size: var(--hw-text-xs); }
+.hw-empty { display: grid; justify-items: center; gap: var(--hw-space-3); padding: var(--hw-space-12) var(--hw-space-6); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); color: var(--hw-color-text); text-align: center; }
+.hw-empty > svg { inline-size: 2.5rem; block-size: 2.5rem; padding: var(--hw-space-4); border-radius: var(--hw-radius-xl); background: var(--hw-color-surface-muted); color: var(--hw-color-text-muted); box-sizing: content-box; }
+.hw-empty :where(h2, h3, p) { max-inline-size: 34rem; margin: 0; }
+.hw-empty :where(h2, h3) { font-size: var(--hw-text-lg); font-weight: var(--hw-weight-semibold); }
+.hw-empty p { color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }
+.hw-upload { display: grid; justify-items: center; gap: var(--hw-space-3); padding: var(--hw-space-8) var(--hw-space-5); border: 1.5px dashed var(--hw-color-border-strong); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); color: var(--hw-color-text); text-align: center; }
+.hw-upload:focus-within, .hw-upload[data-state='dragging'] { border-color: var(--hw-color-primary); background: var(--hw-color-primary-subtle); }
+.hw-upload[data-state='error'] { border-color: var(--hw-color-danger); }
+.hw-upload input[type='file'] { max-inline-size: 100%; color: var(--hw-color-text-muted); font: inherit; font-size: var(--hw-text-sm); }
+.hw-upload input[type='file']::file-selector-button { min-block-size: var(--hw-control-height-sm); margin-inline-end: var(--hw-space-3); padding-inline: var(--hw-space-4); border: 1px solid var(--hw-color-border-strong); border-radius: var(--hw-radius-md); background: var(--hw-color-surface); color: var(--hw-color-text); font: inherit; font-weight: var(--hw-weight-medium); cursor: pointer; }
+
+/* Loading and progress */
+.hw-progress { display: block; inline-size: 100%; block-size: 0.5rem; overflow: hidden; border: 0; border-radius: var(--hw-radius-full); background: var(--hw-color-surface-muted); accent-color: var(--hw-color-primary); }
+progress.hw-progress { appearance: none; }
+.hw-progress::-webkit-progress-bar { border-radius: var(--hw-radius-full); background: var(--hw-color-surface-muted); }
+.hw-progress::-webkit-progress-value { border-radius: var(--hw-radius-full); background: var(--hw-color-primary); transition: width var(--hw-duration-slow); }
+.hw-progress::-moz-progress-bar { border-radius: var(--hw-radius-full); background: var(--hw-color-primary); }
+.hw-progress > span { display: block; block-size: 100%; border-radius: inherit; background: var(--hw-color-primary); }
+.hw-skeleton { display: block; min-block-size: 1rem; border-radius: var(--hw-radius-sm); background: var(--hw-color-surface-muted); animation: hw-pulse 1.8s ease-in-out infinite; }
+.hw-spinner { display: inline-block; box-sizing: border-box; inline-size: 1.25rem; block-size: 1.25rem; flex: none; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; color: inherit; vertical-align: middle; animation: hw-spin var(--hw-duration-spinner, 0.7s) linear infinite; }
+@keyframes hw-spin { to { transform: rotate(360deg); } }
+@keyframes hw-pulse { 50% { opacity: 0.45; } }
+
+/* Layout helpers use logical dimensions and remain direction independent. */
+.hw-container { inline-size: min(var(--hw-content-max), calc(100% - 3rem)); margin-inline: auto; }
+.hw-stack { display: flex; flex-direction: column; gap: var(--hw-gap, var(--hw-space-4)); min-inline-size: 0; }
+.hw-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-gap, var(--hw-space-3)); }
+.hw-sr-only { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
+/* Hidden behavior must survive a component's display declaration. */
+:where([class^='hw-'], [class*=' hw-'])[hidden] { display: none !important; }
+
+@media (max-width: 40rem) {
+  .hw-container { inline-size: calc(100% - 2rem); }
+  .hw-dialog-header { padding: var(--hw-space-5) var(--hw-space-4) var(--hw-space-3); }
+  .hw-dialog-body { padding: 0 var(--hw-space-4) var(--hw-space-5); }
+  .hw-dialog-footer { padding-inline: var(--hw-space-4); }
+  .hw-card-header { padding-inline: var(--hw-space-4); }
+  .hw-card-body, .hw-card-footer { padding-inline: var(--hw-space-4); }
+  .hw-stepper { flex-direction: column; gap: var(--hw-space-3); }
+  .hw-step:not(:last-child)::after { display: none; }
+  .hw-table :where(th, td) { padding-inline: var(--hw-space-3); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hw-button, .hw-input, .hw-textarea, .hw-select, .hw-switch, .hw-switch::before, .hw-progress > span { transition: none; }
+  .hw-dialog[open], .hw-skeleton, .hw-spinner { animation: none; }
+  .hw-progress::-webkit-progress-value { transition: none; }
+}
+@media (forced-colors: active) {
+  .hw-button, .hw-badge, .hw-chip, .hw-avatar { border: 1px solid ButtonText; }
+  .hw-button:where(:disabled, [aria-disabled='true']) { border-color: GrayText; color: GrayText; }
+  .hw-tab[aria-selected='true']::after { background: Highlight; }
+  .hw-option[aria-selected='true'], .hw-pagination [aria-current='page'] { outline: 2px solid Highlight; outline-offset: -2px; }
+  .hw-switch { appearance: auto; }
+  .hw-switch::before { display: none; }
+  .hw-spinner { border-color: CanvasText; border-inline-end-color: transparent; }
+  .hw-progress, .hw-skeleton { border: 1px solid CanvasText; }
+  .hw-step[aria-current='step']::before { border: 3px solid Highlight; }
+  .hw-dialog::backdrop { background: Canvas; opacity: 0.7; }
+}

package/dist/content-navigation.css

@@ -0,0 +1,44 @@
+/* NIC global.css 1890–2036. Geometry and accessibility adaptations:
+   docs/nic-content-navigation.md. No global section-ID selector is installed. */
+.hw-content-nav {
+  display: flex; flex-direction: column; align-self: start; gap: 8px; min-inline-size: 0;
+  color: var(--hw-color-text); font-family: var(--hw-font-sans);
+}
+.hw-content-nav-heading { margin: 0; font: inherit; font-size: 16px; line-height: 24px; font-weight: var(--hw-weight-semibold); }
+.hw-content-nav-list, .hw-content-nav-sublist { list-style: none; padding: 0; margin: 0; }
+.hw-content-nav-sublist { margin-inline-start: var(--hw-content-nav-indent, 16px); }
+.hw-content-nav-link {
+  display: flex; position: relative; box-sizing: border-box; align-items: center;
+  min-inline-size: min(140px, 100%); min-block-size: 40px; padding-inline: 8px 16px;
+  border-radius: 2px; color: var(--hw-color-text); text-decoration: none; cursor: pointer;
+}
+.hw-content-nav-label { flex: 1; min-inline-size: 0; padding-block: 6px; font-size: 14px; line-height: 28px; color: var(--hw-color-text); overflow-wrap: anywhere; }
+.hw-content-nav-sublist .hw-content-nav-link::before {
+  content: ''; position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 2px; background: var(--hw-color-border);
+}
+.hw-content-nav-marker { position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 3px; border-radius: 9999px; background: transparent; }
+.hw-content-nav-link[aria-current='location'] .hw-content-nav-marker { background: var(--hw-color-primary-text); }
+.hw-content-nav-link:hover:where(:not([aria-disabled='true'])) { background: var(--hw-color-surface-muted); text-decoration: none; }
+.hw-content-nav-link:hover:where(:not([aria-disabled='true'])) .hw-content-nav-marker { background: var(--hw-color-content-nav-marker-hover, var(--hw-color-text-subtle)); }
+.hw-content-nav-link:focus { background: var(--hw-color-border); color: var(--hw-color-text); }
+.hw-content-nav-link:focus:not([aria-current='location']) .hw-content-nav-marker { visibility: hidden; }
+.hw-content-nav-link:focus::before { visibility: hidden; }
+/* The reference suppresses focus outlines. Keep an unmistakable keyboard cue. */
+.hw-content-nav-link:focus-visible { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: -2px; }
+.hw-content-nav-link[aria-disabled='true'] { cursor: not-allowed; }
+.hw-content-nav-link[aria-disabled='true'] .hw-content-nav-label { color: var(--hw-color-on-disabled); }
+@media (min-width: 1200px) {
+  .hw-content-nav[data-sticky='true'] {
+    position: sticky; inset-block-start: var(--hw-content-nav-top, 145px);
+    max-block-size: calc(100dvh - var(--hw-content-nav-bottom-reserve, 165px)); overflow-y: auto;
+    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--hw-color-primary-subtle) transparent;
+  }
+}
+@media (forced-colors: active) {
+  .hw-content-nav-link, .hw-content-nav-label { color: LinkText; }
+  .hw-content-nav-link[aria-current='location'] .hw-content-nav-marker { background: Highlight; }
+  .hw-content-nav-link[aria-current='location'] { outline: 1px solid Highlight; outline-offset: -1px; }
+  .hw-content-nav-link:hover .hw-content-nav-marker { background: Highlight; }
+  .hw-content-nav-link:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
+  .hw-content-nav-link[aria-disabled='true'] .hw-content-nav-label { color: GrayText; }
+}

package/dist/date-picker.css

@@ -0,0 +1,50 @@
+/* Compact custom date field. Native input density and focus remain authoritative. */
+.hw-date-picker-control { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; inline-size: 100%; }
+.hw-date-picker-control > .hw-input { inline-size: 100%; min-inline-size: 0; padding-inline-end: 3rem; border-radius: var(--hw-radius-md); }
+.hw-date-picker-control > .hw-date-picker-trigger { position: absolute; inset-inline-end: 0.125rem; inset-block: 0.125rem; inline-size: 2.5rem; min-block-size: 0; padding: 0; margin: 0; border: 0; border-radius: var(--hw-radius-sm); background: transparent; color: var(--hw-color-text-muted); box-shadow: none; }
+.hw-date-picker-control > .hw-date-picker-trigger:hover:not(:disabled) { background: var(--hw-color-surface-muted); color: var(--hw-color-text); }
+.hw-date-picker-control > .hw-date-picker-trigger:focus-visible { outline-offset: -3px; }
+.hw-date-picker-trigger:disabled { cursor: not-allowed; }
+.hw-date-picker-icon { display: inline-block; inline-size: 1.5rem; block-size: 1.5rem; background: currentColor; -webkit-mask: var(--hw-date-picker-icon, url('./assets/icons/calendar-03.svg')) center / contain no-repeat; mask: var(--hw-date-picker-icon, url('./assets/icons/calendar-03.svg')) center / contain no-repeat; }
+.hw-date-picker > .hw-date-picker-control { flex: 0 0 100%; }
+
+/* Native radios retain keyboard behavior; the rectangle moves in logical order. */
+.hw-calendar-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; margin-block-end: var(--hw-space-3); border: 1px solid var(--hw-color-border-strong); border-radius: var(--hw-radius-sm); background: var(--hw-color-surface-muted); }
+.hw-calendar-switch::before { content: ''; position: absolute; z-index: -1; inset-block: 4px; inset-inline-start: 4px; inline-size: calc(50% - 4px); background: var(--hw-color-primary); border: 1px solid var(--hw-color-primary); border-radius: var(--hw-radius-sm); transition: inset-inline-start var(--hw-duration-fast) var(--hw-ease-standard); }
+.hw-calendar-switch[data-calendar='islamic-umalqura']::before { inset-inline-start: 50%; }
+.hw-calendar-switch > label { position: relative; display: flex; align-items: center; justify-content: center; min-inline-size: 0; min-block-size: var(--hw-control-height); padding: var(--hw-space-1) var(--hw-space-2); color: var(--hw-color-text); font-size: var(--hw-text-sm); line-height: var(--hw-leading-heading); text-align: center; cursor: pointer; }
+.hw-calendar-switch > label > input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
+.hw-calendar-switch > label:has(input:checked) { font-weight: var(--hw-weight-semibold); color: var(--hw-color-on-primary); }
+.hw-calendar-switch > label:has(input:focus-visible) { outline: 2px solid var(--hw-color-focus); outline-offset: -2px; border-radius: var(--hw-radius-sm); }
+.hw-calendar-switch > label:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
+@media (prefers-reduced-motion: reduce) { .hw-calendar-switch::before { transition: none; } }
+@media (forced-colors: active) {
+  .hw-date-picker-icon { forced-color-adjust: none; background: ButtonText; }
+  .hw-date-picker-trigger:disabled > .hw-date-picker-icon { background: GrayText; }
+  .hw-calendar-switch::before { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
+  .hw-calendar-switch > label:has(input:checked) > span { forced-color-adjust: none; color: HighlightText; }
+  .hw-calendar-switch > label:has(input:focus-visible) { outline-color: CanvasText; }
+}
+
+
+/* Compact chrome; retain 44px day targets and six week rows without layout shifts. */
+.hw-date-picker .hw-dialog { inline-size: min(24rem, calc(100vw - 2rem)); }
+.hw-date-picker .hw-dialog-header { padding: var(--hw-space-3) var(--hw-space-4) var(--hw-space-2); gap: var(--hw-space-2); }
+.hw-date-picker .hw-dialog-header > h2 { margin: 0; font-size: var(--hw-text-lg); }
+.hw-date-picker .hw-dialog-body { padding: 0 var(--hw-space-4) var(--hw-space-3); }
+.hw-date-picker .hw-dialog-footer:empty { display: none; }
+.hw-date-picker .hw-dialog-body > .hw-field { margin-block-end: 0; }
+.hw-calendar-options { margin-block-end: var(--hw-space-2); }
+.hw-calendar-options > .hw-calendar-switch { margin: 0; padding: 3px; }
+.hw-calendar-options > .hw-calendar-switch > label { min-block-size: 2.25rem; padding-block: var(--hw-space-1); }
+.hw-calendar :is(.hw-calendar-header, .hw-calendar-toolbar) { margin-block: 0 var(--hw-space-1); }
+.hw-calendar-heading { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; gap: var(--hw-space-1); min-inline-size: 0; }
+.hw-calendar-heading > :is(h3, span:not(.hw-calendar-info)) { margin: 0; font-size: var(--hw-text-md); font-weight: var(--hw-weight-semibold); line-height: var(--hw-leading-heading); }
+.hw-calendar-heading .hw-calendar-info, .hw-calendar-info > .hw-tooltip-anchor { position: static; }
+.hw-calendar-info { flex: none; display: inline-flex; color: var(--hw-color-text-muted); }
+.hw-calendar-info-icon { display: inline-grid; place-items: center; inline-size: 1rem; block-size: 1rem; border: 1px solid currentColor; border-radius: 50%; font: 600 0.6875rem/1 sans-serif; color: var(--hw-color-text-muted); cursor: help; }
+.hw-calendar-info [data-hw-tooltip-trigger] { font-size: 0; border: 0; }
+.hw-calendar-info [data-hw-tooltip-trigger]::before { content: ''; inline-size: 1rem; block-size: 1rem; background: currentColor; mask: url('./assets/icons/information-circle.svg') center / contain no-repeat; }
+.hw-calendar-info .hw-tooltip { inset-block-end: calc(100% + 4px); inset-inline: auto; left: 50%; transform: translateX(-50%); inline-size: 15rem; max-inline-size: calc(100vw - 4rem); white-space: normal; text-align: start; }
+.hw-calendar-info bdi { white-space: nowrap; font-variant-numeric: tabular-nums; }
+.hw-calendar-info[hidden] { display: none; }