@hawiyah/styles 0.0.0-stage → 0.2.1

package/dist/extended.css

@@ -0,0 +1,310 @@
+/* Extended native controls and platform compositions. These recipes never
+   provide interaction semantics on their own; use the native adapters. */
+:where(.hw-input-group, .hw-password-field, .hw-search-field, .hw-number-field,
+  .hw-range-slider, .hw-rating, .hw-tag-input, .hw-multi-select, .hw-calendar,
+  .hw-date-picker, .hw-file-dropzone, .hw-toggle-group, .hw-popover, .hw-menu,
+  .hw-drawer, .hw-toast-region, .hw-collapsible, .hw-tree-view, .hw-carousel,
+  .hw-description-list, .hw-stat, .hw-meter, .hw-avatar-group, .hw-data-table,
+  .hw-service-card, .hw-service-details, .hw-portal-header, .hw-portal-footer,
+  .hw-feedback, .hw-cookie-consent, .hw-notification-list) {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  color: var(--hw-color-text);
+  font-family: var(--hw-font-sans);
+  font-size: var(--hw-text-md);
+  line-height: var(--hw-leading-normal);
+}
+:where(.hw-link, .hw-icon-button, .hw-slider, .hw-calendar-day,
+  .hw-toggle-group button, .hw-menu-item, :is(.hw-tree-item, .hw-tree-view [role='treeitem']),
+  .hw-data-table th button, .hw-collapsible-trigger,
+  .hw-collapsible > summary, .hw-collapsible > button,
+  .hw-carousel button, .hw-portal-header a, .hw-portal-footer a,
+  .hw-file-dropzone input, .hw-notification a):focus-visible {
+  outline: var(--hw-focus-width) solid var(--hw-color-focus);
+  outline-offset: var(--hw-focus-offset);
+}
+
+/* Input compositions preserve native inputs, labels and form semantics. */
+.hw-input-group { display: flex; align-items: stretch; inline-size: 100%; }
+.hw-input-group > :where(.hw-input, .hw-select, input, select, .hw-field) { position: relative; flex: 1 1 0%; min-inline-size: 0; }
+.hw-input-group > :not(:first-child) { margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; }
+.hw-input-group > :not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
+.hw-input-group > :focus-visible, .hw-input-group > :focus-within { z-index: 1; }
+.hw-input-addon { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: var(--hw-space-2); padding-inline: var(--hw-space-3); border: 1px solid var(--hw-color-border-strong); border-radius: var(--hw-radius-md); background: var(--hw-color-surface-muted); color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); white-space: nowrap; }
+.hw-input-group > .hw-button { flex: none; }
+:is(.hw-password-field, .hw-search-field, .hw-date-picker):not(.hw-field) { display: flex; align-items: end; gap: var(--hw-space-2); }
+:is(.hw-password-field, .hw-search-field, .hw-date-picker) > :is(.hw-field, .hw-input) { flex: 1; min-inline-size: 0; }
+.hw-number-field input, input.hw-number-field { font-variant-numeric: tabular-nums; }
+.hw-slider, .hw-range-slider input[type='range'] { box-sizing: border-box; appearance: none; display: block; inline-size: 100%; min-inline-size: 0; block-size: var(--hw-control-height); margin: 0; padding: 0; border: 0; border-radius: var(--hw-radius-sm); background: transparent; color: var(--hw-color-primary); accent-color: var(--hw-color-primary); cursor: pointer; }
+:is(.hw-slider, .hw-range-slider input[type='range'])::-webkit-slider-runnable-track { block-size: 0.375rem; border: 1px solid var(--hw-color-border-strong); border-radius: var(--hw-radius-full); background: var(--hw-color-surface-muted); }
+:is(.hw-slider, .hw-range-slider input[type='range'])::-webkit-slider-thumb { appearance: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: -0.5rem; border: 2px solid var(--hw-color-surface); border-radius: 50%; background: var(--hw-color-primary); box-shadow: 0 0 0 1px var(--hw-color-primary); }
+:is(.hw-slider, .hw-range-slider input[type='range'])::-moz-range-track { block-size: 0.25rem; border: 1px solid var(--hw-color-border-strong); border-radius: var(--hw-radius-full); background: var(--hw-color-surface-muted); }
+:is(.hw-slider, .hw-range-slider input[type='range'])::-moz-range-progress { block-size: 0.375rem; border-radius: var(--hw-radius-full); background: var(--hw-color-primary); }
+:is(.hw-slider, .hw-range-slider input[type='range'])::-moz-range-thumb { inline-size: 1rem; block-size: 1rem; border: 2px solid var(--hw-color-surface); border-radius: 50%; background: var(--hw-color-primary); box-shadow: 0 0 0 1px var(--hw-color-primary); }
+:is(.hw-slider, .hw-range-slider input[type='range']):disabled { opacity: 0.5; cursor: not-allowed; }
+.hw-range-slider { display: grid; gap: var(--hw-density-gap); margin: 0; padding: 0; border: 0; }
+.hw-range-slider legend { padding: 0; margin-block-end: var(--hw-space-2); }
+.hw-range-slider :is(label, output) { font-size: var(--hw-text-sm); font-variant-numeric: tabular-nums; }
+.hw-range-slider output { display: block; color: var(--hw-color-text-muted); }
+.hw-rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-1); margin: 0; padding: 0; border: 0; }
+.hw-rating > legend { padding: 0; margin-block-end: var(--hw-space-2); }
+.hw-rating label { position: relative; display: inline-grid; place-items: center; min-inline-size: 2.5rem; min-block-size: var(--hw-control-height); border-radius: var(--hw-radius-sm); color: var(--hw-color-primary-text); font-size: 1.75rem; line-height: 1; cursor: pointer; }
+.hw-rating label input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.hw-rating label:has(input:focus-visible) { outline: var(--hw-focus-width) solid var(--hw-color-focus); outline-offset: 1px; }
+.hw-rating label > span[aria-hidden='true'] { color: var(--hw-color-text-muted); }
+.hw-rating label:is(:has(input:checked), :has(~ label input:checked)) { background: var(--hw-color-primary-subtle); }
+.hw-rating label:is(:has(input:checked), :has(~ label input:checked)) > span[aria-hidden='true'] { color: var(--hw-color-primary-text); }
+@media (hover: hover) {
+  .hw-rating:not([data-hw-readonly='true']):not([aria-readonly='true']):has(label:hover input:not(:disabled)) label { background: transparent; }
+  .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-text-muted); }
+  .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))) { background: var(--hw-color-primary-subtle); }
+  .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-primary-text); }
+}
+.hw-rating:is([data-hw-readonly='true'], [aria-readonly='true']) label { cursor: default; }
+.hw-rating label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
+.hw-rating > :is(.hw-hint, .hw-error) { flex-basis: 100%; }
+input.hw-pin-input, .hw-pin-input input:not([type='hidden']) { inline-size: min(100%, 23ch); min-block-size: var(--hw-control-height-lg); padding-inline: var(--hw-space-4); direction: ltr; font-family: var(--hw-font-mono); font-size: var(--hw-text-xl); font-variant-numeric: tabular-nums; letter-spacing: 0.6em; text-align: center; }
+.hw-pin-input[data-size='sm'] { min-block-size: var(--hw-control-height); font-size: var(--hw-text-md); }
+.hw-tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); min-block-size: var(--hw-control-height); padding: var(--hw-space-2); border: 1px solid var(--hw-color-border-strong); border-radius: var(--hw-radius-md); background: var(--hw-color-surface); }
+.hw-tag-input:focus-within { outline: 2px solid var(--hw-color-focus); outline-offset: -2px; border-color: var(--hw-color-primary); }
+.hw-tag-input:has([aria-invalid='true']) { border-color: var(--hw-color-danger); }
+.hw-tag-input > ul { display: contents; margin: 0; padding: 0; list-style: none; }
+.hw-tag-input > input:not([type='hidden']) { flex: 1 1 8rem; inline-size: auto; min-inline-size: min(100%, 8rem); min-block-size: 2rem; padding: var(--hw-space-1); border: 0; border-radius: var(--hw-radius-sm); background: transparent; }
+.hw-tag-input > input:focus-visible { outline: none; box-shadow: none; }
+.hw-tag-input:has(input:disabled) { background: var(--hw-color-disabled); }
+.hw-tag-input .hw-chip { max-inline-size: 100%; overflow-wrap: anywhere; }
+.hw-multi-select { display: grid; gap: var(--hw-space-3); margin: 0; padding: var(--hw-space-4); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); }
+.hw-multi-select > legend { padding-inline: var(--hw-space-1); }
+.hw-multi-select-options, .hw-multi-select > [role='group'] { position: relative; display: grid; gap: var(--hw-space-1); max-block-size: 16rem; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 3px; }
+.hw-multi-select-options > label { padding-inline: var(--hw-space-2); border-radius: var(--hw-radius-sm); font-size: var(--hw-text-sm); }
+.hw-multi-select-options > label:has(input:checked) { background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); }
+.hw-multi-select-options > label:hover:not(:has(input:disabled)) { background: var(--hw-color-surface-muted); }
+.hw-multi-select > p { margin: 0; font-size: var(--hw-text-sm); color: var(--hw-color-text-muted); }
+.hw-file-dropzone { 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); text-align: center; transition: background-color var(--hw-duration-fast), border-color var(--hw-duration-fast); }
+.hw-file-dropzone p { max-inline-size: 100%; margin: 0; overflow-wrap: anywhere; }
+.hw-file-dropzone > :is(svg, .hw-file-dropzone-icon) { color: var(--hw-color-primary); }
+.hw-file-dropzone input[type='file'] { max-inline-size: 100%; font-size: var(--hw-text-sm); }
+.hw-file-dropzone :is(.hw-hint, [role='status']) { color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }
+.hw-file-dropzone:focus-within, .hw-file-dropzone[data-dragging='true'], .hw-file-dropzone[data-state='dragging'] { border-color: var(--hw-color-primary); background: var(--hw-color-primary-subtle); }
+.hw-file-dropzone[data-state='error'], .hw-file-dropzone:has([aria-invalid='true']) { border-color: var(--hw-color-danger); }
+.hw-file-dropzone:has(input:disabled) { border-style: solid; background: var(--hw-color-disabled); color: var(--hw-color-on-disabled); }
+
+/* Calendar has seven stable columns and no fixed pixel width assumption. */
+.hw-calendar { inline-size: min(100%, 23rem); padding: var(--hw-space-4); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); }
+.hw-calendar-header, .hw-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--hw-space-2); margin-block-end: var(--hw-space-3); }
+:is(.hw-calendar-header, .hw-calendar-toolbar) > :is(h2, h3, span, strong) { flex: 1; min-inline-size: 0; margin: 0; font-size: var(--hw-text-md); font-weight: var(--hw-weight-semibold); line-height: var(--hw-leading-heading); text-align: center; overflow-wrap: anywhere; }
+:is(.hw-calendar-header, .hw-calendar-toolbar) .hw-button { min-inline-size: 2.75rem; min-block-size: 2.75rem; max-inline-size: 32%; padding: var(--hw-space-1) var(--hw-space-2); font-size: var(--hw-text-sm); overflow-wrap: anywhere; }
+.hw-calendar :is(.hw-calendar-prev, .hw-calendar-next) { flex: none; inline-size: 2.75rem; max-inline-size: 2.75rem; padding: 0; gap: 0; font-size: 0; }
+.hw-calendar :is(.hw-calendar-prev, .hw-calendar-next)::before { content: ''; display: block; inline-size: 1.5rem; block-size: 1.5rem; background-color: currentColor; -webkit-mask: var(--hw-calendar-arrow) center / contain no-repeat; mask: var(--hw-calendar-arrow) center / contain no-repeat; }
+.hw-calendar-prev { --hw-calendar-arrow: url('./assets/icons/arrow-left-01.svg'); }
+.hw-calendar-next { --hw-calendar-arrow: url('./assets/icons/arrow-right-01.svg'); }
+.hw-calendar :is(.hw-calendar-prev, .hw-calendar-next)::before { --_hw-mirror: var(--_hw-rtl-only) scaleX(-1); transform: var(--_hw-mirror, none); }
+@media (forced-colors: active) {
+  .hw-calendar :is(.hw-calendar-prev, .hw-calendar-next)::before { forced-color-adjust: none; background-color: ButtonText; }
+  .hw-calendar :is(.hw-calendar-prev, .hw-calendar-next):disabled::before { background-color: GrayText; }
+}
+.hw-calendar-grid, .hw-calendar > table { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0.125rem; }
+:is(.hw-calendar-grid, .hw-calendar > table) :is(th, td) { padding: 0; text-align: center; vertical-align: middle; }
+:is(.hw-calendar-grid, .hw-calendar > table) th, .hw-calendar-weekday { padding-block: var(--hw-space-2); color: var(--hw-color-text-muted); font-size: var(--hw-text-xs); font-weight: var(--hw-weight-medium); white-space: nowrap; }
+.hw-calendar-day { position: relative; box-sizing: border-box; display: inline-grid; place-items: center; inline-size: 100%; min-block-size: 2.75rem; padding: var(--hw-space-1); border: 1px solid transparent; border-radius: var(--hw-radius-sm); background: transparent; color: var(--hw-color-text); font: inherit; font-size: var(--hw-text-md); font-variant-numeric: tabular-nums; cursor: pointer; }
+.hw-calendar-day:hover:not(:disabled, [aria-disabled='true']) { background: var(--hw-color-surface-muted); }
+.hw-calendar-day[data-outside='true'], .hw-calendar-day[data-outside=''] { color: var(--hw-color-text-subtle); }
+.hw-calendar-day:is([data-today='true'], [data-today=''], [aria-current='date']) { border-color: var(--hw-color-primary); font-weight: var(--hw-weight-semibold); }
+.hw-calendar-day:is([aria-selected='true'], [data-selected='true']), [aria-selected='true'] > .hw-calendar-day { background: var(--hw-color-primary); color: var(--hw-color-on-primary); font-weight: var(--hw-weight-semibold); }
+.hw-calendar-day:is([aria-selected='true'], [data-selected='true']):hover:not(:disabled), [aria-selected='true'] > .hw-calendar-day:hover:not(:disabled) { background: var(--hw-color-primary-hover); }
+.hw-calendar-day:disabled { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
+.hw-calendar-day[aria-disabled='true'] { cursor: default; }
+.hw-calendar-day:focus-visible { z-index: 1; outline-offset: -3px; }
+.hw-date-picker:not(.hw-field) { flex-wrap: wrap; }
+.hw-date-picker > :is(.hw-input-group, .hw-date-picker-value, .hw-error) { flex: 0 0 100%; min-inline-size: 0; }
+.hw-date-picker-value { overflow-wrap: anywhere; }
+.hw-date-picker .hw-dialog { inline-size: min(26rem, calc(100vw - 2rem)); white-space: normal; }
+.hw-date-picker .hw-dialog-header { align-items: center; }
+.hw-date-picker .hw-dialog-header > h2 { min-inline-size: 0; overflow-wrap: anywhere; }
+.hw-date-picker .hw-dialog-header > .hw-button { flex: none; min-inline-size: 2.75rem; min-block-size: 2.75rem; }
+.hw-date-picker .hw-dialog .hw-calendar { inline-size: 100%; margin-inline: auto; padding: 0; border: 0; background: transparent; }
+.hw-calendar-system { display: grid; gap: var(--hw-space-1); margin-block-end: var(--hw-space-3); }
+.hw-calendar-range { display: grid; gap: var(--hw-space-1); text-align: center; }
+.hw-calendar-range > bdi { white-space: nowrap; }
+.hw-date-picker .hw-dialog-body > .hw-field { margin-block-end: var(--hw-space-3); }
+@media (max-width: 25rem) {
+  .hw-date-picker :is(.hw-dialog-header, .hw-dialog-body) { padding-inline: var(--hw-space-3); }
+}
+
+/* Selection, disclosure, overlays and live feedback. */
+.hw-toggle-group { display: inline-flex; flex-wrap: wrap; gap: var(--hw-space-1); max-inline-size: 100%; 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-muted); }
+.hw-toggle-group > legend { padding-inline: var(--hw-space-1); font-size: var(--hw-text-sm); font-weight: var(--hw-weight-semibold); }
+.hw-toggle-group > :is(button, label) { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--hw-space-2); 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-sm); 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-toggle-group > label input { position: absolute; inline-size: 1px; block-size: 1px; clip-path: inset(50%); }
+.hw-toggle-group > label:has(input:focus-visible) { outline: var(--hw-focus-width) solid var(--hw-color-focus); outline-offset: 1px; }
+.hw-toggle-group > :is([aria-pressed='true'], label:has(input:checked)) { border-color: var(--hw-color-border); background: var(--hw-color-surface); color: var(--hw-color-primary-text); box-shadow: var(--hw-shadow-sm); }
+.hw-toggle-group > :is(button, label):hover:not(:disabled, :has(input:disabled)) { color: var(--hw-color-primary-text); }
+.hw-toggle-group > :is(button:disabled, label:has(input:disabled)) { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+.hw-toggle-group[data-variant='outline'] { gap: 0; padding: 0; background: var(--hw-color-surface); border-color: var(--hw-color-border-strong); }
+.hw-toggle-group[data-variant='outline'] > :is(button, label) { border-radius: 0; border: 0; }
+.hw-toggle-group[data-variant='outline'] > :is(button, label) + :is(button, label) { border-inline-start: 1px solid var(--hw-color-border); }
+.hw-toggle-group[data-variant='outline'] > :is([aria-pressed='true'], label:has(input:checked)) { background: var(--hw-color-primary-subtle); box-shadow: none; }
+.hw-popover, .hw-menu { position: relative; display: inline-block; max-inline-size: 100%; }
+.hw-popover > :is([data-hw-panel], .hw-popover-content, .hw-popover-panel, [data-hw-popover-panel]), .hw-menu > :is([role='menu'], [data-hw-panel], .hw-menu-content) { position: absolute; z-index: var(--hw-z-popover); inset-block-start: calc(100% + var(--hw-space-2)); inset-inline-start: 0; inline-size: max-content; max-inline-size: min(24rem, calc(100vw - 2rem)); margin: 0; padding: var(--hw-space-4); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface-raised); color: var(--hw-color-text); box-shadow: var(--hw-shadow-md); }
+.hw-popover[data-side='top'] > :is([data-hw-panel], .hw-popover-content, .hw-popover-panel), .hw-menu[data-side='top'] > :is([role='menu'], [data-hw-panel], .hw-menu-content) { inset-block-start: auto; inset-block-end: calc(100% + var(--hw-space-2)); }
+:is(.hw-popover, .hw-menu)[data-align='end'] > :is([data-hw-panel], .hw-popover-content, .hw-popover-panel, [role='menu'], .hw-menu-content) { inset-inline-start: auto; inset-inline-end: 0; }
+.hw-popover-content > :first-child { margin-block-start: 0; }.hw-popover-content > :last-child { margin-block-end: 0; }
+.hw-menu > :is([role='menu'], [data-hw-panel], .hw-menu-content) { min-inline-size: 12rem; padding: var(--hw-space-1); border-radius: var(--hw-radius-md); list-style: none; }
+.hw-menu-item, .hw-menu [role='menuitem'], .hw-menu [role='menuitemcheckbox'], .hw-menu [role='menuitemradio'] { display: flex; align-items: center; gap: var(--hw-space-3); inline-size: 100%; min-block-size: var(--hw-control-height-sm); padding: var(--hw-space-2) var(--hw-space-3); border: 0; border-radius: var(--hw-radius-sm); background: transparent; color: var(--hw-color-text); font: inherit; font-size: var(--hw-text-sm); text-align: start; text-decoration: none; cursor: pointer; }
+.hw-menu-item:hover:not(:disabled, [aria-disabled='true']), .hw-menu [role^='menuitem']:hover:not(:disabled, [aria-disabled='true']), .hw-menu [role^='menuitem']:focus-visible { background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); }
+.hw-menu :is([role='separator'], hr) { margin-block: var(--hw-space-1); border: 0; border-block-start: 1px solid var(--hw-color-border); }
+.hw-menu :is([aria-disabled='true'], :disabled) { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+.hw-menu-item[data-tone='danger'] { color: var(--hw-color-danger); }
+.hw-drawer { position: fixed; inset-block: 0; inset-inline: auto 0; inline-size: min(28rem, calc(100vw - 1rem)); max-inline-size: none; block-size: 100dvh; max-block-size: 100dvh; margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--hw-color-border); border-radius: 0; background: var(--hw-color-surface-raised); color: var(--hw-color-text); box-shadow: var(--hw-shadow-lg); }
+.hw-drawer::backdrop { background: var(--hw-color-overlay); backdrop-filter: blur(3px); }
+.hw-drawer[data-side='start'] { inset-inline-start: 0; inset-inline-end: auto; }
+.hw-drawer[data-side='bottom'] { inset-block-start: auto; inset-block-end: 0; inset-inline: 0; inline-size: 100%; block-size: auto; max-block-size: 85dvh; border-start-start-radius: var(--hw-radius-xl); border-start-end-radius: var(--hw-radius-xl); }
+.hw-drawer[open] { animation: hw-drawer-in var(--hw-duration-normal) var(--hw-ease-standard); }
+.hw-drawer > :is(header, .hw-drawer-header) { display: flex; align-items: start; justify-content: space-between; gap: var(--hw-space-4); padding: var(--hw-space-6); border-block-end: 1px solid var(--hw-color-border); }
+.hw-drawer-body { padding: var(--hw-space-6); }.hw-drawer-footer { display: flex; flex-wrap: wrap; gap: var(--hw-space-3); padding: var(--hw-space-5) var(--hw-space-6); border-block-start: 1px solid var(--hw-color-border); }
+@keyframes hw-drawer-in { from { opacity: 0; translate: 0 0.5rem; } to { opacity: 1; translate: 0; } }
+.hw-toast-region { position: fixed; z-index: var(--hw-z-toast); inset-block-end: var(--hw-space-5); inset-inline-end: var(--hw-space-5); display: grid; gap: var(--hw-space-3); inline-size: min(25rem, calc(100vw - 2.5rem)); max-block-size: calc(100dvh - 2.5rem); overflow: auto; padding: var(--hw-space-1); list-style: none; }
+.hw-toast-region[data-position='top-end'], .hw-toast-region[data-position='top-start'] { inset-block-start: var(--hw-space-5); inset-block-end: auto; }
+.hw-toast-region[data-position='top-start'], .hw-toast-region[data-position='bottom-start'] { inset-inline-start: var(--hw-space-5); inset-inline-end: auto; }
+.hw-toast-region[data-variant='inline'] { position: static; inline-size: 100%; max-block-size: none; overflow: visible; padding: 0; }
+.hw-toast { display: grid; grid-template-columns: minmax(0, 1fr) auto; 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-color-primary); border-radius: var(--hw-radius-md); background: var(--hw-color-surface-raised); color: var(--hw-color-text); box-shadow: var(--hw-shadow-md); font-size: var(--hw-text-sm); }
+.hw-toast > :is(.hw-toast-content, div) { flex: 1; min-inline-size: 0; }.hw-toast :is(h2, h3, p) { margin: 0; font-size: inherit; }.hw-toast :is(h2, h3, strong) { font-weight: var(--hw-weight-semibold); }.hw-toast p { color: var(--hw-color-text-muted); }.hw-toast [data-hw-dismiss] { margin-inline-start: auto; }
+.hw-toast[data-tone='neutral'] { border-inline-start-color: var(--hw-color-text-muted); }
+.hw-toast[data-tone='danger'] { border-inline-start-color: var(--hw-color-danger); }.hw-toast[data-tone='warning'] { border-inline-start-color: var(--hw-color-warning); }.hw-toast[data-tone='success'] { border-inline-start-color: var(--hw-color-success); }.hw-toast[data-tone='info'] { border-inline-start-color: var(--hw-color-info); }
+.hw-collapsible { border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-md); background: var(--hw-color-surface); }
+.hw-collapsible > :is(summary, .hw-collapsible-trigger, [data-hw-trigger]) { display: flex; align-items: center; justify-content: space-between; gap: var(--hw-space-3); inline-size: 100%; min-block-size: var(--hw-control-height); padding: var(--hw-space-3) var(--hw-space-4); border: 0; border-radius: var(--hw-radius-md); background: transparent; color: var(--hw-color-text); font: inherit; font-weight: var(--hw-weight-medium); text-align: start; list-style: none; cursor: pointer; }
+.hw-collapsible > summary::-webkit-details-marker { display: none; }
+.hw-collapsible > summary::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-collapsible[open] > summary::after { mask-image: url('./assets/icons/minus-sign.svg'); }
+.hw-collapsible-content, .hw-collapsible > :is([data-hw-panel], div, p, section) { padding: var(--hw-space-4); border-block-start: 1px solid var(--hw-color-border); }
+.hw-tree-view, .hw-tree-view [role='group'] { margin: 0; padding: 0; list-style: none; }
+.hw-tree-view { padding: var(--hw-space-2); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-md); background: var(--hw-color-surface); }
+.hw-tree-view [role='group'] { margin-inline-start: var(--hw-space-3); padding-inline-start: var(--hw-space-3); border-inline-start: 1px solid var(--hw-color-border); }
+:is(.hw-tree-item, .hw-tree-view [role='treeitem']) { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--hw-space-2); min-block-size: var(--hw-control-height-sm); padding: var(--hw-space-2); border-radius: var(--hw-radius-sm); color: var(--hw-color-text); font-size: var(--hw-text-sm); cursor: pointer; }
+:is(.hw-tree-item, .hw-tree-view [role='treeitem'])[aria-selected='true'] { background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); }
+:is(.hw-tree-item, .hw-tree-view [role='treeitem'])[aria-disabled='true'] { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+:is(.hw-tree-item, .hw-tree-view [role='treeitem']):focus-visible { outline-offset: -2px; }:is(.hw-tree-item, .hw-tree-view [role='treeitem']) > [role='group'] { margin-block-start: var(--hw-space-2); background: var(--hw-color-surface); color: var(--hw-color-text); }
+.hw-tree-row { display: flex; align-items: center; gap: var(--hw-space-2); }:is(.hw-tree-item, .hw-tree-view [role='treeitem']) button { color: inherit; }
+.hw-carousel { position: relative; min-inline-size: 0; }.hw-carousel-viewport, .hw-carousel-slides { min-inline-size: 0; overflow: hidden; border-radius: var(--hw-radius-lg); }
+.hw-carousel-slide, .hw-carousel > [role='group'] { min-inline-size: 0; padding: var(--hw-space-5); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); }
+.hw-carousel-slide > :is(img, video) { display: block; max-inline-size: 100%; block-size: auto; border-radius: var(--hw-radius-md); }
+.hw-carousel-controls, .hw-carousel > .hw-inline { display: flex; align-items: center; justify-content: space-between; gap: var(--hw-space-3); margin-block-start: var(--hw-space-3); }
+.hw-carousel-status { color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); font-variant-numeric: tabular-nums; }
+
+/* Composable content; visual variants do not change behavior. */
+.hw-link { border-radius: 2px; color: var(--hw-color-primary-text); font-family: var(--hw-font-sans); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
+.hw-link:hover { text-decoration-thickness: 2px; }.hw-link[aria-current] { font-weight: var(--hw-weight-semibold); }.hw-link[data-variant='subtle'] { color: var(--hw-color-text-muted); text-decoration: none; }.hw-link[data-variant='subtle']:hover { color: var(--hw-color-primary-text); text-decoration: underline; }.hw-link[data-variant='standalone'] { display: inline-flex; align-items: center; gap: var(--hw-space-2); font-weight: var(--hw-weight-medium); text-decoration: none; }.hw-link[aria-disabled='true'] { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+.hw-icon-button { display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: var(--hw-control-height); min-block-size: var(--hw-control-height); padding: var(--hw-space-2); }
+.hw-icon-button[data-size='sm'] { inline-size: var(--hw-control-height-sm); min-block-size: var(--hw-control-height-sm); }.hw-icon-button[data-size='lg'] { inline-size: var(--hw-control-height-lg); min-block-size: var(--hw-control-height-lg); }.hw-icon-button > span { display: inline-flex; align-items: center; justify-content: center; }.hw-icon-button[aria-pressed='true'] { background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); }
+.hw-button-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); max-inline-size: 100%; }.hw-button-group[data-orientation='vertical'] { flex-direction: column; align-items: stretch; }.hw-button-group[data-variant='attached'] { gap: 0; }.hw-button-group[data-variant='attached'] > .hw-button + .hw-button { margin-inline-start: -1px; }.hw-button-group[data-variant='attached'] > .hw-button:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }.hw-button-group[data-variant='attached'] > .hw-button:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }.hw-button-group > .hw-button:focus-visible { position: relative; z-index: 1; }
+.hw-chip[data-tone='success'] { --hw-tone: var(--hw-color-success); --hw-tone-bg: var(--hw-color-success-subtle); }.hw-chip[data-tone='warning'] { --hw-tone: var(--hw-color-warning); --hw-tone-bg: var(--hw-color-warning-subtle); }.hw-chip[data-tone='danger'] { --hw-tone: var(--hw-color-danger); --hw-tone-bg: var(--hw-color-danger-subtle); }.hw-chip[data-tone='info'] { --hw-tone: var(--hw-color-info); --hw-tone-bg: var(--hw-color-info-subtle); }
+:is(.hw-badge, .hw-chip)[data-variant='outline'] { border-color: currentColor; background: transparent; }.hw-badge[data-variant='dot']::before { content: ''; inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background: currentColor; }.hw-chip[data-size='sm'] { min-block-size: 1.75rem; padding-inline: var(--hw-space-2); }.hw-chip[data-size='lg'] { min-block-size: var(--hw-control-height); font-size: var(--hw-text-sm); }
+.hw-description-list { display: grid; gap: 0; margin: 0; }.hw-description-list > div { min-inline-size: 0; padding-block: var(--hw-space-4); border-block-end: 1px solid var(--hw-color-border); }.hw-description-list dt { margin: 0 0 var(--hw-space-1); color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }.hw-description-list dd { margin: 0; overflow-wrap: anywhere; color: var(--hw-color-text); font-weight: var(--hw-weight-medium); }
+.hw-description-list[data-variant='horizontal'] > div { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 2fr); align-items: baseline; gap: var(--hw-space-5); }.hw-description-list[data-variant='horizontal'] dt { margin: 0; }.hw-description-list[data-variant='compact'] > div { padding-block: var(--hw-space-2); }
+.hw-stat { position: relative; display: grid; gap: var(--hw-space-2); padding: var(--hw-space-5); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); }.hw-stat-label { color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }.hw-stat-value { font-size: var(--hw-text-3xl); font-weight: var(--hw-weight-semibold); font-variant-numeric: tabular-nums; line-height: var(--hw-leading-heading); }.hw-stat-description { margin: 0; color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }.hw-stat[data-tone='success'] .hw-stat-value { color: var(--hw-color-success); }.hw-stat[data-tone='danger'] .hw-stat-value { color: var(--hw-color-danger); }.hw-stat[data-variant='plain'] { padding: 0; border: 0; border-radius: 0; background: transparent; }
+.hw-timeline-item h3 { margin-block: 0 var(--hw-space-1); font-size: var(--hw-text-md); font-weight: var(--hw-weight-medium); }.hw-timeline-item p { margin: 0; color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }.hw-timeline > li[data-state='current']::before { background: var(--hw-color-primary); box-shadow: 0 0 0 3px var(--hw-color-primary-subtle); }
+.hw-meter { display: grid; gap: var(--hw-space-2); font-size: var(--hw-text-sm); }.hw-meter meter, meter.hw-meter { display: block; inline-size: 100%; block-size: 0.75rem; border: 0; border-radius: var(--hw-radius-full); background: var(--hw-color-surface-muted); accent-color: var(--hw-color-primary); }.hw-meter meter::-webkit-meter-bar, meter.hw-meter::-webkit-meter-bar { block-size: 0.5rem; border: 0; border-radius: var(--hw-radius-full); background: var(--hw-color-surface-muted); }.hw-meter meter::-webkit-meter-optimum-value, meter.hw-meter::-webkit-meter-optimum-value { border-radius: var(--hw-radius-full); background: var(--hw-color-success); }.hw-meter meter::-webkit-meter-suboptimum-value, meter.hw-meter::-webkit-meter-suboptimum-value { background: var(--hw-color-warning); }.hw-meter meter::-webkit-meter-even-less-good-value, meter.hw-meter::-webkit-meter-even-less-good-value { background: var(--hw-color-danger); }.hw-meter meter::-moz-meter-bar, meter.hw-meter::-moz-meter-bar { border-radius: var(--hw-radius-full); background: var(--hw-color-primary); }
+.hw-avatar-group { display: inline-flex; align-items: center; padding-inline-start: var(--hw-space-2); }.hw-avatar-group > * { position: relative; margin-inline-start: calc(-1 * var(--hw-space-2)); border-radius: var(--hw-radius-full); }.hw-avatar-group .hw-avatar { border: 2px solid var(--hw-color-surface); }.hw-avatar-group > :focus-within { z-index: 1; }
+.hw-data-table, .hw-table-wrap { position: relative; }.hw-data-table th button { display: inline-flex; align-items: center; gap: var(--hw-space-2); min-block-size: 2rem; margin: -0.25rem; padding: 0.25rem; border: 0; border-radius: var(--hw-radius-sm); background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: start; cursor: pointer; }.hw-data-table th button:hover { color: var(--hw-color-primary-text); }.hw-data-table [aria-sort='ascending'], .hw-data-table [aria-sort='descending'] { color: var(--hw-color-primary-text); }
+.hw-table[data-variant='striped'] tbody tr:nth-child(even) { background: var(--hw-color-canvas); }.hw-table[data-variant='bordered'] :is(th, td) + :is(th, td) { border-inline-start: 1px solid var(--hw-color-border); }.hw-table[data-size='sm'] :is(th, td) { padding-block: var(--hw-space-2); font-size: var(--hw-text-xs); }.hw-table[data-size='lg'] :is(th, td) { padding-block: var(--hw-space-5); }
+
+/* Configurable Saudi-platform patterns. Brand and trust content stay caller-owned. */
+.hw-service-card { display: flex; flex-direction: column; align-items: start; gap: var(--hw-space-3); padding: var(--hw-space-5); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); transition: border-color var(--hw-duration-normal), box-shadow var(--hw-duration-normal); }
+.hw-service-card-icon { display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-block-end: var(--hw-space-2); border-radius: var(--hw-radius-md); background: var(--hw-color-primary-subtle); color: var(--hw-color-primary-text); }.hw-service-card-icon:empty { display: none; }
+.hw-service-card h3, .hw-service-card h2 { margin: 0; font-size: var(--hw-text-lg); font-weight: var(--hw-weight-semibold); line-height: var(--hw-leading-heading); }.hw-service-card h3 a, .hw-service-card h2 a { color: inherit; text-decoration: none; }.hw-service-card h3 a:hover, .hw-service-card h2 a:hover { color: var(--hw-color-primary-text); text-decoration: underline; }
+.hw-service-card > p { margin: 0; color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }.hw-service-card > .hw-badge { flex: none; }.hw-service-card > p:not(.hw-badge) { flex: 1; }.hw-service-card-meta { display: flex; flex-wrap: wrap; gap: var(--hw-space-3); inline-size: 100%; margin-block: var(--hw-space-2); color: var(--hw-color-text-muted); font-size: var(--hw-text-xs); }.hw-service-card-meta > span + span { padding-inline-start: var(--hw-space-3); border-inline-start: 1px solid var(--hw-color-border); }.hw-service-card > .hw-button { align-self: stretch; margin-block-start: auto; }
+.hw-service-card[data-variant='featured'] { border-color: var(--hw-color-primary); box-shadow: inset 0 3px 0 var(--hw-color-primary); }.hw-service-card[data-variant='compact'] { gap: var(--hw-space-2); padding: var(--hw-space-4); }.hw-service-card:focus-within { border-color: var(--hw-color-primary); }
+.hw-service-details { display: grid; gap: var(--hw-space-5); }.hw-service-details > header :is(h1, h2) { margin: 0 0 var(--hw-space-3); font-size: var(--hw-text-2xl); font-weight: var(--hw-weight-semibold); line-height: var(--hw-leading-heading); }.hw-service-details > header p { margin: 0; max-inline-size: 65ch; color: var(--hw-color-text-muted); }.hw-service-details > h3 { margin: 0; font-size: var(--hw-text-lg); }.hw-service-details > ul { margin: 0; padding-inline-start: var(--hw-space-6); color: var(--hw-color-text-muted); }.hw-service-details > ul li + li { margin-block-start: var(--hw-space-2); }
+.hw-portal-header { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--hw-space-5); min-block-size: 5rem; padding: var(--hw-space-4) clamp(1rem, 4vw, 3rem); border-block-end: 1px solid var(--hw-color-border); background: var(--hw-color-surface); }
+.hw-portal-brand { display: inline-flex; align-items: center; gap: var(--hw-space-3); flex: none; color: var(--hw-color-text); font-size: var(--hw-text-xl); font-weight: var(--hw-weight-semibold); text-decoration: none; }.hw-portal-brand :is(img, svg) { max-inline-size: 10rem; max-block-size: 3rem; }.hw-portal-header nav { display: flex; flex: 1; flex-wrap: wrap; gap: var(--hw-space-4); }.hw-portal-header nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-4); margin: 0; padding: 0; list-style: none; }.hw-portal-header nav a { display: inline-flex; align-items: center; min-block-size: var(--hw-control-height); color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); text-decoration: none; }.hw-portal-header nav a[aria-current='page'] { color: var(--hw-color-primary-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.6em; }.hw-portal-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); margin-inline-start: auto; }.hw-portal-menu-toggle { display: none; }.hw-portal-header[data-variant='sticky'] { position: sticky; z-index: var(--hw-z-sticky); inset-block-start: 0; }
+.hw-skip-link { position: absolute; z-index: var(--hw-z-popover); inset-inline-start: var(--hw-space-4); inset-block-start: var(--hw-space-2); padding: var(--hw-space-2) var(--hw-space-4); transform: translateY(-200%); border-radius: var(--hw-radius-sm); background: var(--hw-color-primary); color: var(--hw-color-on-primary); font-weight: var(--hw-weight-medium); }.hw-skip-link:focus { transform: none; }
+.hw-portal-footer { display: flex; flex-wrap: wrap; gap: var(--hw-space-8); justify-content: space-between; padding: var(--hw-space-8) clamp(1rem, 4vw, 3rem); border-block-start: 1px solid var(--hw-color-border); background: var(--hw-color-canvas); color: var(--hw-color-text); }.hw-portal-footer > div { flex: 1 1 16rem; }.hw-portal-footer strong { font-size: var(--hw-text-lg); }.hw-portal-footer nav { display: flex; flex-wrap: wrap; gap: var(--hw-space-4); }.hw-portal-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--hw-space-4); margin: 0; padding: 0; list-style: none; }.hw-portal-footer nav a { font-size: var(--hw-text-sm); }.hw-portal-footer > p { flex-basis: 100%; margin: 0; padding-block-start: var(--hw-space-4); border-block-start: 1px solid var(--hw-color-border); color: var(--hw-color-text-muted); font-size: var(--hw-text-xs); }
+.hw-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-4); padding: var(--hw-space-5); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-canvas); }.hw-feedback > p { margin: 0; font-size: var(--hw-text-sm); }.hw-feedback > p:first-child { flex: 1 1 12rem; font-weight: var(--hw-weight-medium); }.hw-feedback [aria-pressed='true'] { outline: 2px solid var(--hw-color-primary); outline-offset: 3px; }.hw-feedback [role='status'] { flex-basis: 100%; color: var(--hw-color-primary-text); }.hw-feedback [role='status']:empty { flex-basis: 0; }
+.hw-cookie-consent { display: grid; gap: var(--hw-space-3); padding: var(--hw-space-5); border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface-raised); box-shadow: var(--hw-shadow-md); }.hw-cookie-consent h2 { margin: 0; font-size: var(--hw-text-lg); font-weight: var(--hw-weight-semibold); }.hw-cookie-consent p { margin: 0; max-inline-size: 75ch; color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }.hw-cookie-consent > .hw-button-group { margin-block-start: var(--hw-space-2); }.hw-cookie-consent[data-variant='banner'] { position: fixed; z-index: var(--hw-z-toast); inset-inline: var(--hw-space-4); inset-block-end: var(--hw-space-4); max-inline-size: var(--hw-content-max); margin-inline: auto; }
+.hw-notification-list { border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-lg); background: var(--hw-color-surface); }.hw-notification-list > ul { margin: 0; padding: 0; list-style: none; }.hw-notification, :is(.hw-notification-list > ul > li, .hw-notification-list > li) { position: relative; display: flex; align-items: start; gap: var(--hw-space-3); padding: var(--hw-space-4); }.hw-notification + .hw-notification { border-block-start: 1px solid var(--hw-color-border); }.hw-notification > div { flex: 1; min-inline-size: 0; }.hw-notification :is(strong, a) { font-size: var(--hw-text-sm); font-weight: var(--hw-weight-semibold); }.hw-notification p { margin-block: var(--hw-space-1); color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }.hw-notification :is(time, div > span:not(.hw-sr-only)) { color: var(--hw-color-text-subtle); font-size: var(--hw-text-xs); }.hw-notification[data-unread='true'] { background: var(--hw-color-primary-subtle); }.hw-notification[data-unread='true']::before { content: ''; flex: none; inline-size: 0.375rem; block-size: 0.375rem; margin-block-start: 0.6rem; border-radius: 50%; background: var(--hw-color-primary); }.hw-notification:first-child { border-start-start-radius: var(--hw-radius-lg); border-start-end-radius: var(--hw-radius-lg); }.hw-notification:last-child { border-end-start-radius: var(--hw-radius-lg); border-end-end-radius: var(--hw-radius-lg); }
+
+/* Alternative native adapter anatomy uses the same visual contract. */
+.hw-popover-panel > :first-child { margin-block-start: 0; }.hw-popover-panel > :last-child { margin-block-end: 0; }
+.hw-popover-panel > :is(h2, h3) { margin-block-end: var(--hw-space-3); font-size: var(--hw-text-lg); font-weight: var(--hw-weight-semibold); }
+.hw-toggle-group > :is(.hw-hint, .hw-error) { flex-basis: 100%; margin-block: var(--hw-space-2) 0; }
+.hw-pin-slots { display: flex; flex-wrap: wrap; gap: var(--hw-space-2); direction: ltr; }
+.hw-pin-slots > span { display: grid; place-items: center; inline-size: 2.5rem; min-block-size: 2.75rem; border: 1px solid var(--hw-color-border); border-radius: var(--hw-radius-md); background: var(--hw-color-surface-muted); font-family: var(--hw-font-mono); font-size: var(--hw-text-lg); }
+.hw-tag-input.hw-field > :is(.hw-label, .hw-hint, .hw-error) { flex-basis: 100%; }
+.hw-tag-input > .hw-inline { gap: var(--hw-space-2); }
+.hw-tree-toggle { display: inline-grid; flex: none; place-items: center; min-inline-size: 1.75rem; min-block-size: 1.75rem; border-radius: var(--hw-radius-sm); color: var(--hw-color-text-muted); }
+:is(.hw-tree-item, .hw-tree-view [role='treeitem']) > [role='group'] { flex-basis: 100%; }
+.hw-carousel-controls > [role='status'], .hw-carousel > .hw-inline > [role='status'] { color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); text-align: center; }
+.hw-carousel-slide > :is(h2, h3) { margin-block: var(--hw-space-3) var(--hw-space-2); }.hw-carousel-slide > p { margin: 0; color: var(--hw-color-text-muted); }
+.hw-toast-region > :is([role='status'], [role='alert']) { display: grid; gap: var(--hw-space-3); }
+.hw-toast > :is(strong, h2, h3, p, div) { grid-column: 1; }
+.hw-toast > button { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
+.hw-stat dl, .hw-stat dd { margin: 0; }.hw-stat dt { margin-block-end: var(--hw-space-2); color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }.hw-stat > p, .hw-stat-trend { margin: 0; color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }
+.hw-service-card > :is(.hw-card-header, .hw-card-body, .hw-card-footer) { inline-size: 100%; padding: 0; }
+.hw-service-card > .hw-card-body { flex: 1; }
+.hw-service-card > .hw-card-header { justify-content: start; }
+.hw-service-card > .hw-card-footer { margin-block-start: auto; padding-block-start: var(--hw-space-4); }
+.hw-service-card .hw-card-body > p { margin: 0; color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }
+.hw-service-card .hw-card-body > ul { display: flex; flex-wrap: wrap; gap: var(--hw-space-3); margin-block: var(--hw-space-4) 0; padding: 0; list-style: none; color: var(--hw-color-text-muted); font-size: var(--hw-text-xs); }
+.hw-service-details > section > h3 { margin: 0; font-size: var(--hw-text-lg); }.hw-service-details > section > ul { padding-inline-start: var(--hw-space-6); color: var(--hw-color-text-muted); }
+.hw-portal-header-main { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hw-space-5); inline-size: 100%; min-inline-size: 0; }
+.hw-portal-notice { flex-basis: 100%; inline-size: 100%; padding-block-end: var(--hw-space-3); border-block-end: 1px solid var(--hw-color-border); color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }
+.hw-portal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); margin-inline-start: auto; }
+.hw-portal-footer > small { flex-basis: 100%; color: var(--hw-color-text-muted); font-size: var(--hw-text-xs); }.hw-portal-footer nav a { color: var(--hw-color-primary-text); text-underline-offset: 0.2em; }
+.hw-feedback > h2 { flex: 1 1 12rem; margin: 0; font-size: var(--hw-text-md); font-weight: var(--hw-weight-semibold); }
+.hw-feedback > div:not(.hw-button-group, .hw-inline, .hw-feedback-actions) { display: grid; gap: var(--hw-space-3); flex-basis: 100%; }
+.hw-notification-list > :is(h2, p) { margin: 0; padding: var(--hw-space-4); }.hw-notification-list > h2 { border-block-end: 1px solid var(--hw-color-border); font-size: var(--hw-text-lg); }
+:is(.hw-notification-list > ul > li, .hw-notification-list > li) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--hw-space-2) var(--hw-space-3); }
+:is(.hw-notification-list > ul > li, .hw-notification-list > li) + li { border-block-start: 1px solid var(--hw-color-border); }
+:is(.hw-notification-list > ul > li, .hw-notification-list > li) > :is(h3, p, time, div) { grid-column: 1; min-inline-size: 0; margin: 0; }
+:is(.hw-notification-list > ul > li, .hw-notification-list > li) > h3 { font-size: var(--hw-text-sm); font-weight: var(--hw-weight-semibold); }
+:is(.hw-notification-list > ul > li, .hw-notification-list > li) > :is(p, time) { color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }
+:is(.hw-notification-list > ul > li, .hw-notification-list > li) > button { grid-column: 2; max-inline-size: 12rem; align-self: start; }
+:is(.hw-notification-list > ul > li, .hw-notification-list > li) > .hw-badge { grid-column: 2; justify-self: start; }
+:is(.hw-notification-list > ul > li, .hw-notification-list > li):is([data-unread='true'], [data-read='false'], [data-state='unread']) { background: var(--hw-color-primary-subtle); }
+:is(.hw-notification-list > ul > li, .hw-notification-list > li):is([data-unread='true'], [data-read='false'], [data-state='unread']) :is(p, time, div > span:not(.hw-sr-only)) { color: var(--hw-color-primary-text); }
+.hw-notification[data-unread='true']::before { position: absolute; inset-inline-start: var(--hw-space-2); inset-block-start: var(--hw-space-4); }
+
+/* Shared variation knobs for established primitives. */
+.hw-button[data-variant='soft'] { --hw-button-bg: var(--hw-color-primary-subtle); --hw-button-fg: var(--hw-color-primary-text); --hw-button-hover: var(--hw-color-surface-muted); }.hw-button[data-variant='outline'] { --hw-button-bg: transparent; --hw-button-fg: var(--hw-color-primary-text); --hw-button-border: var(--hw-color-primary); --hw-button-hover: var(--hw-color-primary-subtle); }.hw-button[data-variant='link'] { --hw-button-bg: transparent; --hw-button-fg: var(--hw-color-primary-text); --hw-button-hover: transparent; padding-inline: var(--hw-space-1); text-decoration: underline; text-underline-offset: 0.25em; }
+:is(.hw-input, .hw-textarea, .hw-select)[data-size='sm'] { min-block-size: var(--hw-control-height-sm); padding-block: var(--hw-space-1); font-size: var(--hw-text-sm); }:is(.hw-input, .hw-textarea, .hw-select)[data-size='lg'] { min-block-size: var(--hw-control-height-lg); padding-inline: var(--hw-space-4); font-size: var(--hw-text-lg); }:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled'] { border-color: transparent; background: var(--hw-color-surface-muted); }:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:focus-visible { border-color: var(--hw-color-primary); }
+.hw-card[data-variant='flat'] { box-shadow: none; }.hw-card[data-variant='elevated'] { box-shadow: var(--hw-shadow-md); }.hw-card[data-variant='outlined'] { border-color: var(--hw-color-border-strong); box-shadow: none; }.hw-card[data-variant='ghost'] { border-color: transparent; background: transparent; box-shadow: none; }
+.hw-alert[data-variant='outline'] { background: transparent; border-color: var(--hw-tone); }.hw-alert[data-variant='minimal'] { padding-inline: 0; border: 0; background: transparent; }.hw-tabs[data-variant='pills'] .hw-tab-list { gap: var(--hw-space-2); padding: 3px; border: 0; }.hw-tabs[data-variant='pills'] .hw-tab { border-radius: var(--hw-radius-full); }.hw-tabs[data-variant='pills'] .hw-tab::after { display: none; }.hw-tabs[data-variant='pills'] .hw-tab[aria-selected='true'] { background: var(--hw-color-primary-subtle); }
+.hw-avatar[data-size='sm'] { inline-size: 2rem; block-size: 2rem; font-size: var(--hw-text-xs); }.hw-avatar[data-size='lg'] { inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--hw-text-lg); }.hw-avatar[data-size='xl'] { inline-size: 5rem; block-size: 5rem; font-size: var(--hw-text-2xl); }.hw-avatar img { inline-size: 100%; block-size: 100%; }.hw-avatar[data-variant='square'] { border-radius: var(--hw-radius-md); }
+.hw-skeleton[data-variant='circle'] { aspect-ratio: 1; border-radius: 50%; }.hw-skeleton[data-variant='text'] { min-block-size: 0.75em; border-radius: 0.2em; }.hw-progress[data-size='sm'] { block-size: 0.25rem; }.hw-progress[data-size='lg'] { block-size: 0.75rem; }.hw-spinner[data-size='sm'] { inline-size: 1rem; block-size: 1rem; }.hw-spinner[data-size='lg'] { inline-size: 2rem; block-size: 2rem; border-width: 3px; }
+.hw-tooltip-anchor { position: relative; display: inline-flex; }
+@media (max-width: 47.999rem) {
+  .hw-portal-header { gap: var(--hw-space-3); }
+  .hw-portal-menu-toggle { display: inline-flex; margin-inline-start: auto; }
+  .hw-portal-header > nav, .hw-portal-header-main > nav { order: 3; flex-basis: 100%; }
+  .hw-portal-header > nav[data-open='false'] { display: none; }
+  .hw-portal-header > nav ul, .hw-portal-header-main > nav ul { align-items: stretch; flex-direction: column; gap: var(--hw-space-1); }
+  .hw-portal-header > nav a, .hw-portal-header-main > nav a { inline-size: 100%; padding-inline: var(--hw-space-2); }
+  .hw-portal-header-actions:empty { display: none; }
+  .hw-portal-footer { gap: var(--hw-space-5); }
+}
+@media (max-width: 39.999rem) {
+  .hw-description-list[data-variant='horizontal'] > div { grid-template-columns: minmax(0, 1fr); gap: var(--hw-space-1); }
+  .hw-cookie-consent .hw-button-group { display: grid; inline-size: 100%; }
+  .hw-calendar { padding: var(--hw-space-3); }
+  .hw-rating label { min-inline-size: 2.25rem; }
+  .hw-service-card { padding: var(--hw-space-4); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hw-file-dropzone, .hw-service-card { transition: none; }
+  .hw-drawer[open] { animation: none; }
+}
+@media (forced-colors: active) {
+  .hw-slider, .hw-range-slider input[type='range'] { appearance: auto; }
+  .hw-rating label:has(input:checked), .hw-toggle-group > :is([aria-pressed='true'], label:has(input:checked)), .hw-calendar-day:is([aria-selected='true'], [data-selected='true']), [aria-selected='true'] > .hw-calendar-day, :is(.hw-tree-item, .hw-tree-view [role='treeitem'])[aria-selected='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
+  .hw-rating label:has(~ label input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
+  .hw-rating label:has(input:focus-visible) { outline: 3px solid CanvasText; outline-offset: 2px; }
+  .hw-input-addon, .hw-toast, .hw-cookie-consent { border-color: CanvasText; }
+  .hw-notification[data-unread='true']::before { background: Highlight; }
+  .hw-drawer::backdrop { background: Canvas; opacity: 0.7; }
+  .hw-menu :is([aria-disabled='true'], :disabled), .hw-toggle-group > :disabled { color: GrayText; }
+}
+
+.hw-notification-list:is(ul, ol) { margin: 0; padding: 0; list-style: none; }
+.hw-notification-list > li > a { grid-column: 1; min-inline-size: 0; font-size: var(--hw-text-sm); }
+.hw-timeline-item[aria-current='step']::before { background: var(--hw-color-primary); box-shadow: 0 0 0 3px var(--hw-color-primary-subtle); }
+.hw-stat-trend[data-tone='success'] { color: var(--hw-color-success); }.hw-stat-trend[data-tone='danger'] { color: var(--hw-color-danger); }
+.hw-cookie-consent > h3 { margin: 0; font-size: var(--hw-text-lg); font-weight: var(--hw-weight-semibold); }

package/dist/feedback.css

@@ -0,0 +1,48 @@
+/* Choice presentation is independent of each adapter's feedback data contract. */
+.hw-feedback > .hw-inline, .hw-feedback .hw-feedback-actions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--hw-space-2);
+  flex-basis: auto;
+}
+.hw-feedback > fieldset { flex: 1 1 100%; min-inline-size: 0; border: 0; padding: 0; margin: 0; }
+.hw-feedback > fieldset > legend { padding: 0; font-weight: var(--hw-weight-medium); }
+.hw-feedback > fieldset > .hw-button { margin-block-start: var(--hw-space-3); }
+.hw-feedback > fieldset > .hw-feedback-actions { margin-block: var(--hw-space-3); }
+.hw-feedback-actions > .hw-field { min-inline-size: 0; }
+.hw-feedback-actions .hw-choice {
+  box-sizing: border-box;
+  position: relative;
+  min-block-size: var(--hw-control-height);
+  padding: var(--hw-space-2) var(--hw-space-4);
+  border-radius: var(--hw-profile-control-radius, var(--hw-radius-md));
+  background: var(--hw-color-action-secondary);
+  color: var(--hw-color-on-action-secondary);
+  cursor: pointer;
+}
+.hw-feedback-actions .hw-choice:hover:not(:has(:disabled)) { background: var(--hw-color-action-secondary-hover); }
+.hw-feedback-actions .hw-choice:has(:checked) { outline: 2px solid var(--hw-color-primary); outline-offset: 3px; }
+.hw-feedback-actions .hw-choice:has(:focus-visible) { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: 3px; }
+.hw-feedback-actions .hw-choice:has(:disabled) { background: var(--hw-color-disabled); color: var(--hw-color-on-disabled); cursor: not-allowed; }
+.hw-feedback-actions .hw-radio,
+.hw-feedback[data-choice-variant='icon'] .hw-feedback-label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.hw-feedback .hw-feedback-icon { display: none; }
+.hw-feedback:is([data-choice-variant='icon'], [data-choice-variant='icon-text']) .hw-feedback-icon { display: inline-block; }
+.hw-feedback[data-choice-variant='icon'] .hw-feedback-actions :is(.hw-button, .hw-choice) { min-inline-size: var(--hw-control-height); padding-inline: var(--hw-space-2); }
+@media (forced-colors: active) {
+  .hw-feedback-actions .hw-choice { border: 1px solid ButtonText; }
+  .hw-feedback-actions .hw-choice:has(:checked, :focus-visible) { outline-color: Highlight; }
+  .hw-feedback-actions .hw-choice:has(:disabled) { border-color: GrayText; color: GrayText; }
+}

package/dist/file-upload-list.css

@@ -0,0 +1,64 @@
+/* Mobile Components local uploaded-row definitions 5698:34512 / 10705:1294. */
+.hw-upload-list { display: grid; gap: var(--hw-space-2); margin: 0; padding: 0; list-style: none; }
+.hw-upload-item {
+  position: relative;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: var(--hw-space-2);
+  row-gap: var(--hw-space-2);
+  min-block-size: 36px;
+  padding: calc(var(--hw-space-2) - 1px);
+  border: 1px solid var(--hw-color-border);
+  border-radius: var(--hw-radius-sm);
+  background: var(--hw-color-surface-muted);
+  color: var(--hw-color-text);
+}
+.hw-upload-item::before {
+  content: '';
+  grid-column: 1;
+  grid-row: 1;
+  box-sizing: border-box;
+  inline-size: 20px;
+  block-size: 20px;
+  border: 1.5px solid var(--hw-color-text-muted);
+  border-radius: 50%;
+}
+.hw-upload-item[data-status='complete']::before {
+  border: 0;
+  border-radius: 0;
+  background: var(--hw-color-success);
+  mask: url('./assets/icons/checkmark-circle-02.svg') center / contain no-repeat;
+}
+.hw-upload-item[data-status='error']::before { border-color: var(--hw-color-danger); }
+.hw-upload-name { grid-column: 2; grid-row: 1; min-inline-size: 0; overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.25rem; font-weight: var(--hw-weight-medium); }
+.hw-upload-status { grid-column: 2 / -1; color: var(--hw-color-text-muted); font-size: var(--hw-text-sm); }
+.hw-upload-item:not([data-message])[data-status]:is([data-status='selected'], [data-status='complete']) > .hw-upload-status {
+  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
+}
+.hw-upload-item[data-status='error'] .hw-upload-status { color: var(--hw-color-danger); }
+.hw-upload-item[data-status='complete'] .hw-upload-status { color: var(--hw-color-success); }
+.hw-upload-item > button {
+  position: relative; grid-column: 3; grid-row: 1; align-self: center;
+  inline-size: 20px; block-size: 20px; min-inline-size: 20px; min-block-size: 20px;
+  padding: 0; border: 0; font-size: 0; line-height: 1; background: transparent;
+  color: var(--hw-color-text);
+}
+.hw-upload-item > button:disabled { color: var(--hw-color-on-disabled); }
+.hw-upload-item > button::before {
+  content: ''; inline-size: 20px; block-size: 20px;
+  background: currentColor; mask: url('./assets/icons/cancel-01.svg') center / contain no-repeat;
+}
+/* Expand the pointer target inside the row without changing the source glyph box. */
+.hw-upload-item > button::after { content: ''; position: absolute; inset: -4px; }
+@media (pointer: coarse) {
+  .hw-upload-item > button::after { inset-block: -12px; inset-inline: -16px -8px; }
+}
+.hw-upload-item > progress { grid-column: 2 / -1; inline-size: 100%; accent-color: var(--hw-color-primary); }
+@media (forced-colors: active) {
+  .hw-upload-item::before { border-color: CanvasText; }
+  .hw-upload-item[data-status='complete']::before, .hw-upload-item > button::before { background: ButtonText; forced-color-adjust: none; }
+  .hw-upload-item > button:disabled::before { background: GrayText; }
+}

package/dist/icons.css

@@ -0,0 +1,67 @@
+/* Artwork remains unchanged; the alpha mask adopts the surrounding text color. */
+.hw-icon {
+  display: inline-block;
+  flex: none;
+  inline-size: var(--hw-icon-size, var(--hw-icon-context-size, 1.5rem));
+  block-size: var(--hw-icon-size, var(--hw-icon-context-size, 1.5rem));
+  vertical-align: middle;
+  background-color: currentColor;
+  -webkit-mask: var(--hw-icon-image, none) center / contain no-repeat;
+  mask: var(--hw-icon-image, none) center / contain no-repeat;
+}
+.hw-icon[hidden] { display: none; }
+.hw-icon[data-icon='search-01'] { --hw-icon-image: url('./assets/icons/search-01.svg'); }
+.hw-icon[data-icon='menu-01'] { --hw-icon-image: url('./assets/icons/menu-01.svg'); }
+.hw-icon[data-icon='cancel-01'] { --hw-icon-image: url('./assets/icons/cancel-01.svg'); }
+.hw-icon[data-icon='arrow-left-01'] { --hw-icon-image: url('./assets/icons/arrow-left-01.svg'); }
+.hw-icon[data-icon='arrow-right-01'] { --hw-icon-image: url('./assets/icons/arrow-right-01.svg'); }
+.hw-icon[data-icon='arrow-down-01'] { --hw-icon-image: url('./assets/icons/arrow-down-01.svg'); }
+.hw-icon[data-icon='filter-horizontal'] { --hw-icon-image: url('./assets/icons/filter-horizontal.svg'); }
+.hw-icon[data-icon='sorting-05'] { --hw-icon-image: url('./assets/icons/sorting-05.svg'); }
+.hw-icon[data-icon='home-01'] { --hw-icon-image: url('./assets/icons/home-01.svg'); }
+.hw-icon[data-icon='checkmark-circle-02'] { --hw-icon-image: url('./assets/icons/checkmark-circle-02.svg'); }
+.hw-icon[data-icon='thumbs-up'] { --hw-icon-image: url('./assets/icons/thumbs-up.svg'); }
+.hw-icon[data-icon='thumbs-down'] { --hw-icon-image: url('./assets/icons/thumbs-down.svg'); }
+
+/* Opt in only for semantic forward/back; physical directions retain their meaning. */
+.hw-icon:is([data-icon='arrow-left-01'], [data-icon='arrow-right-01'], [data-icon='arrow-left-02'], [data-icon='arrow-right-02'])[data-directional='true'] {
+  --_hw-mirror: var(--_hw-rtl-only) scaleX(-1);
+  transform: var(--_hw-mirror, none);
+}
+@media (forced-colors: active) {
+  .hw-icon {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+  :where(button, a)[aria-disabled='true'] .hw-icon,
+  button:disabled .hw-icon { background-color: GrayText; }
+}
+
+.hw-icon[data-icon="link-04"] { --hw-icon-image: url("./assets/icons/link-04.svg"); }
+
+.hw-icon[data-icon="lock-password"] { --hw-icon-image: url("./assets/icons/lock-password.svg"); }
+
+.hw-icon[data-icon="arrow-up-01"] { --hw-icon-image: url("./assets/icons/arrow-up-01.svg"); }
+
+.hw-icon[data-icon="arrow-up-right-01"] { --hw-icon-image: url("./assets/icons/arrow-up-right-01.svg"); }
+
+.hw-icon[data-icon="link-square-02"] { --hw-icon-image: url("./assets/icons/link-square-02.svg"); }
+
+.hw-icon[data-icon="information-circle"] { --hw-icon-image: url("./assets/icons/information-circle.svg"); }
+
+.hw-icon[data-icon="alert-02"] { --hw-icon-image: url("./assets/icons/alert-02.svg"); }
+
+.hw-icon[data-icon="cancel-circle"] { --hw-icon-image: url("./assets/icons/cancel-circle.svg"); }
+
+.hw-icon[data-icon="minus-sign-circle"] { --hw-icon-image: url("./assets/icons/minus-sign-circle.svg"); }
+
+.hw-icon[data-icon="add-01"] { --hw-icon-image: url("./assets/icons/add-01.svg"); }
+.hw-icon[data-icon="minus-sign"] { --hw-icon-image: url("./assets/icons/minus-sign.svg"); }
+.hw-icon[data-icon="tick-02"] { --hw-icon-image: url("./assets/icons/tick-02.svg"); }
+.hw-icon[data-icon="exclamation-mark"] { --hw-icon-image: url("./assets/icons/exclamation-mark.svg"); }
+.hw-icon[data-icon="arrow-up-02"] { --hw-icon-image: url("./assets/icons/arrow-up-02.svg"); }
+.hw-icon[data-icon="arrow-down-02"] { --hw-icon-image: url("./assets/icons/arrow-down-02.svg"); }
+.hw-icon[data-icon="arrow-left-02"] { --hw-icon-image: url("./assets/icons/arrow-left-02.svg"); }
+.hw-icon[data-icon="arrow-right-02"] { --hw-icon-image: url("./assets/icons/arrow-right-02.svg"); }
+.hw-icon[data-icon="arrow-data-transfer-vertical"] { --hw-icon-image: url("./assets/icons/arrow-data-transfer-vertical.svg"); }
+.hw-icon[data-icon="star"] { --hw-icon-image: url("./assets/icons/star.svg"); }