@hawiyah/styles 0.0.0-stage → 0.2.1

package/dist/nic-tables.css

@@ -0,0 +1,68 @@
+/* NIC global.css 1770–1886. Only Hawiyah data tables; never calendar grids.
+   See docs/nic-tables.md for source dependencies and intentional adaptations. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-table-radius: .5rem;
+  --hw-profile-table-cell-height: 3rem;
+  --hw-profile-table-cell-padding: .5rem 1rem;
+  --hw-profile-table-font: 1rem;
+  --hw-profile-table-heading-weight: 400;
+  --hw-profile-table-heading-border: 1px;
+  --hw-profile-table-cell-padding-inline: 1rem;
+  --hw-profile-table-small-height: 2.5rem;
+  --hw-profile-table-large-height: 3.5rem;
+  --hw-profile-table-small-padding: .375rem 1rem;
+  --hw-profile-table-large-padding: .75rem 1rem;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-table-radius: initial;
+  --hw-profile-table-cell-height: initial;
+  --hw-profile-table-cell-padding: initial;
+  --hw-profile-table-font: initial;
+  --hw-profile-table-heading-weight: initial;
+  --hw-profile-table-heading-border: initial;
+  --hw-profile-table-cell-padding-inline: initial;
+  --hw-profile-table-small-height: initial;
+  --hw-profile-table-large-height: initial;
+  --hw-profile-table-small-padding: initial;
+  --hw-profile-table-large-padding: initial;
+}
+.hw-table-wrap { border-radius: var(--hw-profile-table-radius, var(--hw-radius-lg)); }
+.hw-table { font-size: var(--hw-profile-table-font, var(--hw-text-sm)); }
+.hw-table :where(th, td) {
+  box-sizing: border-box;
+  block-size: var(--hw-table-cell-height, var(--hw-profile-table-cell-height, auto));
+  padding: var(--hw-table-cell-padding, var(--hw-profile-table-cell-padding, var(--hw-density-cell-padding) var(--hw-space-5)));
+}
+.hw-table thead th { font-weight: var(--hw-profile-table-heading-weight, var(--hw-weight-semibold)); }
+.hw-table thead { color: var(--hw-dga-on, var(--hw-color-text)) var(--hw-dga-off, var(--hw-color-text-muted)); }
+.hw-table thead th + th { border-inline-start: var(--hw-profile-table-heading-border, 0px) solid var(--hw-color-border); }
+.hw-table-heading { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; inline-size: 100%; font-size: .75rem; font-weight: 500; line-height: 1.125rem; color: var(--hw-color-text-muted); }
+.hw-data-table th button { block-size: auto; min-block-size: 2rem; line-height: 1.5rem; }
+.hw-data-table th button:hover,
+.hw-data-table [aria-sort='ascending'],
+.hw-data-table [aria-sort='descending'] { color: var(--hw-color-link); }
+/* Author this span with aria-hidden="true"; aria-sort carries the meaning. */
+.hw-table-sort-icon::before { content: ''; display: inline-block; inline-size: 1rem; block-size: 1rem; vertical-align: middle; background: currentColor; mask: url('./assets/icons/arrow-data-transfer-vertical.svg') center / contain no-repeat; }
+th[aria-sort='ascending'] .hw-table-sort-icon::before { mask-image: url('./assets/icons/arrow-up-02.svg'); }
+th[aria-sort='descending'] .hw-table-sort-icon::before { mask-image: url('./assets/icons/arrow-down-02.svg'); }
+.hw-table tbody tr:hover { background: var(--hw-color-table-row-hover, var(--hw-color-canvas)); }
+.hw-table tbody tr:nth-child(odd):hover { background: var(--hw-color-table-row-hover-odd, var(--hw-color-canvas)); }
+/* Selection stays visible while hovering, including on striped rows. */
+.hw-table tbody tr[aria-selected='true'],
+.hw-table[data-variant='striped'] tbody tr[aria-selected='true'] { background: var(--hw-color-primary-subtle); }
+.hw-table[data-variant='striped'] tbody tr:hover { background: var(--hw-color-table-row-hover, var(--hw-color-canvas)); }
+.hw-table[data-variant='striped'] tbody tr:nth-child(odd):hover { background: var(--hw-color-table-row-hover-odd, var(--hw-color-canvas)); }
+.hw-table tbody tr[aria-selected='true']:hover,
+.hw-table[data-variant='striped'] tbody tr[aria-selected='true']:hover { background: var(--hw-color-primary-subtle); }
+/* Existing size extensions remain explicit, with row height as a minimum. */
+.hw-table[data-size='sm'] { --hw-table-cell-height: var(--hw-profile-table-small-height, auto); --hw-table-cell-padding: var(--hw-profile-table-small-padding, var(--hw-space-2) var(--hw-space-5)); }
+.hw-table[data-size='lg'] { --hw-table-cell-height: var(--hw-profile-table-large-height, auto); --hw-table-cell-padding: var(--hw-profile-table-large-padding, var(--hw-space-5)); }
+.hw-table[data-size]:is([data-size='sm'], [data-size='lg']) :is(th, td) { padding: var(--hw-table-cell-padding); }
+@media (max-width: 40rem) {
+  .hw-table :where(th, td),
+  .hw-table[data-size]:is([data-size='sm'], [data-size='lg']) :is(th, td) { padding-inline: var(--hw-profile-table-cell-padding-inline, var(--hw-space-3)); }
+}
+@media (forced-colors: active) {
+  .hw-table-wrap, .hw-table :is(th, td) { border-color: CanvasText; }
+  .hw-table tbody tr[aria-selected='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
+}

package/dist/nic-tabs.css

@@ -0,0 +1,86 @@
+/* NIC global.css 2316–2427; responsive behavior master.js 1854–2079. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-tab-gap: 3px; --hw-profile-tab-height: 44px;
+  --hw-profile-tab-list-padding: 0px; --hw-profile-tab-rail: 3px;
+  --hw-profile-tab-radius: 4px; --hw-profile-tab-weight: 400;
+  --hw-profile-tab-active-weight: 700; --hw-profile-tab-active-color: var(--hw-color-text);
+  --hw-profile-tab-line-height: 20px; --hw-profile-tab-inset: 16px;
+  --hw-profile-tab-panel-gap: 24px; --hw-profile-tab-panel-padding: 0px;
+  --hw-profile-tab-hover-line: var(--hw-color-text);
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-profile-tab-gap: initial; --hw-profile-tab-height: initial;
+  --hw-profile-tab-list-padding: initial; --hw-profile-tab-rail: initial;
+  --hw-profile-tab-radius: initial; --hw-profile-tab-weight: initial;
+  --hw-profile-tab-active-weight: initial; --hw-profile-tab-active-color: initial;
+  --hw-profile-tab-line-height: initial; --hw-profile-tab-inset: initial;
+  --hw-profile-tab-panel-gap: initial; --hw-profile-tab-panel-padding: initial;
+  --hw-profile-tab-hover-line: initial;
+}
+.hw-tabs { min-inline-size: 0; }
+.hw-tab-bar { position: relative; display: flex; align-items: stretch; min-inline-size: 0; max-inline-size: 100%; }
+.hw-tab-list { position: relative; z-index: 1; min-inline-size: 0; box-sizing: border-box; }
+.hw-tab-list:not([aria-orientation='vertical']) {
+  gap: var(--hw-profile-tab-gap, var(--hw-space-1));
+  padding: var(--hw-profile-tab-list-padding, 3px 3px 0); border-block-end: 0;
+}
+.hw-tab-bar > .hw-tab-list { flex: 1 1 0%; }
+.hw-tab-list:not([aria-orientation='vertical'])::after, .hw-tab-bar:not(:has(> [aria-orientation='vertical']))::after {
+  content: ''; position: absolute; z-index: 0; pointer-events: none; inset-inline: 0; inset-block-end: 0;
+  block-size: var(--hw-profile-tab-rail, 1px); border-radius: 9999px; background: var(--hw-color-border);
+}
+.hw-tab-bar > .hw-tab-list::after { display: none; }
+.hw-tab-bar:has(> .hw-tabs-overflow:not([hidden])) > .hw-tab-list[data-hw-overflow='menu']:not([aria-orientation='vertical']) { overflow: hidden; }
+.hw-tab-list[aria-orientation='vertical'] { flex-basis: 100%; }
+.hw-tab[data-hw-overflow-hidden='true'] {
+  position: absolute; visibility: hidden; pointer-events: none; inset-inline-start: 0; inset-block-start: 0;
+}
+.hw-tab, .hw-tab-overflow-trigger {
+  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+  flex: none; min-block-size: var(--hw-profile-tab-height, var(--hw-control-height));
+  padding: 12px 16px; border: 0; border-radius: var(--hw-profile-tab-radius, var(--hw-radius-sm));
+  background: transparent; color: var(--hw-color-text-muted); font: inherit; font-size: 14px;
+  font-weight: var(--hw-profile-tab-weight, var(--hw-weight-medium));
+  line-height: var(--hw-profile-tab-line-height, inherit); white-space: nowrap; cursor: pointer; text-decoration: none;
+}
+.hw-tab::after, .hw-tab-overflow-trigger::after {
+  content: ''; position: absolute; inset-inline: var(--hw-profile-tab-inset, var(--hw-space-3));
+  inset-block-end: 1px; block-size: 3px; border-radius: 9999px; background: transparent;
+}
+.hw-tab:hover:not(:disabled, [aria-disabled='true']), .hw-tab-overflow-trigger:hover { background: var(--hw-color-surface-muted); }
+.hw-tab:active:not(:disabled, [aria-disabled='true']), .hw-tab-overflow-trigger:active { background: var(--hw-color-action-secondary-hover); }
+.hw-tab:is(:hover, :active):not(:disabled, [aria-disabled='true'])::after, .hw-tab-overflow-trigger:is(:hover, :active)::after { background: var(--hw-profile-tab-hover-line, transparent); }
+.hw-tab[aria-selected='true'], .hw-tab[aria-selected='true']:is(:hover, :active), .hw-tab-overflow-trigger[data-active='true'], .hw-tab-overflow-trigger[data-active='true']:is(:hover, :active) {
+  background: transparent; color: var(--hw-profile-tab-active-color, var(--hw-color-primary-text)); font-weight: var(--hw-profile-tab-active-weight, var(--hw-weight-semibold));
+}
+.hw-tab[aria-selected='true']::after, .hw-tab-overflow-trigger[data-active='true']::after { background: var(--hw-color-primary); }
+.hw-tab:focus:not(:disabled, [aria-disabled='true']), .hw-tab-overflow-trigger:focus { color: var(--hw-color-text); background: transparent; outline: 2px solid var(--hw-color-focus-contrast); outline-offset: -2px; }
+.hw-tab:is(:disabled, [aria-disabled='true']) { background: transparent; color: var(--hw-color-on-disabled); cursor: not-allowed; }
+.hw-tab-panel { margin-block-start: var(--hw-profile-tab-panel-gap, 0px); padding-block: var(--hw-profile-tab-panel-padding, var(--hw-space-5)); }
+.hw-tabs-overflow { flex: 0 0 72px; min-inline-size: 0; }
+.hw-tabs-overflow[hidden] { display: none; }
+.hw-tab-overflow-trigger { position: relative; z-index: 1; inline-size: 100%; block-size: 100%; list-style: none; font-size: 18px; font-weight: 700; }
+.hw-tab-overflow-trigger::-webkit-details-marker { display: none; }
+.hw-tab-overflow-menu {
+  position: absolute; z-index: 20; inset-block-start: 100%; inset-inline-end: 0;
+  box-sizing: border-box; inline-size: max-content; min-inline-size: min(12rem, 100%); max-inline-size: 100%;
+  max-block-size: min(300px, 60vh); overflow: auto; overscroll-behavior: contain;
+  padding: 8px; border: 1px solid var(--hw-color-border); border-radius: 4px;
+  background: var(--hw-color-surface); color: var(--hw-color-text); box-shadow: var(--hw-shadow-pagination, var(--hw-shadow-lg));
+}
+.hw-tab-overflow-item {
+  display: block; box-sizing: border-box; inline-size: 100%; min-block-size: 40px;
+  padding: 8px 16px; border: 0; border-radius: 4px; background: transparent; color: inherit;
+  font: inherit; font-size: 14px; text-align: start; white-space: normal; overflow-wrap: anywhere; cursor: pointer;
+}
+.hw-tab-overflow-item:hover:not(:disabled) { background: var(--hw-color-surface-muted); }
+.hw-tab-overflow-item[aria-pressed='true'] { font-weight: 700; box-shadow: inset calc(3px * var(--_hw-inline-sign, 1)) 0 var(--hw-color-primary); }
+.hw-tab-overflow-item:disabled { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+.hw-tab-overflow-item:focus-visible { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: -2px; }
+.hw-tabs[data-variant='pills'] :is(.hw-tab-bar, .hw-tab-list)::after { display: none; }
+@media (forced-colors: active) {
+  .hw-tab-list::after, .hw-tab-bar::after { background: GrayText; }
+  .hw-tab[aria-selected='true']::after, .hw-tab-overflow-trigger[data-active='true']::after { background: Highlight; }
+  .hw-tab-overflow-item[aria-pressed='true'] { outline: 1px solid Highlight; outline-offset: -1px; }
+  .hw-tab-overflow-menu { border-color: CanvasText; }
+}

package/dist/password-field.css

@@ -0,0 +1,16 @@
+/* Password visibility is an input action; the input retains native sizing. */
+.hw-password-control, .hw-password-control.hw-password-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; inline-size: 100%; }
+.hw-password-control > .hw-input { inline-size: 100%; min-inline-size: 0; }
+.hw-password-control:has(> .hw-password-toggle[data-toggle-variant='icon']) > .hw-input { padding-inline-end: 3rem; }
+.hw-password-control > .hw-password-toggle[data-toggle-variant='icon'] { 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-password-control > .hw-password-toggle:hover:not(:disabled) { color: var(--hw-color-text); background: var(--hw-color-surface-muted); }
+.hw-password-control > .hw-password-toggle:focus-visible { outline-offset: -3px; }
+.hw-password-control > .hw-password-toggle:disabled { color: var(--hw-color-on-disabled); cursor: not-allowed; }
+.hw-password-icon { display: inline-block; flex: none; inline-size: var(--hw-password-icon-size, 1.5rem); block-size: var(--hw-password-icon-size, 1.5rem); background: currentColor; -webkit-mask: var(--hw-password-show-icon, url('./assets/icons/view.svg')) center / contain no-repeat; mask: var(--hw-password-show-icon, url('./assets/icons/view.svg')) center / contain no-repeat; }
+.hw-password-toggle[aria-pressed='true'] > .hw-password-icon { -webkit-mask-image: var(--hw-password-hide-icon, url('./assets/icons/view-off-slash.svg')); mask-image: var(--hw-password-hide-icon, url('./assets/icons/view-off-slash.svg')); }
+.hw-password-control:has(> .hw-password-toggle[data-toggle-variant='text']) { grid-template-columns: minmax(0, 1fr) auto; gap: var(--hw-space-2); }
+.hw-password-control > .hw-password-toggle[data-toggle-variant='text'] { max-inline-size: 12rem; white-space: normal; overflow-wrap: anywhere; }
+@media (forced-colors: active) {
+  .hw-password-icon { forced-color-adjust: none; background: ButtonText; }
+  .hw-password-toggle:disabled > .hw-password-icon { background: GrayText; }
+}

package/dist/portal-branches.css

@@ -0,0 +1,52 @@
+/* Native portal disclosures. NIC master.js 627–929 supplies structure and
+   interaction evidence; dimensions here use Hawiyah tokens. */
+.hw-portal-header:has(.hw-portal-branch) { position: relative; }
+.hw-portal-branch > summary {
+  display: inline-flex; align-items: center; gap: var(--hw-space-2);
+  min-block-size: var(--hw-control-height);
+  padding-inline: var(--hw-space-2); border-radius: var(--hw-radius-sm);
+  color: var(--hw-color-heading, var(--hw-color-text));
+  font: inherit; cursor: pointer; list-style: none;
+}
+.hw-portal-branch > summary::-webkit-details-marker { display: none; }
+.hw-portal-branch > summary::after {
+  content: ''; flex: none; inline-size: 1.125rem; block-size: 1.125rem;
+  background: currentColor; mask: url('./assets/icons/arrow-down-01.svg') center / contain no-repeat;
+  transition: transform var(--hw-duration-fast) var(--hw-ease-standard);
+}
+.hw-portal-branch[open] > summary::after { transform: rotate(180deg); }
+.hw-portal-branch > summary:hover, .hw-portal-branch[open] > summary { background: var(--hw-color-surface-muted); }
+.hw-portal-branch[data-current='true'] > summary { color: var(--hw-color-primary-text); font-weight: var(--hw-weight-semibold); }
+.hw-portal-branch > summary:focus-visible { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: -2px; }
+.hw-portal-branch-panel {
+  box-sizing: border-box; position: absolute; z-index: var(--hw-z-popover, 10);
+  inset-inline: 0; inset-block-start: 100%; margin-inline: auto;
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+  gap: var(--hw-space-4); max-inline-size: 64rem; max-block-size: 65dvh; overflow: auto;
+  padding: var(--hw-space-4); border: 1px solid var(--hw-color-border);
+  border-radius: var(--hw-radius-md); background: var(--hw-color-surface);
+  color: var(--hw-color-text); box-shadow: var(--hw-shadow-md);
+}
+.hw-portal-branch-panel .hw-portal-branch-overview { grid-column: 1 / -1; justify-self: start; }
+.hw-portal-branch-group { min-inline-size: 0; }
+.hw-portal-branch-group > h2 { margin: 0 0 var(--hw-space-2); font-size: 1rem; }
+.hw-portal-header nav .hw-portal-branch-group > ul {
+  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hw-space-1);
+  margin: 0; padding: 0; list-style: none;
+}
+.hw-portal-header nav .hw-portal-branch-panel a { overflow-wrap: anywhere; white-space: normal; }
+@media (max-width: 47.999rem) {
+  .hw-portal-branch > summary { box-sizing: border-box; inline-size: 100%; justify-content: space-between; }
+  .hw-portal-branch-panel {
+    position: static; grid-template-columns: minmax(0, 1fr);
+    max-block-size: none; box-shadow: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hw-portal-branch > summary::after { transition: none; }
+}
+@media (forced-colors: active) {
+  .hw-portal-branch > summary::after { forced-color-adjust: none; background: ButtonText; }
+  .hw-portal-branch > summary:focus-visible { outline-color: Highlight; }
+  .hw-portal-branch-panel { border-color: CanvasText; }
+}

package/dist/portal.css

@@ -0,0 +1,24 @@
+/* Public portal composition. The 48rem disclosure breakpoint is Hawiyah policy,
+   not an asserted Figma breakpoint. No viewport script or motion is required. */
+.hw-portal-layout { display: flex; flex-direction: column; min-block-size: 100dvh; color: var(--hw-color-text); background: var(--hw-color-canvas); font-family: var(--hw-font-sans); }
+.hw-portal-layout > *, .hw-portal-layout-main > * { min-inline-size: 0; }
+/* Moving a skip link above its header does not hide it in an embedded layout.
+   Clip it until focus so it cannot cover preceding content or pointer targets. */
+.hw-skip-link:not(:focus) { inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; transform: none; }
+.hw-portal-layout-main { flex: 1; padding-block: var(--hw-space-8); }
+.hw-portal-layout-main > .hw-breadcrumb, .hw-portal-layout-main > hw-breadcrumb { display: block; margin-block-end: var(--hw-space-6); }
+.hw-secondary-nav { color: var(--hw-color-text); background: var(--hw-color-surface); border-block-end: 1px solid var(--hw-color-border); overflow-x: auto; }
+.hw-secondary-nav ul { display: flex; flex-wrap: wrap; gap: var(--hw-space-2); max-inline-size: var(--hw-content-max); margin: 0 auto; padding: var(--hw-space-2) var(--hw-content-gutter-mobile, 1rem); list-style: none; }
+.hw-secondary-nav a { display: inline-flex; align-items: center; min-block-size: var(--hw-control-height); padding: var(--hw-space-2) var(--hw-space-3); color: inherit; text-decoration: none; border-block-end: 2px solid transparent; }
+.hw-secondary-nav a[aria-current='page'] { color: var(--hw-color-primary-text); border-block-end-color: currentColor; font-weight: var(--hw-weight-semibold); }
+.hw-secondary-nav a:hover { background: var(--hw-color-surface-muted); }
+.hw-secondary-nav a:focus-visible { outline: 2px solid var(--hw-color-focus); outline-offset: -2px; }
+@media (max-width: 47.999rem) {
+  .hw-portal-header :is(.hw-portal-header-main, .hw-portal-header-inner) > nav[data-open='false'] { display: none; }
+  .hw-portal-header :is(.hw-portal-header-main, .hw-portal-header-inner) > nav { order: 3; flex-basis: 100%; }
+  .hw-portal-header :is(.hw-portal-header-main, .hw-portal-header-inner) > nav ul { flex-direction: column; align-items: stretch; inline-size: 100%; }
+}
+@media (forced-colors: active) {
+  .hw-secondary-nav a:focus-visible { outline-color: Highlight; }
+  .hw-secondary-nav a[aria-current='page'] { border-block-end-color: LinkText; }
+}

package/dist/reset.css

@@ -0,0 +1,12 @@
+/* Optional application reset. Do not import this into an existing app by default. */
+*, *::before, *::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+body { margin: 0; }
+:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
+:where(button, input, select, textarea) { font: inherit; }
+:where(img, picture, video, canvas, svg) { display: block; max-inline-size: 100%; }
+:where(img, video) { block-size: auto; }
+:where(button, [role='button']) { touch-action: manipulation; }
+:where(textarea) { resize: vertical; }
+:where(table) { border-collapse: collapse; }
+:where([hidden]) { display: none !important; }

package/dist/riyal.css

@@ -0,0 +1,32 @@
+/* U+20C1 only: the application's normal Arabic/Latin font remains unchanged.
+   Source, license and reproducible subset steps accompany the font asset. */
+@font-face {
+  font-family: 'HawiyahRiyal';
+  src: url('./assets/fonts/riyal.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  unicode-range: U+20C1;
+}
+
+/* Render the actual Unicode character, not generated content or an image.
+   When paired with an amount, hide this span from assistive technology and
+   provide the localized currency name in the amount's accessible text. */
+.hw-riyal {
+  font-family: 'HawiyahRiyal', 'Segoe UI', Arial, Tahoma, sans-serif;
+  font-size: inherit;
+  line-height: inherit;
+  font-style: normal;
+  font-weight: 400;
+  font-synthesis: none;
+}
+
+/* The amount-field adornment is an icon, independent of small addon labels. */
+.hw-input-addon .hw-riyal {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 1.75rem;
+  font-size: var(--hw-riyal-input-size, 1.75rem);
+  line-height: 1;
+}

package/dist/search-field.css

@@ -0,0 +1,11 @@
+/* A single named clear action, inset within the native search field. */
+.hw-search-control, .hw-search-control.hw-search-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-inline-size: 0; inline-size: 100%; }
+.hw-search-control > .hw-input { inline-size: 100%; min-inline-size: 0; padding-inline-end: 3rem; border-radius: var(--hw-radius-md); }
+.hw-search-control > input[type='search']::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
+.hw-search-control > .hw-search-clear { 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-search-control > .hw-search-clear:hover:not(:disabled) { color: var(--hw-color-text); background: var(--hw-color-surface-muted); }
+.hw-search-control > .hw-search-clear:focus-visible { outline-offset: -3px; }
+.hw-search-control > .hw-search-clear { z-index: 1; }
+.hw-search-control > .hw-search-clear[hidden] { display: none; }
+.hw-search-clear-icon { display: inline-block; inline-size: 1.25rem; block-size: 1.25rem; background: currentColor; -webkit-mask: url('./assets/icons/cancel-01.svg') center / contain no-repeat; mask: url('./assets/icons/cancel-01.svg') center / contain no-repeat; }
+@media (forced-colors: active) { .hw-search-clear-icon { forced-color-adjust: none; background: ButtonText; } .hw-search-clear:disabled .hw-search-clear-icon { background: GrayText; } }

package/dist/site-verification.css

@@ -0,0 +1,36 @@
+/* Source structure: NIC master.js 1176–1310. Native details owns disclosure.
+   Geometry below is a token-based Hawiyah composition, not a copied stamp asset. */
+.hw-site-verification { box-sizing: border-box; inline-size: 100%; color: var(--hw-color-text); background: var(--hw-color-surface-muted); border-block: 1px solid var(--hw-color-border); font: var(--hw-text-sm)/var(--hw-leading-normal) var(--hw-font-sans); }
+.hw-site-verification > details { max-inline-size: var(--hw-content-max); padding-inline: var(--hw-portal-gutter, var(--hw-space-8)); margin-inline: auto; }
+.hw-site-verification summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hw-space-2); min-block-size: 2.75rem; padding-block: var(--hw-space-2); box-sizing: border-box; list-style: none; cursor: pointer; }
+.hw-site-verification summary::-webkit-details-marker { display: none; }
+.hw-verification-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 1.25rem; block-size: 1.25rem; }
+.hw-verification-mark:empty { display: none; }
+.hw-verification-mark :is(img,svg) { display: block; max-inline-size: 100%; max-block-size: 100%; }
+.hw-verification-toggle { display: inline-flex; align-items: center; gap: var(--hw-space-1); color: var(--hw-color-link); text-decoration: underline; text-underline-offset: .25em; }
+.hw-verification-toggle .hw-icon { inline-size: 1rem; block-size: 1rem; transition: transform 200ms ease; }
+.hw-site-verification details[open] .hw-verification-toggle .hw-icon { transform: rotate(180deg); }
+.hw-site-verification summary:hover .hw-verification-toggle { color: var(--hw-color-text); }
+.hw-site-verification summary:focus-visible, .hw-site-verification a:focus-visible { outline: 2px solid var(--hw-color-focus-contrast); outline-offset: 2px; border-radius: var(--hw-radius-sm); }
+.hw-verification-content { padding-block: var(--hw-space-4) var(--hw-space-6); }
+.hw-verification-checks { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap: var(--hw-space-6); }
+.hw-verification-checks > section { display: flex; align-items: start; gap: var(--hw-space-3); min-inline-size: 0; }
+.hw-verification-checks > section > .hw-icon { flex: none; color: var(--hw-color-primary-text); margin-block-start: 2px; }
+.hw-verification-checks h2 { margin: 0 0 var(--hw-space-2); font-size: var(--hw-text-md); line-height: var(--hw-leading-heading); font-weight: var(--hw-weight-semibold); }
+.hw-verification-checks p { margin: 0; }
+.hw-site-verification bdi { direction: ltr; overflow-wrap: anywhere; }
+.hw-verification-registration { margin: var(--hw-space-4) 0 0; }
+.hw-verification-registration a { color: var(--hw-color-primary-text); text-underline-offset: .25em; overflow-wrap: anywhere; }
+.hw-portal-masthead { min-inline-size: 0; }
+.hw-portal-masthead > .hw-portal-header, .hw-portal-masthead > hw-portal-header > .hw-portal-header { padding-inline: var(--hw-portal-gutter, var(--hw-space-8)); }
+.hw-portal-masthead > hw-portal-header { display: block; }
+.hw-portal-masthead[data-variant='sticky'] { position: sticky; inset-block-start: 0; z-index: var(--hw-z-sticky); }
+@media(prefers-reduced-motion:reduce) { .hw-verification-toggle .hw-icon { transition: none; } }
+@media(forced-colors:active) { .hw-site-verification { border-color: CanvasText; } .hw-verification-toggle,.hw-verification-registration a { color: LinkText; } .hw-site-verification :is(summary,a):focus-visible { outline-color: Highlight; } }
+
+.hw-portal-masthead .hw-site-verification > details { max-inline-size: none; }
+@media(max-width:37.499rem) {
+  .hw-site-verification > details,
+  .hw-portal-masthead > .hw-portal-header,
+  .hw-portal-masthead > hw-portal-header > .hw-portal-header { padding-inline: var(--hw-portal-gutter, var(--hw-space-4)); }
+}

package/dist/stepper.css

@@ -0,0 +1,46 @@
+/* State hooks are shared by static HTML and all native adapters. Defaults preserve
+   the original marker treatments; consumers can scope these variables per list. */
+.hw-step {
+  color: var(--hw-step-upcoming-color, var(--hw-color-text-muted));
+  font-weight: var(--hw-step-upcoming-weight, inherit);
+}
+.hw-step::before {
+  border-color: var(--hw-step-upcoming-border, var(--hw-color-border-strong));
+  background: var(--hw-step-upcoming-background, var(--hw-color-surface));
+  color: var(--hw-step-upcoming-marker-color, var(--hw-color-text-muted));
+}
+.hw-step:not(:last-child)::after { background: var(--hw-step-upcoming-connector, var(--hw-color-border)); }
+.hw-step:is([data-state='complete'], [data-state='completed']) {
+  color: var(--hw-step-complete-color, var(--hw-color-text-muted));
+  font-weight: var(--hw-step-complete-weight, inherit);
+}
+.hw-step:is([data-state='complete'], [data-state='completed'])::before {
+  border-color: var(--hw-step-complete-border, var(--hw-color-primary));
+  background: var(--hw-step-complete-background, var(--hw-color-primary));
+  color: var(--hw-step-complete-marker-color, var(--hw-color-primary-text));
+}
+.hw-step:is([data-state='complete'], [data-state='completed']):not(:last-child)::after { background: var(--hw-step-complete-connector, var(--hw-color-border)); }
+.hw-step:is([aria-current='step'], [data-state='active'], [data-state='current']) {
+  color: var(--hw-step-current-color, var(--hw-color-primary-text));
+  font-weight: var(--hw-step-current-weight, var(--hw-weight-semibold));
+}
+.hw-step:is([aria-current='step'], [data-state='active'], [data-state='current'])::before {
+  border-color: var(--hw-step-current-border, var(--hw-color-primary));
+  background: var(--hw-step-current-background, var(--hw-color-primary));
+  color: var(--hw-step-current-marker-color, var(--hw-color-on-primary));
+  box-shadow: var(--hw-step-current-ring, 0 0 0 4px var(--hw-color-primary-subtle));
+}
+.hw-step:is([aria-current='step'], [data-state='active'], [data-state='current']):not(:last-child)::after { background: var(--hw-step-current-connector, var(--hw-color-border)); }
+/* The form sidebar retains its filled completed marker and vertical connector. */
+.hw-stepper-responsive .hw-step:is([data-state='complete'], [data-state='completed'])::before {
+  border-color: var(--hw-step-complete-border, var(--hw-color-primary));
+  background: var(--hw-step-complete-background, var(--hw-color-primary));
+  color: var(--hw-step-complete-marker-color, var(--hw-color-on-primary));
+}
+.hw-stepper-responsive .hw-step:is([data-state='complete'], [data-state='completed']):not(:last-child)::after { background: var(--hw-step-complete-connector, var(--hw-color-primary)); }
+.hw-stepper-responsive .hw-step:is([aria-current='step'], [data-state='active'], [data-state='current'])::before { box-shadow: var(--hw-step-current-ring, none); }
+@media (forced-colors: active) {
+  .hw-stepper .hw-step::before, .hw-stepper-responsive .hw-stepper .hw-step::before { border-color: CanvasText; }
+  .hw-stepper .hw-step:is([aria-current='step'], [data-state='active'], [data-state='current'])::before { border: 3px solid Highlight; box-shadow: none; }
+  .hw-stepper-responsive .hw-stepper .hw-step:is([aria-current='step'], [data-state='active'], [data-state='current'])::before { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
+}

package/dist/styles.css

@@ -0,0 +1,49 @@
+@import '@hawiyah/tokens/tokens.css';
+@import './direction.css';
+@import './components.css';
+@import './nic-foundations.css';
+@import './extended.css';
+@import './layout.css';
+@import './dga.css';
+@import './portal.css';
+@import './portal-branches.css';
+@import './icons.css';
+@import './riyal.css';
+@import './mobile-navigation.css';
+@import './accordion-motion.css';
+@import './mobile-top-bar.css';
+@import './navigation-drawer.css';
+@import './stepper.css';
+@import './password-field.css';
+@import './date-picker.css';
+@import './brand-loader.css';
+@import './search-field.css';
+@import './nic-cards.css';
+@import './nic-lists.css';
+@import './nic-buttons.css';
+@import './nic-input-groups.css';
+@import './nic-select.css';
+@import './nic-choices.css';
+@import './nic-accordion.css';
+@import './feedback.css';
+@import './link-composition.css';
+@import './nic-links.css';
+@import './nic-segmented.css';
+@import './nic-icons.css';
+@import './nic-tables.css';
+@import './nic-badges.css';
+@import './nic-avatars.css';
+@import './nic-carousel.css';
+@import './nic-rating.css';
+@import './nic-pagination.css';
+@import './nic-tabs.css';
+@import './content-navigation.css';
+@import './nic-search.css';
+@import './nic-notifications.css';
+@import './nic-notification-dialog.css';
+
+@import './site-verification.css';
+@import './nic-footer.css';
+
+@import './file-upload-list.css';
+@import './tooltip-placement.css';

package/dist/tooltip-placement.css

@@ -0,0 +1,65 @@
+/* Local Mobile Components tooltip content 5666:4262 and text 5666:4266. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-profile-tooltip-padding: var(--hw-space-2);
+  --hw-profile-tooltip-min: 10rem;
+  --hw-profile-tooltip-max: 15rem;
+  --hw-profile-tooltip-shadow: 0 4px 6px -2px rgb(16 24 40 / .03), 0 12px 16px -4px rgb(16 24 40 / .08);
+}
+[data-hw-theme='hawiyah'] {
+  --hw-profile-tooltip-padding: initial;
+  --hw-profile-tooltip-min: initial;
+  --hw-profile-tooltip-max: initial;
+  --hw-profile-tooltip-shadow: initial;
+}
+.hw-tooltip {
+  --_hw-tooltip-background: var(--hw-color-inverse);
+  --_hw-tooltip-color: var(--hw-color-on-inverse);
+  box-sizing: border-box;
+  min-inline-size: min(var(--hw-tooltip-min-width, var(--hw-profile-tooltip-min, 0px)), calc(100vw - 2rem));
+  max-inline-size: min(var(--hw-tooltip-max-width, var(--hw-profile-tooltip-max, 20rem)), calc(100vw - 2rem));
+  padding: var(--hw-tooltip-padding, var(--hw-profile-tooltip-padding, var(--hw-space-2) var(--hw-space-3)));
+  background: var(--hw-tooltip-background, var(--_hw-tooltip-background));
+  color: var(--hw-tooltip-color, var(--_hw-tooltip-color));
+  line-height: 1.5;
+  box-shadow: var(--hw-tooltip-shadow, var(--hw-profile-tooltip-shadow, var(--hw-shadow-sm)));
+}
+/* Resolve color roles on the tooltip so nested mode overrides stay live. */
+@scope (:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom'])) to ([data-hw-theme]) {
+  .hw-tooltip {
+    --_hw-tooltip-background: var(--hw-color-surface);
+    --_hw-tooltip-color: var(--hw-color-text-muted);
+  }
+}
+/* Logical sides follow the nearest direction, independently of language. */
+.hw-tooltip[data-placement='bottom'] {
+  inset-block-start: calc(100% + var(--hw-space-2));
+  inset-block-end: auto;
+}
+.hw-tooltip:not([data-placement='start'], [data-placement='end'])[data-align='end'] {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
+.hw-tooltip:not([data-placement='start'], [data-placement='end'])[data-align='center'] {
+  inset-inline-start: 50%;
+  translate: calc(-50% * var(--_hw-inline-sign, 1)) 0;
+}
+.hw-tooltip:is([data-placement='start'], [data-placement='end']) {
+  inset-block-start: 0;
+  inset-block-end: auto;
+}
+.hw-tooltip[data-placement='start'] {
+  inset-inline-start: auto;
+  inset-inline-end: calc(100% + var(--hw-space-2));
+}
+.hw-tooltip[data-placement='end'] {
+  inset-inline-start: calc(100% + var(--hw-space-2));
+  inset-inline-end: auto;
+}
+.hw-tooltip:is([data-placement='start'], [data-placement='end'])[data-align='end'] {
+  inset-block-start: auto;
+  inset-block-end: 0;
+}
+.hw-tooltip:is([data-placement='start'], [data-placement='end'])[data-align='center'] {
+  inset-block-start: 50%;
+  translate: 0 -50%;
+}

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@hawiyah/styles",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.1",
+  "description": "Component styles for Hawiyah, a UI library built to comply with the DGA Platforms Code",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "exports": {
+    ".": "./dist/styles.css",
+    "./styles.css": "./dist/styles.css",
+    "./reset.css": "./dist/reset.css",
+    "./assets/*": "./dist/assets/*"
+  },
+  "dependencies": {
+    "@hawiyah/tokens": "0.2.1"
+  },
+  "keywords": [
+    "hawiyah",
+    "dga",
+    "sdga",
+    "platforms-code",
+    "saudi-design-system",
+    "arabic",
+    "rtl",
+    "ui-components",
+    "styles"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MohamedEmbarak/hawiyah.git",
+    "directory": "packages/styles"
+  },
+  "homepage": "https://mohamedembarak.github.io/hawiyah/",
+  "bugs": {
+    "url": "https://github.com/MohamedEmbarak/hawiyah/issues"
+  },
+  "author": {
+    "name": "Development Team, National Platforms Sector — National Information Center"
+  },
+  "contributors": [
+    {
+      "name": "Mohamed Embarak",
+      "url": "https://github.com/MohamedEmbarak"
+    }
+  ]
 }