ngwr 12.2.0 → 13.0.1

package/breadcrumbs/styles/_rules.scss

@@ -0,0 +1,84 @@
+// Breadcrumbs. The separator glyph comes from `--wr-breadcrumbs-separator`
+// (set by the component from the `[separator]` input). All items except
+// the first prepend the glyph via a `::before` pseudo-element.
+
+// `focus` is the one theme partial these rules still load that emits CSS of its
+// own — the shared ring mixin lives in the same file as the baseline
+// `.wr-*:focus-visible` rules, and there is no mixin-only module to take it from.
+// That is ~4 KB of rules identical to the global sheet's, against the ~24 KB token
+// layer the split removes, and it is the honest trade: hand-rolling the three
+// declarations here is what the shared mixin exists to prevent.
+@use '../../theme/styles/focus';
+
+.wr-breadcrumbs {
+  --wr-breadcrumbs-separator: '/';
+  --wr-breadcrumbs-gap: 0.5rem;
+  --wr-breadcrumbs-color: rgba(var(--wr-color-on-surface-rgb), 0.6);
+  --wr-breadcrumbs-current-color: var(--wr-color-on-surface);
+  --wr-breadcrumbs-link-color: var(--wr-color-primary-ink);
+  --wr-breadcrumbs-separator-color: rgba(var(--wr-color-on-surface-rgb), 0.3);
+
+  display: block;
+  font-family: var(--wr-font-family-base);
+  font-size: var(--wr-text-sm);
+  color: var(--wr-breadcrumbs-color);
+
+  &__nav {
+    display: block;
+  }
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--wr-breadcrumbs-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--wr-breadcrumbs-gap);
+
+    // Separator before every item except the first.
+    &:not(:first-child)::before {
+      content: var(--wr-breadcrumbs-separator);
+      color: var(--wr-breadcrumbs-separator-color);
+      user-select: none;
+    }
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--wr-breadcrumbs-link-color);
+    text-decoration: none;
+    border-radius: var(--wr-border-radius-sm);
+    transition: color 0.15s ease;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:focus-visible {
+      @include focus.focus-ring;
+      outline-offset: 2px;
+    }
+  }
+
+  &__current {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--wr-breadcrumbs-current-color);
+    font-weight: 600;
+  }
+
+  &__icon {
+    --wr-icon-size: 1rem;
+    flex: 0 0 auto;
+  }
+}

package/card/card.scss

@@ -1 +1 @@
-@forward './styles';
+@forward './styles/rules';

package/card/styles/_index.scss

@@ -1,96 +1,15 @@
-@use '../../theme/styles' as theme;
-
-.wr-card {
-  --wr-card-bg: var(--wr-color-surface);
-  --wr-card-color: var(--wr-color-on-surface);
-  --wr-card-border: var(--wr-color-outline);
-  --wr-card-radius: var(--wr-border-radius-base);
-  --wr-card-padding-y: 1rem;
-  --wr-card-padding-x: 1.25rem;
-  --wr-card-shadow: var(--wr-shadow-xs);
-  --wr-card-shadow-hover: var(--wr-shadow-overlay);
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background: var(--wr-card-bg);
-  color: var(--wr-card-color);
-  @include theme.smooth-br(var(--wr-card-radius));
-  box-shadow: var(--wr-card-shadow);
-  font-family: var(--wr-font-family-base);
-  transition:
-    box-shadow var(--wr-transition-base),
-    transform var(--wr-transition-base);
-
-  &--bordered {
-    border: 1px solid var(--wr-card-border);
-  }
-
-  &--hoverable {
-    cursor: pointer;
-
-    &:hover {
-      box-shadow: var(--wr-card-shadow-hover);
-      transform: translateY(-1px);
-    }
-  }
-
-  &--compact {
-    --wr-card-padding-y: 0.5rem;
-    --wr-card-padding-x: 0.75rem;
-  }
-
-  &--loading &__body {
-    opacity: 0.6;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-    padding: var(--wr-card-padding-y) var(--wr-card-padding-x);
-    border-bottom: 1px solid var(--wr-card-border);
-    font-weight: 500;
-  }
-
-  &__body {
-    flex: 1 1 auto;
-    padding: var(--wr-card-padding-y) var(--wr-card-padding-x);
-  }
-
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    padding: var(--wr-card-padding-y) var(--wr-card-padding-x);
-    border-top: 1px solid var(--wr-card-border);
-  }
-
-  &__loading {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    @include theme.smooth-br(var(--wr-card-radius));
-    background: rgba(var(--wr-color-surface-rgb), 0.5);
-    pointer-events: none;
-  }
-
-  &__spinner {
-    width: 1.5rem;
-    height: 1.5rem;
-    border: 2px solid rgb(var(--wr-color-on-surface-muted-rgb) / 30%);
-    border-top-color: var(--wr-color-primary);
-    border-radius: 50%;
-    animation: wr-card-spin 0.7s linear infinite;
-  }
-}
-
-@keyframes wr-card-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
+// Public Sass entry for `@use 'ngwr/card'`.
+//
+// Pulls the whole theme so a standalone import still brings in every design
+// token these rules reference, then loads the rules themselves from `_rules`.
+//
+// The split is what keeps the token layer out of the JavaScript bundle.
+// `card.scss` is the component's `styleUrl`, and a component stylesheet is
+// its OWN Sass compilation — `@use` only deduplicates within one. So while the
+// umbrella sheet emits the theme once, forwarding it from here would inline a
+// second, byte-identical copy of `:root`, `[data-theme='dark']` and the
+// box-sizing reset into the compiled component styles, which ng-packagr then
+// embeds in the FESM bundle as a string. `card.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/card/styles/_rules.scss

@@ -0,0 +1,96 @@
+@use '../../theme/styles/mixins' as theme;
+
+.wr-card {
+  --wr-card-bg: var(--wr-color-surface);
+  --wr-card-color: var(--wr-color-on-surface);
+  --wr-card-border: var(--wr-color-outline);
+  --wr-card-radius: var(--wr-border-radius-base);
+  --wr-card-padding-y: 1rem;
+  --wr-card-padding-x: 1.25rem;
+  --wr-card-shadow: var(--wr-shadow-xs);
+  --wr-card-shadow-hover: var(--wr-shadow-overlay);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--wr-card-bg);
+  color: var(--wr-card-color);
+  @include theme.smooth-br(var(--wr-card-radius));
+  box-shadow: var(--wr-card-shadow);
+  font-family: var(--wr-font-family-base);
+  transition:
+    box-shadow var(--wr-transition-base),
+    transform var(--wr-transition-base);
+
+  &--bordered {
+    border: 1px solid var(--wr-card-border);
+  }
+
+  &--hoverable {
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: var(--wr-card-shadow-hover);
+      transform: translateY(-1px);
+    }
+  }
+
+  &--compact {
+    --wr-card-padding-y: 0.5rem;
+    --wr-card-padding-x: 0.75rem;
+  }
+
+  &--loading &__body {
+    opacity: 0.6;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: var(--wr-card-padding-y) var(--wr-card-padding-x);
+    border-bottom: 1px solid var(--wr-card-border);
+    font-weight: 500;
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    padding: var(--wr-card-padding-y) var(--wr-card-padding-x);
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: var(--wr-card-padding-y) var(--wr-card-padding-x);
+    border-top: 1px solid var(--wr-card-border);
+  }
+
+  &__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include theme.smooth-br(var(--wr-card-radius));
+    background: rgba(var(--wr-color-surface-rgb), 0.5);
+    pointer-events: none;
+  }
+
+  &__spinner {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid rgb(var(--wr-color-on-surface-muted-rgb) / 30%);
+    border-top-color: var(--wr-color-primary);
+    border-radius: 50%;
+    animation: wr-card-spin 0.7s linear infinite;
+  }
+}
+
+@keyframes wr-card-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/cascader/cascader.scss

@@ -1 +1 @@
-@forward './styles';
+@forward './styles/rules';

package/cascader/styles/_index.scss

@@ -1,244 +1,15 @@
-// Cascader. The trigger reuses the wr-select look-and-feel; the panel
-// is a horizontal row of columns where each column lists the children
-// of the previously-active node. Picking a leaf commits the path.
-
-@use '../../theme/styles' as theme;
-
-.wr-cascader {
-  --wr-cascader-color: var(--wr-color-on-surface);
-  --wr-cascader-bg: var(--wr-color-surface);
-  --wr-cascader-border: var(--wr-color-outline);
-  --wr-cascader-radius: var(--wr-control-radius-md);
-  --wr-cascader-padding-y: var(--wr-control-padding-y-md);
-  --wr-cascader-padding-x: var(--wr-control-padding-x-md);
-  --wr-cascader-font-size: var(--wr-control-font-size-md);
-  --wr-cascader-line-height: var(--wr-control-line-height-md);
-  --wr-cascader-col-width: 12rem;
-  --wr-cascader-max-height: 16rem;
-
-  display: inline-flex;
-  vertical-align: middle;
-
-  &--disabled {
-    --wr-cascader-color: var(--wr-color-on-surface-muted);
-    --wr-cascader-bg: var(--wr-color-fill);
-  }
-
-  // Sizes — trigger on the control contract (sm 22 / md 30 / lg 36).
-  &--sm {
-    --wr-cascader-radius: var(--wr-control-radius-sm);
-    --wr-cascader-padding-y: var(--wr-control-padding-y-sm);
-    --wr-cascader-padding-x: var(--wr-control-padding-x-sm);
-    --wr-cascader-font-size: var(--wr-control-font-size-sm);
-    --wr-cascader-line-height: var(--wr-control-line-height-sm);
-  }
-
-  &--lg {
-    --wr-cascader-radius: var(--wr-control-radius-lg);
-    --wr-cascader-padding-y: var(--wr-control-padding-y-lg);
-    --wr-cascader-padding-x: var(--wr-control-padding-x-lg);
-    --wr-cascader-font-size: var(--wr-control-font-size-lg);
-    --wr-cascader-line-height: var(--wr-control-line-height-lg);
-  }
-
-  &__trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    width: 100%;
-    min-width: 12rem;
-    appearance: none;
-    background: var(--wr-cascader-bg);
-    color: var(--wr-cascader-color);
-    border: 1px solid var(--wr-cascader-border);
-    border-radius: var(--wr-cascader-radius);
-    // Density-multiplied like select / input / textarea / button: the trigger
-    // sources the same `--wr-control-padding-*` contract they do, so without
-    // the multiplier it held its md height (30px) while its neighbours grew —
-    // measured at 35.59px for input / select under `touch`.
-    padding: calc(var(--wr-cascader-padding-y) * var(--wr-density-y, 1))
-      calc(var(--wr-cascader-padding-x) * var(--wr-density-x, 1));
-    font-family: var(--wr-font-family-base);
-    font-size: var(--wr-cascader-font-size);
-    line-height: var(--wr-cascader-line-height);
-    cursor: pointer;
-    text-align: start;
-    transition:
-      border-color var(--wr-transition-base),
-      box-shadow var(--wr-transition-base);
-
-    &:focus-visible {
-      border-color: var(--wr-color-primary);
-      @include theme.focus-ring;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  &--open &__trigger {
-    border-color: var(--wr-color-primary);
-    box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
-  }
-
-  &__value,
-  &__placeholder {
-    flex: 1 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__placeholder {
-    color: var(--wr-color-text-muted);
-  }
-
-  &__chevron {
-    --wr-icon-size: 1rem;
-    flex: 0 0 auto;
-    color: var(--wr-color-on-surface-muted);
-    transition: transform var(--wr-transition-base);
-  }
-
-  &--open &__chevron {
-    transform: rotate(180deg);
-  }
-
-  &__clear {
-    --wr-icon-size: 0.875rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.125rem;
-    height: 1.125rem;
-    border-radius: 999px;
-    color: var(--wr-color-on-surface-muted);
-    cursor: pointer;
-    transition:
-      background 0.12s ease,
-      color 0.12s ease;
-
-    &:hover {
-      background: rgba(var(--wr-color-on-surface-rgb), 0.06);
-      color: var(--wr-color-on-surface);
-    }
-  }
-}
-
-.wr-cascader-overlay {
-  padding-top: 0.25rem;
-}
-
-.wr-cascader-panel {
-  // Option sizing — mirrored from the trigger size (panel is portaled, so it
-  // can't inherit the host size class). Default md.
-  --wr-cascader-opt-font: var(--wr-control-font-size-md);
-  --wr-cascader-opt-py: 0.5rem;
-
-  display: flex;
-  background: var(--wr-color-surface);
-  border: 1px solid var(--wr-color-outline);
-  border-radius: var(--wr-border-radius-base);
-  box-shadow: var(--wr-shadow-overlay);
-  font-family: var(--wr-font-family-base);
-  font-size: var(--wr-cascader-opt-font);
-  overflow: hidden;
-
-  &--sm {
-    --wr-cascader-opt-font: var(--wr-control-font-size-sm);
-    --wr-cascader-opt-py: 0.375rem;
-  }
-
-  &--lg {
-    --wr-cascader-opt-font: var(--wr-control-font-size-lg);
-    --wr-cascader-opt-py: 0.625rem;
-  }
-
-  .wr-cascader__col {
-    list-style: none;
-    margin: 0;
-    // Inset padding so options read as rounded pills, matching the select panel.
-    padding: 0.25rem;
-    width: var(--wr-cascader-col-width, 12rem);
-    max-height: var(--wr-cascader-max-height, 16rem);
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 0.125rem;
-
-    + .wr-cascader__col {
-      border-inline-start: 1px solid var(--wr-color-outline);
-    }
-  }
-
-  // Options mirror .wr-option (rounded pill, soft primary tint when active).
-  .wr-cascader__opt {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: var(--wr-cascader-opt-py) 0.625rem;
-    border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-on-surface);
-    cursor: pointer;
-    transition: background var(--wr-transition-short);
-
-    &:hover {
-      background: var(--wr-color-hover);
-    }
-
-    &--active {
-      background: var(--wr-color-primary-soft);
-      // Text on the intent's own `-soft` tint, which is exactly what `-ink` is
-      // calibrated against. Bare measured 4.17:1 light / 3.65:1 dark.
-      color: var(--wr-color-primary-ink);
-      font-weight: 500;
-    }
-
-    &--disabled {
-      color: var(--wr-color-on-surface-muted);
-      cursor: not-allowed;
-      opacity: var(--wr-disabled-opacity);
-
-      &:hover {
-        background: transparent;
-      }
-    }
-  }
-
-  .wr-cascader__opt-label {
-    flex: 1 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .wr-cascader__opt-arrow {
-    --wr-icon-size: 0.875rem;
-    flex: 0 0 auto;
-    color: var(--wr-color-on-surface-muted);
-  }
-
-  // The panel is a flex row, so its columns cascade toward the inline end —
-  // leftward under `dir="rtl"`. The branch arrow is drawn pointing physically
-  // right, so turn it around with them, the way the carousel's arrows do.
-  [dir='rtl'] & .wr-cascader__opt-arrow {
-    transform: scaleX(-1);
-  }
-}
-
-// Touch pointers: grow the clear button and make the column option rows ~44px
-// tall so each is a comfortable tap target. Fine pointers keep the compact
-// desktop sizing above.
-@media (pointer: coarse) {
-  .wr-cascader__clear {
-    --wr-icon-size: 1.125rem;
-    width: 2rem;
-    height: 2rem;
-  }
-
-  .wr-cascader-panel .wr-cascader__opt {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-}
+// Public Sass entry for `@use 'ngwr/cascader'`.
+//
+// Pulls the whole theme so a standalone import still brings in every design
+// token these rules reference, then loads the rules themselves from `_rules`.
+//
+// The split is what keeps the token layer out of the JavaScript bundle.
+// `cascader.scss` is the component's `styleUrl`, and a component stylesheet is
+// its OWN Sass compilation — `@use` only deduplicates within one. So while the
+// umbrella sheet emits the theme once, forwarding it from here would inline a
+// second, byte-identical copy of `:root`, `[data-theme='dark']` and the
+// box-sizing reset into the compiled component styles, which ng-packagr then
+// embeds in the FESM bundle as a string. `cascader.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';