@hawiyah/styles 0.2.0 → 0.2.1

package/dist/dga.css

@@ -109,10 +109,10 @@
   padding-inline: var(--hw-profile-field-padding-start, var(--hw-space-3)) var(--hw-profile-field-padding-end, var(--hw-space-3));
   border-radius: var(--hw-profile-control-radius, var(--hw-radius-md));
   background-color: var(--hw-color-field-background, var(--hw-color-surface));
-  background-image: linear-gradient(var(--hw-color-field-active), var(--hw-color-field-active)) var(--_nq-select-image,);
+  background-image: linear-gradient(var(--hw-color-field-active), var(--hw-color-field-active)) var(--_hw-select-image,);
   background-repeat: no-repeat;
-  background-position: center bottom var(--_nq-select-position,);
-  background-size: 0% 2px var(--_nq-select-size,);
+  background-position: center bottom var(--_hw-select-position,);
+  background-size: 0% 2px var(--_hw-select-size,);
   line-height: var(--hw-profile-field-leading, var(--hw-leading-normal));
   transition: var(--hw-dga-on, border-color var(--hw-duration-input) var(--hw-ease-input), background-color var(--hw-duration-input) var(--hw-ease-input), background-size var(--hw-duration-input) var(--hw-ease-input), box-shadow var(--hw-duration-input) var(--hw-ease-input)) var(--hw-dga-off, background-size var(--hw-duration-input, 500ms) var(--hw-ease-input, ease));
 }
@@ -120,11 +120,11 @@
 :is(.hw-input, .hw-textarea, .hw-select):hover:not(:disabled, [readonly]) { border-color: var(--hw-color-field-hover, var(--hw-color-primary)); }
 :is(.hw-input, .hw-textarea, .hw-select):focus:not(:disabled, [readonly]) {
   border-color: var(--hw-dga-on, var(--hw-color-primary)) var(--hw-dga-off, var(--hw-color-field-active));
-  background-size: var(--hw-profile-field-focus-line, 0% 2px) var(--_nq-select-size,);
+  background-size: var(--hw-profile-field-focus-line, 0% 2px) var(--_hw-select-size,);
   box-shadow: var(--hw-profile-field-shadow, none);
 }
 :is(.hw-input, .hw-textarea, .hw-select):active:not(:disabled, [readonly]) {
-  background-size: var(--hw-profile-field-pressed-line, 0% 2px) var(--_nq-select-size,);
+  background-size: var(--hw-profile-field-pressed-line, 0% 2px) var(--_hw-select-size,);
   background-color: var(--hw-color-field-background);
 }
 :is(.hw-input, .hw-textarea, .hw-select)[data-size='sm'] { padding-block: var(--hw-profile-button-padding-block, var(--hw-space-1)); }
@@ -141,25 +141,25 @@
 :is(.hw-input, .hw-textarea)[readonly]:focus-visible {
   outline: 2px solid var(--hw-color-focus);
 }
-:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled'] { background-color: var(--hw-color-surface-muted); background-image: linear-gradient(var(--hw-color-field-active), var(--hw-color-field-active)) var(--_nq-select-image,); background-repeat: no-repeat; background-position: center bottom var(--_nq-select-position,); background-size: 0% 2px var(--_nq-select-size,); }
-:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:focus:not(:disabled, [readonly]) { background-size: var(--hw-profile-field-focus-line, 0% 2px) var(--_nq-select-size,); }
-:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:active:not(:disabled, [readonly]) { background-size: var(--hw-profile-field-pressed-line, 0% 2px) var(--_nq-select-size,); background-color: var(--hw-dga-on, var(--hw-color-field-background)) var(--hw-dga-off, var(--hw-color-surface-muted)); }
+:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled'] { background-color: var(--hw-color-surface-muted); background-image: linear-gradient(var(--hw-color-field-active), var(--hw-color-field-active)) var(--_hw-select-image,); background-repeat: no-repeat; background-position: center bottom var(--_hw-select-position,); background-size: 0% 2px var(--_hw-select-size,); }
+:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:focus:not(:disabled, [readonly]) { background-size: var(--hw-profile-field-focus-line, 0% 2px) var(--_hw-select-size,); }
+:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:active:not(:disabled, [readonly]) { background-size: var(--hw-profile-field-pressed-line, 0% 2px) var(--_hw-select-size,); background-color: var(--hw-dga-on, var(--hw-color-field-background)) var(--hw-dga-off, var(--hw-color-surface-muted)); }
 :is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:focus-visible { border-color: var(--hw-dga-on, var(--hw-color-border-strong)) var(--hw-dga-off, var(--hw-color-field-active)); }
 /* Presence is adapter-owned; validity stays native. Empty optional fields must
    not imply success. Explicit application errors take precedence below. */
 :is(.hw-input, .hw-textarea, .hw-select):where([data-hw-filled='true']):valid,
 :is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:where([data-hw-filled='true']):valid {
-  background-image: linear-gradient(var(--hw-color-primary-text, var(--hw-color-primary)), var(--hw-color-primary-text, var(--hw-color-primary))) var(--_nq-select-image,);
+  background-image: linear-gradient(var(--hw-color-primary-text, var(--hw-color-primary)), var(--hw-color-primary-text, var(--hw-color-primary))) var(--_hw-select-image,);
 }
 :is(.hw-input, .hw-textarea, .hw-select)[aria-invalid='true'],
 :is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled'][aria-invalid='true'] {
   border-color: var(--hw-color-danger);
-  background-image: linear-gradient(var(--hw-color-danger), var(--hw-color-danger)) var(--_nq-select-image,);
+  background-image: linear-gradient(var(--hw-color-danger), var(--hw-color-danger)) var(--_hw-select-image,);
 }
 :is(.hw-input, .hw-textarea, .hw-select)[aria-invalid='true']:is(:hover, :focus, :active) { border-color: var(--hw-color-danger); }
 @supports selector(:user-invalid) {
   :is(.hw-input, .hw-textarea, .hw-select):user-invalid,
-  :is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:user-invalid { border-color: var(--hw-color-danger); background-image: linear-gradient(var(--hw-color-danger), var(--hw-color-danger)) var(--_nq-select-image,); }
+  :is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:user-invalid { border-color: var(--hw-color-danger); background-image: linear-gradient(var(--hw-color-danger), var(--hw-color-danger)) var(--_hw-select-image,); }
   :is(.hw-input, .hw-textarea, .hw-select):user-invalid:is(:hover, :focus, :active) { border-color: var(--hw-color-danger); }
 }
 :is(.hw-input, .hw-textarea, .hw-select):disabled,

package/dist/direction.css

@@ -1,14 +1,14 @@
 /* Resolve reading direction at the closest HTML boundary, independent of language.
    The empty RTL marker enables component-specific values through var() fallbacks. */
 :where([dir='ltr'], [dir='auto']) {
-  --_nq-inline-sign: 1;
-  --_nq-rtl-only: initial;
+  --_hw-inline-sign: 1;
+  --_hw-rtl-only: initial;
 }
 :where([dir='rtl']) {
-  --_nq-inline-sign: -1;
-  --_nq-rtl-only: ;
+  --_hw-inline-sign: -1;
+  --_hw-rtl-only: ;
 }
 /* Scope roots retain the browser's first-strong-text test when CSS is minified. */
 @scope ([dir='auto']:dir(rtl)) {
-  :scope { --_nq-inline-sign: -1; --_nq-rtl-only: ; }
+  :scope { --_hw-inline-sign: -1; --_hw-rtl-only: ; }
 }

package/dist/extended.css

@@ -98,7 +98,7 @@ input.hw-pin-input, .hw-pin-input input:not([type='hidden']) { inline-size: min(
 .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 { --_nq-mirror: var(--_nq-rtl-only) scaleX(-1); transform: var(--_nq-mirror, none); }
+.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; }
@@ -174,7 +174,7 @@ input.hw-pin-input, .hw-pin-input input:not([type='hidden']) { inline-size: min(
 .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: '+'; color: var(--hw-color-text-muted); }.hw-collapsible[open] > summary::after { content: '−'; }
+.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); }

package/dist/icons.css

@@ -24,9 +24,9 @@
 .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-directional='true'] {
-  --_nq-mirror: var(--_nq-rtl-only) scaleX(-1);
-  transform: var(--_nq-mirror, none);
+.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 {
@@ -40,3 +40,28 @@
 .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"); }

package/dist/navigation-drawer.css

@@ -101,3 +101,4 @@ summary.hw-navigation-drawer-row::after {
   summary.hw-navigation-drawer-row::after,
   :is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-header > button::after { background: ButtonText; forced-color-adjust: none; }
 }
+:is(.hw-navigation-drawer, .hw-navigation-drawer-host > hw-drawer > .hw-drawer) > .hw-dialog-header > button:has(.hw-icon)::after { content: none; }

package/dist/nic-accordion.css

@@ -66,15 +66,16 @@
 .hw-accordion-trigger::after {
   position: relative;
   top: var(--hw-profile-accordion-icon-offset, 0px);
-  content: var(--hw-profile-accordion-icon-content, '+');
+  content: var(--hw-profile-accordion-icon-content, '');
   inline-size: var(--hw-profile-accordion-icon-size, 1.5rem);
   block-size: var(--hw-profile-accordion-icon-size, 1.5rem);
-  background: var(--hw-profile-accordion-icon-background, transparent);
-  mask: var(--hw-profile-accordion-icon-mask, none);
+  background: var(--hw-profile-accordion-icon-background, currentColor);
+  mask: var(--hw-profile-accordion-icon-mask, url('./assets/icons/add-01.svg') center / contain no-repeat);
   transition: transform var(--hw-duration-accordion-indicator, 0ms) var(--hw-ease-accordion, ease-in-out);
 }
 .hw-accordion-item[open] > .hw-accordion-trigger::after {
-  content: var(--hw-profile-accordion-icon-content, '−');
+  content: var(--hw-profile-accordion-icon-content, '');
+  mask: var(--hw-profile-accordion-icon-mask, url('./assets/icons/minus-sign.svg') center / contain no-repeat);
   transform: var(--hw-profile-accordion-icon-expanded, none);
 }
 .hw-accordion-item[data-hw-expanded] > .hw-accordion-trigger::after {

package/dist/nic-carousel.css

@@ -12,7 +12,7 @@
 .hw-carousel-viewport { overflow: hidden; padding-block: .5rem; }
 .hw-carousel-track {
   display: flex; gap: var(--hw-carousel-gap, 1rem); inline-size: 100%;
-  transform: translateX(calc(-1 * var(--_nq-inline-sign, 1) * var(--hw-carousel-index, 0) * (100% + var(--hw-carousel-gap, 1rem))));
+  transform: translateX(calc(-1 * var(--_hw-inline-sign, 1) * var(--hw-carousel-index, 0) * (100% + var(--hw-carousel-gap, 1rem))));
   transition: transform var(--hw-duration-carousel) var(--hw-ease-carousel);
 }
 .hw-carousel-track > .hw-carousel-slide { box-sizing: border-box; flex: 0 0 100%; inline-size: 100%; visibility: visible; transition: visibility 0s; }
@@ -40,8 +40,8 @@
 .hw-button.hw-carousel-arrow:hover:not(:disabled) { background: var(--hw-color-primary-hover); }
 .hw-button.hw-carousel-arrow:active:not(:disabled) { background: var(--hw-color-primary-active); }
 .hw-button.hw-carousel-arrow:disabled { opacity: .3; cursor: not-allowed; }
-.hw-carousel-arrow::before { --_nq-rtl-arrow: var(--_nq-rtl-only) '←'; content: var(--_nq-rtl-arrow, '→'); font-family: sans-serif; font-size: 20px; line-height: 1; }
-.hw-carousel-arrow[data-hw-previous]::before { --_nq-rtl-arrow: var(--_nq-rtl-only) '→'; content: var(--_nq-rtl-arrow, '←'); }
+.hw-carousel-arrow::before { content: ''; inline-size: 20px; block-size: 20px; background: currentColor; mask: url('./assets/icons/arrow-right-02.svg') center / contain no-repeat; transform: scaleX(var(--_hw-inline-sign, 1)); }
+.hw-carousel-arrow[data-hw-previous]::before { mask-image: url('./assets/icons/arrow-left-02.svg'); }
 .hw-carousel-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
 /* 12px source dots sit inside 24px targets; the 1px boundary keeps unselected
    controls recognizable against the surface without changing their fill. */

package/dist/nic-choices.css

@@ -40,8 +40,8 @@ label:has(> :is(.hw-checkbox, .hw-radio)) { position: relative; isolation: isola
   content: var(--hw-dga-on, none) var(--hw-dga-off, '');
   visibility: hidden;
 }
-.hw-checkbox::before { inline-size: 5px; block-size: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
-.hw-checkbox:indeterminate::before { inline-size: 10px; block-size: 0; border-width: 0 0 2px; transform: none; }
+.hw-checkbox::before { inline-size: 14px; block-size: 14px; background: currentColor; mask: url('./assets/icons/tick-02.svg') center / contain no-repeat; }
+.hw-checkbox:indeterminate::before { mask-image: url('./assets/icons/minus-sign.svg'); }
 .hw-radio::before { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--hw-choice-mark); }
 :is(.hw-checkbox, .hw-radio):is(:checked, :indeterminate)::before { visibility: visible; }
 :is(.hw-checkbox, .hw-radio):active:not(:disabled, [readonly], [aria-disabled='true']) { border-color: var(--hw-dga-on, revert) var(--hw-dga-off, var(--hw-color-choice-active)); --hw-choice-mark: var(--hw-color-choice-active); }

package/dist/nic-foundations.css

@@ -1,94 +1,94 @@
 /* NIC global.css 427–606. Visual scale is independent of heading semantics. */
 .hw-type {
   font-family: var(--hw-font-sans);
-  font-size: var(--_nq-type-size, var(--hw-text-md));
-  line-height: var(--_nq-type-leading, 1.5);
-  font-weight: var(--hw-type-weight, var(--_nq-type-weight, var(--hw-weight-regular)));
-  margin-block: 0 var(--hw-type-spacing, var(--_nq-type-spacing, 0));
+  font-size: var(--_hw-type-size, var(--hw-text-md));
+  line-height: var(--_hw-type-leading, 1.5);
+  font-weight: var(--hw-type-weight, var(--_hw-type-weight, var(--hw-weight-regular)));
+  margin-block: 0 var(--hw-type-spacing, var(--_hw-type-spacing, 0));
 }
 .hw-type[data-scale='display-2xl'] {
-  --_nq-type-size: var(--hw-text-7xl);
-  --_nq-type-leading: calc(90 / 72);
-  --_nq-type-weight: var(--hw-weight-bold);
-  --_nq-type-spacing: 2.375rem;
+  --_hw-type-size: var(--hw-text-7xl);
+  --_hw-type-leading: calc(90 / 72);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 2.375rem;
 }
 .hw-type[data-scale='display-xl'] {
-  --_nq-type-size: var(--hw-text-6xl);
-  --_nq-type-leading: calc(72 / 60);
-  --_nq-type-weight: var(--hw-weight-bold);
-  --_nq-type-spacing: 1.5rem;
+  --_hw-type-size: var(--hw-text-6xl);
+  --_hw-type-leading: calc(72 / 60);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 1.5rem;
 }
 .hw-type[data-scale='display-lg'] {
-  --_nq-type-size: var(--hw-text-5xl);
-  --_nq-type-leading: calc(60 / 48);
-  --_nq-type-weight: var(--hw-weight-bold);
-  --_nq-type-spacing: 0.625rem;
+  --_hw-type-size: var(--hw-text-5xl);
+  --_hw-type-leading: calc(60 / 48);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 0.625rem;
 }
 .hw-type[data-scale='display-md'] {
-  --_nq-type-size: var(--hw-text-4xl);
-  --_nq-type-leading: calc(44 / 36);
-  --_nq-type-weight: var(--hw-weight-semibold);
-  --_nq-type-spacing: 0.625rem;
+  --_hw-type-size: var(--hw-text-4xl);
+  --_hw-type-leading: calc(44 / 36);
+  --_hw-type-weight: var(--hw-weight-semibold);
+  --_hw-type-spacing: 0.625rem;
 }
 .hw-type[data-scale='display-sm'] {
-  --_nq-type-size: var(--hw-text-3xl);
-  --_nq-type-leading: calc(38 / 30);
-  --_nq-type-weight: var(--hw-weight-bold);
-  --_nq-type-spacing: 0.625rem;
+  --_hw-type-size: var(--hw-text-3xl);
+  --_hw-type-leading: calc(38 / 30);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 0.625rem;
 }
 .hw-type[data-scale='display-xs'] {
-  --_nq-type-size: var(--hw-text-2xl);
-  --_nq-type-leading: calc(32 / 24);
-  --_nq-type-weight: var(--hw-weight-bold);
-  --_nq-type-spacing: 0.625rem;
+  --_hw-type-size: var(--hw-text-2xl);
+  --_hw-type-leading: calc(32 / 24);
+  --_hw-type-weight: var(--hw-weight-bold);
+  --_hw-type-spacing: 0.625rem;
 }
 .hw-type[data-scale='heading-lg'] {
-  --_nq-type-size: var(--hw-text-xl);
-  --_nq-type-leading: calc(30 / 20);
-  --_nq-type-weight: var(--hw-weight-semibold);
-  --_nq-type-spacing: 0.625rem;
+  --_hw-type-size: var(--hw-text-xl);
+  --_hw-type-leading: calc(30 / 20);
+  --_hw-type-weight: var(--hw-weight-semibold);
+  --_hw-type-spacing: 0.625rem;
 }
 .hw-type[data-scale='heading-md'] {
-  --_nq-type-size: var(--hw-text-lg);
-  --_nq-type-leading: calc(28 / 18);
-  --_nq-type-weight: var(--hw-weight-semibold);
-  --_nq-type-spacing: 0.625rem;
+  --_hw-type-size: var(--hw-text-lg);
+  --_hw-type-leading: calc(28 / 18);
+  --_hw-type-weight: var(--hw-weight-semibold);
+  --_hw-type-spacing: 0.625rem;
 }
 .hw-type[data-scale='heading-sm'] {
-  --_nq-type-size: var(--hw-text-md);
-  --_nq-type-leading: calc(24 / 16);
-  --_nq-type-weight: var(--hw-weight-semibold);
-  --_nq-type-spacing: 0.625rem;
+  --_hw-type-size: var(--hw-text-md);
+  --_hw-type-leading: calc(24 / 16);
+  --_hw-type-weight: var(--hw-weight-semibold);
+  --_hw-type-spacing: 0.625rem;
 }
 .hw-type[data-scale='body-xl'] {
-  --_nq-type-size: var(--hw-text-xl);
-  --_nq-type-leading: calc(30 / 20);
-  --_nq-type-weight: var(--hw-weight-regular);
-  --_nq-type-spacing: 0rem;
+  --_hw-type-size: var(--hw-text-xl);
+  --_hw-type-leading: calc(30 / 20);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
 }
 .hw-type[data-scale='body-lg'] {
-  --_nq-type-size: var(--hw-text-lg);
-  --_nq-type-leading: calc(28 / 18);
-  --_nq-type-weight: var(--hw-weight-regular);
-  --_nq-type-spacing: 0rem;
+  --_hw-type-size: var(--hw-text-lg);
+  --_hw-type-leading: calc(28 / 18);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
 }
 .hw-type[data-scale='body-md'] {
-  --_nq-type-size: var(--hw-text-md);
-  --_nq-type-leading: calc(24 / 16);
-  --_nq-type-weight: var(--hw-weight-regular);
-  --_nq-type-spacing: 0rem;
+  --_hw-type-size: var(--hw-text-md);
+  --_hw-type-leading: calc(24 / 16);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
 }
 .hw-type[data-scale='body-sm'] {
-  --_nq-type-size: var(--hw-text-sm);
-  --_nq-type-leading: calc(20 / 14);
-  --_nq-type-weight: var(--hw-weight-regular);
-  --_nq-type-spacing: 0rem;
+  --_hw-type-size: var(--hw-text-sm);
+  --_hw-type-leading: calc(20 / 14);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
 }
 .hw-type[data-scale='body-xs'] {
-  --_nq-type-size: var(--hw-text-xs);
-  --_nq-type-leading: calc(14 / 12);
-  --_nq-type-weight: var(--hw-weight-regular);
-  --_nq-type-spacing: 0rem;
+  --_hw-type-size: var(--hw-text-xs);
+  --_hw-type-leading: calc(14 / 12);
+  --_hw-type-weight: var(--hw-weight-regular);
+  --_hw-type-spacing: 0rem;
 }
 
 .hw-line-clamp {
@@ -103,10 +103,10 @@
 .hw-line-clamp[data-lines='4'] { --hw-clamp-lines: 4; }
 .hw-line-clamp[data-lines='10'] { --hw-clamp-lines: 10; }
 
-.hw-divider[data-tone='primary'] { --_nq-divider-color: var(--hw-color-primary); }
-.hw-divider[data-tone='gold'] { --_nq-divider-color: var(--hw-color-divider-gold); }
-.hw-divider[data-tone='tertiary'] { --_nq-divider-color: var(--hw-color-divider-tertiary); }
-.hw-divider[data-tone] { border-color: var(--_nq-divider-color, var(--hw-color-border)); }
+.hw-divider[data-tone='primary'] { --_hw-divider-color: var(--hw-color-primary); }
+.hw-divider[data-tone='gold'] { --_hw-divider-color: var(--hw-color-divider-gold); }
+.hw-divider[data-tone='tertiary'] { --_hw-divider-color: var(--hw-color-divider-tertiary); }
+.hw-divider[data-tone] { border-color: var(--_hw-divider-color, var(--hw-color-border)); }
 @media (forced-colors: active) {
   .hw-divider[data-tone] { border-color: CanvasText; }
 }

package/dist/nic-links.css

@@ -27,7 +27,7 @@
 :is(.hw-link, .hw-portal-header a)[target='_blank']:not([data-hw-external-icon='none']):not(:has([data-hw-external-icon], .hw-portal-footer-external))::after {
   content: ''; display: inline-block; flex: none; inline-size: 1em; block-size: 1em;
   margin-inline-start: .25em; vertical-align: -.125em;
-  background: currentColor; mask: url('./assets/external-link.svg') center / contain no-repeat;
+  background: currentColor; mask: url('./assets/icons/link-square-02.svg') center / contain no-repeat;
 }
 .hw-link:is([data-variant='subtle'], [data-variant='neutral']) { --hw-link-rest: var(--hw-color-link-neutral); --hw-link-hover: var(--hw-color-link-neutral-hover); --hw-link-active: var(--hw-color-link-neutral-active); --hw-link-visited: var(--hw-color-link-neutral); color: var(--hw-link-rest); text-decoration: none; }
 .hw-link:visited { color: var(--hw-link-visited); }
@@ -47,7 +47,7 @@
 .hw-breadcrumb [aria-disabled='true'] { color: var(--hw-color-on-disabled); cursor: not-allowed; }
 /* Empty generated geometry is decorative; no private icon-font glyph is read
    as content. A logical chevron follows direction independently of language. */
-.hw-breadcrumb li + li::before { content: var(--hw-profile-breadcrumb-separator, '/'); flex: none; inline-size: var(--hw-profile-breadcrumb-size, auto); block-size: var(--hw-profile-breadcrumb-size, auto); margin-inline: var(--hw-profile-breadcrumb-margin, 0px); border-block-start: var(--hw-profile-breadcrumb-border, 0px) solid currentColor; border-inline-end: var(--hw-profile-breadcrumb-border, 0px) solid currentColor; transform: rotate(calc(var(--_nq-inline-sign, 1) * var(--hw-profile-breadcrumb-angle, 0deg))); color: var(--hw-color-text-subtle); }
+.hw-breadcrumb li + li::before { content: var(--hw-profile-breadcrumb-separator, '/'); flex: none; inline-size: var(--hw-profile-breadcrumb-size, auto); block-size: var(--hw-profile-breadcrumb-size, auto); margin-inline: var(--hw-profile-breadcrumb-margin, 0px); border-block-start: var(--hw-profile-breadcrumb-border, 0px) solid currentColor; border-inline-end: var(--hw-profile-breadcrumb-border, 0px) solid currentColor; transform: rotate(calc(var(--_hw-inline-sign, 1) * var(--hw-profile-breadcrumb-angle, 0deg))); color: var(--hw-color-text-subtle); }
 @media (prefers-reduced-motion: reduce) { .hw-breadcrumb a { transition: none; } }
 @media (forced-colors: active) {
   :is(.hw-link, .hw-portal-header a)[target='_blank']::after { background: LinkText; forced-color-adjust: none; }

package/dist/nic-notification-dialog.css

@@ -1,33 +1,33 @@
 /* NIC global.css 3883–3957 and master.js 441–520. The Angular host carries the variant. */
 :where(dialog, hw-dialog)[data-variant='notification'] {
-  --_nq-notice-ink: var(--hw-color-info);
-  --_nq-notice-surface: var(--hw-color-info-subtle);
-  --_nq-notice-border: var(--hw-color-notice-info-border);
-  --_nq-notice-symbol: url('./assets/notifications/info-outline.svg');
+  --_hw-notice-ink: var(--hw-color-info);
+  --_hw-notice-surface: var(--hw-color-info-subtle);
+  --_hw-notice-border: var(--hw-color-notice-info-border);
+  --_hw-notice-symbol: url('./assets/icons/information-circle.svg');
 }
 :where(dialog, hw-dialog)[data-variant='notification'][data-tone='success'] {
-  --_nq-notice-ink: var(--hw-color-success);
-  --_nq-notice-surface: var(--hw-color-success-subtle);
-  --_nq-notice-border: var(--hw-color-notice-success-border);
-  --_nq-notice-symbol: url('./assets/notifications/success-outline.svg');
+  --_hw-notice-ink: var(--hw-color-success);
+  --_hw-notice-surface: var(--hw-color-success-subtle);
+  --_hw-notice-border: var(--hw-color-notice-success-border);
+  --_hw-notice-symbol: url('./assets/icons/checkmark-circle-02.svg');
 }
 :where(dialog, hw-dialog)[data-variant='notification'][data-tone='warning'] {
-  --_nq-notice-ink: var(--hw-color-notice-warning-text);
-  --_nq-notice-surface: var(--hw-color-warning-subtle);
-  --_nq-notice-border: var(--hw-color-notice-warning-border);
-  --_nq-notice-symbol: url('./assets/notifications/warning-outline.svg');
+  --_hw-notice-ink: var(--hw-color-notice-warning-text);
+  --_hw-notice-surface: var(--hw-color-warning-subtle);
+  --_hw-notice-border: var(--hw-color-notice-warning-border);
+  --_hw-notice-symbol: url('./assets/icons/alert-02.svg');
 }
 :where(dialog, hw-dialog)[data-variant='notification'][data-tone='danger'] {
-  --_nq-notice-ink: var(--hw-color-danger);
-  --_nq-notice-surface: var(--hw-color-danger-subtle);
-  --_nq-notice-border: var(--hw-color-notice-danger-border);
-  --_nq-notice-symbol: url('./assets/notifications/danger-outline.svg');
+  --_hw-notice-ink: var(--hw-color-danger);
+  --_hw-notice-surface: var(--hw-color-danger-subtle);
+  --_hw-notice-border: var(--hw-color-notice-danger-border);
+  --_hw-notice-symbol: url('./assets/icons/cancel-circle.svg');
 }
 :where(dialog, hw-dialog)[data-variant='notification'][data-tone='neutral'] {
-  --_nq-notice-ink: var(--hw-color-notice-neutral-text);
-  --_nq-notice-surface: var(--hw-color-badge-neutral-background);
-  --_nq-notice-border: var(--hw-color-notice-neutral-text);
-  --_nq-notice-symbol: url('./assets/notifications/neutral-outline.svg');
+  --_hw-notice-ink: var(--hw-color-notice-neutral-text);
+  --_hw-notice-surface: var(--hw-color-badge-neutral-background);
+  --_hw-notice-border: var(--hw-color-notice-neutral-text);
+  --_hw-notice-symbol: url('./assets/icons/minus-sign-circle.svg');
 }
 
 :is(dialog.hw-dialog[data-variant='notification'], hw-dialog[data-variant='notification'] > dialog.hw-dialog) {
@@ -38,7 +38,7 @@
   padding: 24px;
   overflow: auto;
   border: 0;
-  border-inline-start: 4px solid var(--_nq-notice-border);
+  border-inline-start: 4px solid var(--_hw-notice-border);
   border-radius: 12px;
   background: var(--hw-color-surface);
   color: var(--hw-color-text);
@@ -61,12 +61,12 @@
     justify-self: center;
     pointer-events: none;
   }
-  & > .hw-dialog-header::before { inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--_nq-notice-surface); }
+  & > .hw-dialog-header::before { inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--_hw-notice-surface); }
   & > .hw-dialog-header::after {
     margin-block-start: 12px;
     inline-size: 24px; block-size: 24px;
-    background-color: var(--_nq-notice-ink);
-    mask: var(--_nq-notice-symbol) center / contain no-repeat;
+    background-color: var(--_hw-notice-ink);
+    mask: var(--_hw-notice-symbol) center / contain no-repeat;
   }
   & > .hw-dialog-header > :is(h1, h2, h3) { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: 1.125rem; font-weight: 600; overflow-wrap: anywhere; }
   & > .hw-dialog-header > button {
@@ -74,6 +74,7 @@
     display: grid; place-items: center; gap: 0; inline-size: 40px; min-inline-size: 40px;
     padding: 0; font-size: 0; color: var(--hw-color-text-muted);
   }
+  & > .hw-dialog-header > button:has(.hw-icon)::before { content: none; }
   & > .hw-dialog-header > button::before {
     content: ''; inline-size: 24px; block-size: 24px; background-color: currentColor;
     mask: url('./assets/icons/cancel-01.svg') center / contain no-repeat;

package/dist/nic-notifications.css

@@ -1,22 +1,22 @@
 /* NIC global.css 3797–3876 and master.js 318–412. */
 .hw-toast-region[data-variant='banner'] {
-  --_nq-toast-gutter: 20px;
-  --_nq-toast-top: var(--hw-toast-header-offset, 80px);
+  --_hw-toast-gutter: 20px;
+  --_hw-toast-top: var(--hw-toast-header-offset, 80px);
   box-sizing: border-box;
-  inset-block: var(--_nq-toast-top) auto;
-  inset-inline: auto var(--_nq-toast-gutter);
-  inline-size: min(450px, calc(100% - 2 * var(--_nq-toast-gutter)));
-  max-block-size: calc(100dvh - var(--_nq-toast-top) - var(--_nq-toast-gutter));
+  inset-block: var(--_hw-toast-top) auto;
+  inset-inline: auto var(--_hw-toast-gutter);
+  inline-size: min(450px, calc(100% - 2 * var(--_hw-toast-gutter)));
+  max-block-size: calc(100dvh - var(--_hw-toast-top) - var(--_hw-toast-gutter));
   padding: 0;
   overscroll-behavior: contain;
   /* The viewport edge bounds a fixed stack; notices may be taller when text wraps. */
 }
 .hw-toast-region[data-variant='banner']:is([data-position='top-start'], [data-position='bottom-start']) {
-  inset-inline: var(--_nq-toast-gutter) auto;
+  inset-inline: var(--_hw-toast-gutter) auto;
 }
 .hw-toast-region[data-variant='banner']:is([data-position='bottom-start'], [data-position='bottom-end']) {
-  inset-block: auto var(--_nq-toast-gutter);
-  max-block-size: calc(100dvh - 2 * var(--_nq-toast-gutter));
+  inset-block: auto var(--_hw-toast-gutter);
+  max-block-size: calc(100dvh - 2 * var(--_hw-toast-gutter));
 }
 .hw-toast-region[data-position='inline'] {
   position: static;
@@ -25,10 +25,10 @@
   overflow: visible;
 }
 .hw-toast-region[data-variant='banner'] .hw-toast {
-  --_nq-toast-accent: var(--hw-color-notice-info-border);
-  --_nq-toast-icon: url('./assets/notifications/info.svg');
-  --_nq-toast-text: var(--hw-color-info);
-  --_nq-toast-bg: var(--hw-color-info-subtle);
+  --_hw-toast-accent: var(--hw-color-notice-info-border);
+  --_hw-toast-icon: url('./assets/icons/information-circle.svg');
+  --_hw-toast-text: var(--hw-color-info);
+  --_hw-toast-bg: var(--hw-color-info-subtle);
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   gap: 12px;
@@ -36,10 +36,10 @@
   box-sizing: border-box;
   padding: 16px 24px;
   border: 0;
-  border-block-end: 2px solid var(--_nq-toast-accent);
+  border-block-end: 2px solid var(--_hw-toast-accent);
   border-radius: 0;
-  color: var(--_nq-toast-text);
-  background-color: var(--_nq-toast-bg);
+  color: var(--_hw-toast-text);
+  background-color: var(--_hw-toast-bg);
   box-shadow: var(--hw-toast-banner-shadow, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -1px rgb(0 0 0 / .06));
   font-size: .875rem;
   line-height: 1.5;
@@ -47,40 +47,40 @@
   animation: hw-toast-banner-in 300ms ease-out;
 }
 .hw-toast-region[data-variant='banner'] .hw-toast[data-tone='neutral'] {
-  --_nq-toast-icon: url('./assets/notifications/neutral.svg');
-  --_nq-toast-text: var(--hw-color-notice-neutral-text);
-  --_nq-toast-accent: var(--_nq-toast-text);
-  --_nq-toast-bg: var(--hw-color-badge-neutral-background);
+  --_hw-toast-icon: url('./assets/icons/minus-sign-circle.svg');
+  --_hw-toast-text: var(--hw-color-notice-neutral-text);
+  --_hw-toast-accent: var(--_hw-toast-text);
+  --_hw-toast-bg: var(--hw-color-badge-neutral-background);
 }
 .hw-toast-region[data-variant='banner'] .hw-toast[data-tone='success'] {
-  --_nq-toast-icon: url('./assets/notifications/success.svg');
-  --_nq-toast-text: var(--hw-color-success);
-  --_nq-toast-accent: var(--hw-color-notice-success-border);
-  --_nq-toast-bg: var(--hw-color-success-subtle);
+  --_hw-toast-icon: url('./assets/icons/checkmark-circle-02.svg');
+  --_hw-toast-text: var(--hw-color-success);
+  --_hw-toast-accent: var(--hw-color-notice-success-border);
+  --_hw-toast-bg: var(--hw-color-success-subtle);
 }
 .hw-toast-region[data-variant='banner'] .hw-toast[data-tone='warning'] {
-  --_nq-toast-icon: url('./assets/notifications/warning.svg');
-  --_nq-toast-text: var(--hw-color-notice-warning-text);
-  --_nq-toast-accent: var(--hw-color-notice-warning-border);
-  --_nq-toast-bg: var(--hw-color-warning-subtle);
+  --_hw-toast-icon: url('./assets/icons/alert-02.svg');
+  --_hw-toast-text: var(--hw-color-notice-warning-text);
+  --_hw-toast-accent: var(--hw-color-notice-warning-border);
+  --_hw-toast-bg: var(--hw-color-warning-subtle);
 }
 .hw-toast-region[data-variant='banner'] .hw-toast[data-tone='danger'] {
-  --_nq-toast-icon: url('./assets/notifications/danger.svg');
-  --_nq-toast-text: var(--hw-color-danger);
-  --_nq-toast-accent: var(--hw-color-notice-danger-border);
-  --_nq-toast-bg: var(--hw-color-danger-subtle);
+  --_hw-toast-icon: url('./assets/icons/cancel-circle.svg');
+  --_hw-toast-text: var(--hw-color-danger);
+  --_hw-toast-accent: var(--hw-color-notice-danger-border);
+  --_hw-toast-bg: var(--hw-color-danger-subtle);
 }
 .hw-toast-region[data-variant='banner'] .hw-toast-icon {
   grid-column: 1; inline-size: 20px; block-size: 20px;
   background-color: currentColor;
-  mask: var(--_nq-toast-icon) center / contain no-repeat;
+  mask: var(--_hw-toast-icon) center / contain no-repeat;
 }
 .hw-toast-region[data-variant='banner'] .hw-toast-content { grid-column: 2; min-inline-size: 0; }
 .hw-toast-region[data-variant='banner'] .hw-toast-content p { color: inherit; }
 .hw-toast-region[data-variant='banner'] .hw-toast-dismiss { grid-column: 3; grid-row: 1; align-self: center; color: inherit; }
-@keyframes hw-toast-banner-in { from { opacity: 0; transform: translateX(calc(100% * var(--_nq-inline-sign, 1))); } }
+@keyframes hw-toast-banner-in { from { opacity: 0; transform: translateX(calc(100% * var(--_hw-inline-sign, 1))); } }
 @media (max-width: 576px) {
-  .hw-toast-region[data-variant='banner'] { --_nq-toast-gutter: 10px; --_nq-toast-top: var(--hw-toast-header-offset, 70px); }
+  .hw-toast-region[data-variant='banner'] { --_hw-toast-gutter: 10px; --_hw-toast-top: var(--hw-toast-header-offset, 70px); }
 }
 @media (prefers-reduced-motion: reduce) {
   .hw-toast-region[data-variant='banner'] .hw-toast { animation: none; }
@@ -122,3 +122,5 @@
     background-color: ButtonText;
   }
 }
+/* A dismiss button that carries its own DGA icon element does not need the drawn one. */
+.hw-toast-region[data-variant='banner'] .hw-toast-dismiss:has(.hw-icon)::before { content: none; }