ngwr 6.0.0 → 7.0.0

package/page-header/styles/_index.scss

@@ -0,0 +1,78 @@
+@use '../../theme/styles' as theme;
+
+.wr-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  // Always claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  padding: 1.5rem 0 1.25rem;
+  border-bottom: 1px solid var(--wr-color-light);
+  font-family: var(--wr-font-family-base);
+
+  &__breadcrumbs {
+    font-size: var(--wr-text-sm);
+    color: var(--wr-color-medium);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__main {
+    display: flex;
+    align-items: flex-end;
+    gap: 1rem 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  &__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: var(--wr-text-3xl);
+    font-weight: var(--wr-font-weight-bold);
+    line-height: var(--wr-leading-tight);
+    letter-spacing: -0.015em;
+    color: var(--wr-color-dark);
+  }
+
+  &__subtitle {
+    margin: 0;
+    font-size: var(--wr-text-base);
+    line-height: var(--wr-leading-normal);
+    color: var(--wr-color-medium);
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    flex: 0 0 auto;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__extra {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    padding-top: 0.25rem;
+
+    &:empty {
+      display: none;
+    }
+  }
+}

package/pagination/styles/_index.scss

@@ -1,60 +1,115 @@
-@forward "./vars";
+@use '../../theme/styles' as theme;
 
 .wr-pagination {
-  --wr-select-option-height: var(--wr-pagination-select-option-height);
-  --wr-select-padding-y: var(--wr-pagination-select-padding-y);
-  --wr-select-padding-x: var(--wr-pagination-select-padding-x);
-
   display: block;
 
-  &-container {
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &__inner {
     display: flex;
     align-items: center;
-    gap: var(--wr-pagination-gap);
+    gap: 1rem;
+    flex-wrap: wrap;
   }
 
-  &--start {
+  &--start &__inner {
     justify-content: flex-start;
   }
-
-  &--center {
+  &--center &__inner {
     justify-content: center;
   }
-
-  &--end {
+  &--end &__inner {
     justify-content: flex-end;
   }
 
-  &--disabled {
-    opacity: 0.6;
-    pointer-events: none;
+  &__total {
+    color: var(--wr-color-medium);
+    font-family: var(--wr-font-family-base);
+    font-size: 0.8125rem;
   }
 
-  &-total {
-    color: var(--wr-pagination-total-color);
-    font-size: var(--wr-pagination-font-size);
-  }
-
-  &-items {
+  &__nav {
     display: flex;
     align-items: center;
-    gap: var(--wr-pagination-items-gap);
+    gap: 0.25rem;
+
+    .wr-btn {
+      min-width: var(--wr-pagination-cell, 2rem);
+      // Lock height to the cell so every size renders square cells —
+      // the button's own padding would otherwise make them taller than
+      // wide. Wider page numbers still grow past min-width.
+      height: var(--wr-pagination-cell, 2rem);
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
   }
 
-  &-ellipsis {
-    color: var(--wr-pagination-ellipsis-color);
-    padding: 0 var(--wr-pagination-item-padding);
+  &__ellipsis {
+    display: inline-flex;
+    min-width: var(--wr-pagination-cell, 2rem);
+    justify-content: center;
+    color: var(--wr-color-medium);
     user-select: none;
   }
 
-  wr-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: var(--wr-pagination-item-size);
-    height: var(--wr-pagination-item-size);
-    padding: 0;
-    gap: 0;
-    text-align: center;
+  &__size {
+    min-width: 0;
+  }
+
+  // Size variants. `xs` and `xl` extend the button scale by overriding
+  // its CSS custom properties on the strip — the button itself still
+  // gets the closest built-in size (sm or lg) via [size] so its other
+  // tokens stay consistent.
+  &--xs {
+    --wr-pagination-cell: 1.5rem;
+
+    .wr-btn {
+      --wr-btn-padding-x: 0.375rem;
+      --wr-btn-font-size: 0.6875rem;
+      --wr-btn-line-height: 0.875rem;
+      --wr-btn-icon-size: 0.75rem;
+    }
+  }
+  &--sm {
+    --wr-pagination-cell: 1.75rem;
+  }
+  &--md {
+    --wr-pagination-cell: 2rem;
+  }
+  &--lg {
+    --wr-pagination-cell: 2.5rem;
+  }
+  &--xl {
+    --wr-pagination-cell: 3rem;
+
+    .wr-btn {
+      --wr-btn-padding-x: 1rem;
+      --wr-btn-font-size: 1.125rem;
+      --wr-btn-line-height: 1.75rem;
+      --wr-btn-icon-size: 1.25rem;
+    }
+  }
+
+  // Shape variants. `rounded` is the default the buttons already render.
+  // `square` flattens every cell for a tighter numeric grid — useful
+  // when the pagination sits inside a data table. End caps keep a small
+  // radius so the strip still reads as a single grouped control.
+  &--square &__nav .wr-btn {
+    --wr-btn-radius: 0;
+    corner-shape: round;
+    border-radius: 0;
+  }
+  &--square &__nav .wr-btn:first-child {
+    border-top-left-radius: var(--wr-border-radius-sm);
+    border-bottom-left-radius: var(--wr-border-radius-sm);
+  }
+  &--square &__nav .wr-btn:last-child {
+    border-top-right-radius: var(--wr-border-radius-sm);
+    border-bottom-right-radius: var(--wr-border-radius-sm);
   }
 }

package/popconfirm/styles/_index.scss

@@ -0,0 +1,32 @@
+@use '../../theme/styles' as theme;
+
+.wr-popconfirm-overlay {
+  > .wr-popconfirm {
+    display: block;
+    min-width: 14rem;
+    max-width: 22rem;
+    padding: 0.875rem 1rem;
+    background: var(--wr-color-white);
+    border: 1px solid var(--wr-color-light);
+    border-radius: var(--wr-border-radius-base);
+    box-shadow: var(--wr-shadow-overlay);
+    color: var(--wr-color-dark);
+    font-family: var(--wr-font-family-base);
+    animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
+    transform-origin: top left;
+  }
+}
+
+.wr-popconfirm {
+  &__message {
+    margin: 0 0 0.625rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.375rem;
+  }
+}

package/popover/styles/_index.scss

@@ -0,0 +1,83 @@
+@use '../../theme/styles' as theme;
+
+.wr-popover-overlay {
+  > * {
+    display: block;
+    min-width: 8rem;
+    max-width: 22rem;
+    background: var(--wr-color-white);
+    border: 1px solid var(--wr-color-light);
+    @include theme.smooth-br(var(--wr-border-radius-base));
+    box-shadow: var(--wr-shadow-overlay);
+    font-family: var(--wr-font-family-base);
+    color: var(--wr-color-dark);
+    animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
+    transform-origin: top left;
+  }
+}
+
+//
+// Tooltip mode — small dark text panel rendered inside the overlay.
+// (Folded in from the deprecated wr-tooltip entry-point; use
+// `<… [wrPopover]="'text'" mode="tooltip">` instead.)
+//
+
+.wr-tooltip-overlay {
+  pointer-events: none;
+}
+
+.wr-tooltip {
+  position: relative;
+  display: inline-block;
+  max-width: 18rem;
+  padding: 0.3125rem 0.5rem;
+  background: var(--wr-color-dark);
+  color: var(--wr-color-dark-contrast);
+  border-radius: var(--wr-border-radius-sm);
+  font-family: var(--wr-font-family-base);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
+  transform-origin: top left;
+
+  // Arrow
+  &::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: var(--wr-color-dark);
+    transform: rotate(45deg);
+  }
+}
+
+// Arrow placement is dictated by the overlay panel's position modifier
+// (the wr-tooltip-overlay--top|bottom|left|right class lives on the
+// portal host wrapping the tooltip).
+.wr-tooltip-overlay--top .wr-tooltip::after {
+  left: 50%;
+  bottom: -3px;
+  margin-left: -3px;
+}
+.wr-tooltip-overlay--bottom .wr-tooltip::after {
+  left: 50%;
+  top: -3px;
+  margin-left: -3px;
+}
+.wr-tooltip-overlay--left .wr-tooltip::after {
+  top: 50%;
+  right: -3px;
+  margin-top: -3px;
+}
+.wr-tooltip-overlay--right .wr-tooltip::after {
+  top: 50%;
+  left: -3px;
+  margin-top: -3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wr-tooltip {
+    animation: none;
+  }
+}

package/progress/styles/_index.scss

@@ -1,24 +1,39 @@
-@forward './vars';
-@forward './theming';
+@use '../../theme/styles' as theme;
 
 .wr-progress {
   position: relative;
+  display: block;
   overflow: hidden;
 
-  height: var(--wr-progress-height);
-  width: 100%;
+  // Defaults — color modifiers override the bar color.
+  --wr-progress-height: 0.5rem;
+  --wr-progress-radius: var(--wr-border-radius-pill);
+  --wr-progress-track: rgba(var(--wr-color-light-rgb), 0.35);
+  --wr-progress-bar: var(--wr-color-primary);
 
-  background: var(--wr-progress-bg-color);
-  border-radius: var(--wr-progress-border-radius);
+  // `flex: 1 1 100%` here would claim 100% basis on the flex MAIN axis —
+  // fine in a row wrapper (=full width), broken in a column wrapper
+  // (8 bars each demanding 100% of the column height → each shrinks to
+  // 1/8). Use `flex: 0 1 auto` so the explicit `height` wins regardless,
+  // and consumers who need it row-stretched set `flex: 1` on the wrapper.
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  height: var(--wr-progress-height);
+  border-radius: var(--wr-progress-radius);
+  background: var(--wr-progress-track);
 
-  &__bg {
-    position: absolute;
+  &__bar {
     height: 100%;
-    background: var(--wr-progress-color);
-    border-top-right-radius: var(--wr-progress-border-radius);
-    border-bottom-right-radius: var(--wr-progress-border-radius);
-    transition: var(--wr-transition-base);
+    background: var(--wr-progress-bar);
+    border-radius: inherit;
+    transition: width var(--wr-transition-base);
   }
-}
-
 
+  @each $name in theme.$colors {
+    &--#{$name} {
+      --wr-progress-track: rgba(var(--wr-color-#{$name}-rgb), 0.2);
+      --wr-progress-bar: var(--wr-color-#{$name});
+    }
+  }
+}

package/qr/styles/_index.scss

@@ -1,7 +1,10 @@
-.wr-qrcode {
+@use '../../theme/styles' as theme;
+
+.wr-qr {
   display: inline-block;
-  padding: 0;
-  margin: 0;
+  line-height: 0;
+  @include theme.smooth-br(var(--wr-border-radius-base));
+  overflow: hidden;
 
   > canvas {
     display: block;

package/radio/styles/_index.scss

@@ -0,0 +1,111 @@
+@use '../../theme/styles' as theme;
+
+.wr-radio {
+  --wr-radio-size: 1.125rem;
+  --wr-radio-bg: var(--wr-color-white);
+  --wr-radio-border: var(--wr-color-light);
+  --wr-radio-dot: transparent;
+  --wr-radio-color: var(--wr-color-dark);
+
+  display: inline-flex;
+  vertical-align: middle;
+  color: var(--wr-radio-color);
+  font-family: var(--wr-font-family-base);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+
+  &__label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+
+    &:focus-visible + .wr-radio__dot {
+      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
+    }
+  }
+
+  &__dot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: var(--wr-radio-size);
+    height: var(--wr-radio-size);
+    background: var(--wr-radio-bg);
+    border: 1px solid var(--wr-radio-border);
+    border-radius: 50%;
+    transition: var(--wr-transition-base);
+
+    &::after {
+      content: '';
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background: var(--wr-radio-dot);
+      transform: scale(0);
+      transition: transform var(--wr-transition-base);
+    }
+  }
+
+  &__label:hover &__dot {
+    --wr-radio-border: var(--wr-color-primary);
+  }
+
+  &__icon {
+    --wr-icon-size: calc(var(--wr-radio-size) - 0.375rem);
+    color: var(--wr-color-primary-contrast);
+    opacity: 0;
+    transform: scale(0.7);
+    transition:
+      transform var(--wr-transition-base),
+      opacity var(--wr-transition-base);
+  }
+
+  &--has-icon &__dot::after {
+    display: none;
+  }
+
+  &--has-icon.wr-radio--checked {
+    --wr-radio-bg: var(--wr-color-primary);
+  }
+
+  &--checked {
+    --wr-radio-border: var(--wr-color-primary);
+    --wr-radio-dot: var(--wr-color-primary);
+
+    .wr-radio__dot::after {
+      transform: scale(1);
+    }
+
+    .wr-radio__icon {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  &--disabled {
+    --wr-radio-color: var(--wr-color-medium);
+    pointer-events: none;
+    opacity: 0.6;
+  }
+}
+
+.wr-radio-group {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}

package/rating/styles/_index.scss

@@ -0,0 +1,63 @@
+@use '../../theme/styles' as theme;
+
+.wr-rating {
+  --wr-rating-size: 1.25rem;
+  --wr-rating-gap: 0.125rem;
+  --wr-rating-empty: var(--wr-color-light);
+  --wr-rating-filled: var(--wr-color-warning, #ffba00);
+
+  display: inline-flex;
+  font-family: var(--wr-font-family-base);
+
+  &__row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--wr-rating-gap);
+    outline: 0;
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
+      border-radius: var(--wr-border-radius-sm);
+    }
+  }
+
+  &__slot {
+    position: relative;
+    display: inline-block;
+    width: var(--wr-rating-size);
+    height: var(--wr-rating-size);
+    line-height: 0;
+    color: var(--wr-rating-empty);
+
+    &--interactive {
+      cursor: pointer;
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &__icon--fg {
+    color: var(--wr-rating-filled);
+    // `--wr-rating-fill` is set per-slot from the component (0..1).
+    clip-path: inset(0 calc((1 - var(--wr-rating-fill, 0)) * 100%) 0 0);
+    transition: clip-path var(--wr-transition-base);
+  }
+
+  &--readonly &__slot {
+    cursor: default;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+
+    .wr-rating__slot {
+      cursor: not-allowed;
+    }
+  }
+}

package/result/styles/_index.scss

@@ -0,0 +1,69 @@
+@use '../../theme/styles' as theme;
+
+.wr-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 2.5rem 1.5rem;
+  // Match `<wr-empty>` — claim the parent's box so the result reads as
+  // a full-area state, not a compact tile floating top-left.
+  width: 100%;
+  min-height: 100%;
+  text-align: center;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+
+  &__icon {
+    line-height: 0;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: var(--wr-text-2xl);
+    font-weight: var(--wr-font-weight-semibold);
+    line-height: var(--wr-leading-tight);
+    letter-spacing: var(--wr-tracking-tight);
+  }
+
+  &__description {
+    margin: 0;
+    max-width: 32rem;
+    font-size: var(--wr-text-sm);
+    color: var(--wr-color-medium);
+    line-height: var(--wr-leading-relaxed);
+  }
+
+  &__extra {
+    margin-top: 0.5rem;
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &--success &__icon {
+    color: var(--wr-color-success);
+  }
+
+  &--warning &__icon {
+    color: var(--wr-color-warning);
+  }
+
+  &--error &__icon {
+    color: var(--wr-color-danger);
+  }
+
+  &--info &__icon {
+    color: var(--wr-color-primary);
+  }
+
+  &--empty &__icon {
+    color: var(--wr-color-medium);
+  }
+}

package/rotating-text/rotating-text.scss

@@ -0,0 +1 @@
+@forward './styles';

package/rotating-text/styles/_index.scss

@@ -0,0 +1,39 @@
+// Cycling-text rotator (reactbits port). The host clips overflow so the
+// chars can translate above/below without leaking outside the line.
+
+.wr-rotating-text {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  &__inner {
+    display: inline-flex;
+    flex-wrap: wrap;
+  }
+
+  &__word {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__char {
+    display: inline-block;
+    will-change: transform, opacity;
+  }
+
+  &__space {
+    display: inline;
+    white-space: pre;
+  }
+}