ngwr 6.1.1 → 7.0.0

package/date-picker/styles/_index.scss

@@ -0,0 +1,204 @@
+@use '../../theme/styles' as theme;
+
+.wr-date-picker {
+  display: inline-block;
+
+  // Inner button — same affix sizing rules as wr-input-group's toggle.
+  &__trigger {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0 var(--wr-input-group-padding-x, 0.75rem);
+    color: var(--wr-color-medium);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    pointer-events: auto;
+    transition: color var(--wr-transition-base);
+
+    &:hover:not(:disabled) {
+      color: var(--wr-color-primary);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+}
+
+// Overlay pane — z-index isolation only. <wr-calendar> + the time panel
+// bring their own chrome.
+.wr-date-picker-overlay {
+  z-index: 1050;
+}
+
+// Time-only mode attaches the bare stepper as the overlay content — it
+// has to bring the panel chrome the calendar otherwise provides.
+.wr-date-picker-overlay > .wr-time-picker {
+  padding: 0.5rem 0.75rem;
+  background: var(--wr-time-picker-bg);
+  border: 1px solid var(--wr-time-picker-border);
+  border-radius: var(--wr-border-radius-base);
+  box-shadow: var(--wr-shadow-overlay);
+}
+
+//
+// Internal panels rendered inside the date-picker overlay.
+// (Were previously the standalone wr-time-picker / wr-date-time-picker
+// entry-points; now folded in via [mode]="time|datetime".)
+//
+
+.wr-time-picker {
+  --wr-time-picker-col-width: 3rem;
+  --wr-time-picker-bg: var(--wr-color-white);
+  --wr-time-picker-border: var(--wr-color-light);
+  --wr-time-picker-color: var(--wr-color-dark);
+  --wr-time-picker-muted: var(--wr-color-medium);
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: var(--wr-font-family-base);
+
+  // Each stepper column = ▲ button + input + ▼ button stacked vertically.
+  &__col {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: var(--wr-time-picker-col-width);
+    gap: 0.125rem;
+  }
+
+  &__step {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    height: 1.25rem;
+    color: var(--wr-time-picker-muted);
+    line-height: 1;
+
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+    border-radius: var(--wr-border-radius-sm);
+    cursor: pointer;
+    transition:
+      color var(--wr-transition-base),
+      background var(--wr-transition-base);
+
+    &:hover:not(:disabled) {
+      color: var(--wr-color-primary);
+      background: rgba(var(--wr-color-light-rgb), 0.5);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.3);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+
+  &__input {
+    width: 100%;
+    padding: 0.3125rem 0.25rem;
+    appearance: none;
+    -moz-appearance: textfield;
+    background: var(--wr-time-picker-bg);
+    border: 1px solid var(--wr-time-picker-border);
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-time-picker-color);
+    font-family: var(--wr-font-family-base);
+    font-size: 0.9375rem;
+    line-height: 1.25rem;
+    font-weight: 600;
+    text-align: center;
+    outline: 0;
+    transition:
+      border-color var(--wr-transition-base),
+      box-shadow var(--wr-transition-base);
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+
+    &:focus {
+      border-color: var(--wr-color-primary);
+      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+    }
+
+    &:disabled {
+      background: rgba(var(--wr-color-light-rgb), 0.35);
+      color: var(--wr-time-picker-muted);
+      cursor: not-allowed;
+    }
+  }
+
+  // AM / PM column shows a static label instead of an input.
+  &__col--ampm &__label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 2rem;
+    background: var(--wr-time-picker-bg);
+    border: 1px solid var(--wr-time-picker-border);
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-time-picker-color);
+    font-family: var(--wr-font-family-base);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    user-select: none;
+  }
+
+  &__sep {
+    color: var(--wr-time-picker-muted);
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1;
+    user-select: none;
+    align-self: center;
+    padding-top: 0.5rem;
+  }
+
+  &--disabled {
+    opacity: 0.7;
+  }
+}
+
+// Stacks calendar + time picker as one continuous surface inside the
+// date-picker overlay for [mode]="datetime".
+.wr-date-time-panel {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+
+  // Flatten the calendar's bottom corners + bottom border so the time row
+  // joins it visually as one panel.
+  > .wr-calendar {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &__time {
+    display: flex;
+    justify-content: center;
+    padding: 0.75rem;
+    background: var(--wr-color-white);
+    border: 1px solid var(--wr-color-light);
+    border-top: 0;
+    border-radius: 0 0 var(--wr-border-radius-base) var(--wr-border-radius-base);
+  }
+}

package/decrypt-text/decrypt-text.scss

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

package/decrypt-text/styles/_index.scss

@@ -0,0 +1,26 @@
+.wr-decrypt-text {
+  display: inline-block;
+  white-space: pre-wrap;
+
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  &__char {
+    display: inline;
+  }
+
+  // Hook for consumers to style the scrambled state distinctly (e.g. dim
+  // the scramble glyphs). Apply via `[encryptedClassName]`-style overrides
+  // by extending `.wr-decrypt-text__char--encrypted`.
+  &__char--encrypted {
+    /* default: no visual change; consumers override as needed */
+  }
+}

package/density/styles/_index.scss

@@ -0,0 +1,37 @@
+// Density multipliers. Components multiply their paddings (and the
+// occasional height / line-height) by these scalars via `calc()`.
+//
+// `default` resolves to `1` everywhere — touching `data-wr-density` is
+// pure opt-in. Components without density-aware paddings just keep
+// their static values.
+//
+// Override on `:root`, `[data-wr-density='…']`, or any subtree with the
+// `[wrDensity]` directive.
+
+:root {
+  --wr-density-y: 1;
+  --wr-density-x: 1;
+  --wr-density-text: 1;
+  --wr-density-gap: 1;
+}
+
+[data-wr-density='compact'] {
+  --wr-density-y: 0.55;
+  --wr-density-x: 0.85;
+  --wr-density-text: 0.95;
+  --wr-density-gap: 0.8;
+}
+
+[data-wr-density='default'] {
+  --wr-density-y: 1;
+  --wr-density-x: 1;
+  --wr-density-text: 1;
+  --wr-density-gap: 1;
+}
+
+[data-wr-density='comfortable'] {
+  --wr-density-y: 1.35;
+  --wr-density-x: 1.15;
+  --wr-density-text: 1.05;
+  --wr-density-gap: 1.15;
+}

package/descriptions/styles/_index.scss

@@ -0,0 +1,104 @@
+@use '../../theme/styles' as theme;
+
+.wr-descriptions {
+  display: block;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+
+  &__title {
+    font-size: var(--wr-text-base);
+    font-weight: var(--wr-font-weight-semibold);
+    margin-bottom: 0.75rem;
+  }
+
+  &__list {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0;
+  }
+
+  &__label {
+    font-size: var(--wr-text-xs);
+    font-weight: var(--wr-font-weight-medium);
+    color: var(--wr-color-medium);
+    text-transform: uppercase;
+    letter-spacing: var(--wr-tracking-wide);
+  }
+
+  &__value {
+    margin: 0;
+    font-size: var(--wr-text-sm);
+    line-height: var(--wr-leading-normal);
+    color: var(--wr-color-dark);
+  }
+
+  // Inline
+  &--inline &__list {
+    display: grid;
+    grid-template-columns: minmax(8rem, max-content) 1fr;
+    gap: 0.5rem 1rem;
+    align-items: baseline;
+  }
+
+  &--inline &__row {
+    display: contents;
+  }
+
+  &--inline &__label {
+    text-transform: none;
+    letter-spacing: var(--wr-tracking-normal);
+    font-weight: var(--wr-font-weight-medium);
+    font-size: var(--wr-text-sm);
+  }
+
+  // Bordered
+  &--bordered &__list {
+    gap: 0;
+    border: 1px solid var(--wr-color-light);
+    border-radius: var(--wr-border-radius-base);
+    overflow: hidden;
+  }
+
+  &--bordered &__row {
+    padding: 0.625rem 0.875rem;
+
+    & + & {
+      border-top: 1px solid var(--wr-color-light);
+    }
+  }
+
+  &--bordered#{&}--inline &__list {
+    display: grid;
+    grid-template-columns: minmax(8rem, max-content) 1fr;
+    gap: 0;
+  }
+
+  &--bordered#{&}--inline &__row {
+    display: contents;
+  }
+
+  &--bordered#{&}--inline &__label,
+  &--bordered#{&}--inline &__value {
+    padding: 0.625rem 0.875rem;
+    border-top: 1px solid var(--wr-color-light);
+  }
+
+  &--bordered#{&}--inline &__row:first-child &__label,
+  &--bordered#{&}--inline &__row:first-child &__value {
+    border-top: 0;
+  }
+
+  &--bordered#{&}--inline &__label {
+    background: rgba(var(--wr-color-light-rgb), 0.35);
+    border-right: 1px solid var(--wr-color-light);
+  }
+}

package/dialog/styles/_index.scss

@@ -1,50 +1,124 @@
-@forward './vars';
+@use '../../theme/styles' as theme;
 
-.wr-dialog {
-  &__wrapper {
-    background: var(--wr-dialog-bg);
-    border-radius: var(--wr-border-radius-base);
-    min-width: var(--wr-dialog-min-width);
-    max-height: calc(100vh - calc(var(--wr-grid-gutter) * 2));
-    max-width: calc(100vw - calc(var(--wr-grid-gutter) * 2));
-  }
+// CDK Overlay base styles are usually loaded once by the consumer.
+// We re-emit the minimal `cdk-overlay-*` rules so a standalone `@use
+// 'ngwr/dialog'` works without manually pulling CDK's prebuilt CSS.
 
-  &__title,
-  &__content,
-  &__footer {
-    padding: var(--wr-dialog-padding-y) var(--wr-dialog-padding-x);
-  }
+.cdk-overlay-container {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.cdk-global-overlay-wrapper {
+  display: flex;
+  position: absolute;
+  z-index: 1000;
+  overflow: auto;
+  pointer-events: auto;
+}
+
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  display: flex;
+  max-width: 100%;
+  max-height: 100%;
+  z-index: 1000;
+}
+
+.cdk-overlay-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 1000;
+  pointer-events: auto;
+  opacity: 0;
+  transition: opacity 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+.wr-dialog-backdrop {
+  background: rgba(var(--wr-color-backdrop-rgb), 0.45);
+  backdrop-filter: blur(2px);
+}
+
+.wr-dialog-panel {
+  --wr-dialog-bg: var(--wr-color-white);
+  --wr-dialog-radius: var(--wr-border-radius-lg);
+  --wr-dialog-shadow: var(--wr-shadow-modal);
+  --wr-dialog-min-width: 18rem;
+  --wr-dialog-padding-y: 1rem;
+  --wr-dialog-padding-x: 1.25rem;
+
+  display: flex;
+  flex-direction: column;
+  min-width: var(--wr-dialog-min-width);
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 2rem);
+
+  background: var(--wr-dialog-bg);
+  @include theme.smooth-br(var(--wr-dialog-radius));
+  box-shadow: var(--wr-dialog-shadow);
+  overflow: hidden;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
 
+  animation: wr-dialog-enter 0.2s ease-out;
+}
+
+.wr-dialog {
   &__title {
-    display: block;
-    color: var(--wr-dialog-title-color);
-    font-size: 1rem;
-    font-weight: 500;
-    line-height: 1rem;
-    border-bottom: 1px solid var(--wr-border-color-base);
-    width: 100%;
+    margin: 0;
+    padding: var(--wr-dialog-padding-y) var(--wr-dialog-padding-x);
+    color: var(--wr-color-dark);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    line-height: 1.5rem;
+    border-bottom: 1px solid var(--wr-color-light);
   }
 
   &__content {
+    padding: var(--wr-dialog-padding-y) var(--wr-dialog-padding-x);
     overflow: auto;
-    max-height: 80vh;
+    color: var(--wr-color-dark);
+    font-size: 0.9375rem;
+    line-height: 1.5rem;
   }
 
   &__footer {
     display: flex;
     align-items: center;
-    border-top: 1px solid var(--wr-border-color-base);
+    gap: 0.5rem;
+    padding: calc(var(--wr-dialog-padding-y) * 0.75) var(--wr-dialog-padding-x);
+    border-top: 1px solid var(--wr-color-light);
 
-    &-start {
+    &--start {
       justify-content: flex-start;
     }
-
     &--center {
       justify-content: center;
     }
-
     &--end {
-      justify-content: end;
+      justify-content: flex-end;
     }
   }
 }
+
+@keyframes wr-dialog-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/divider/styles/_index.scss

@@ -1,38 +1,57 @@
-@use '../../styles/maps' as maps;
+@use '../../theme/styles' as theme;
 
 .wr-divider {
-  --wr-divider-width: var(--wr-divider-width-base);
-  --wr-divider-color: var(--wr-divider-color-base);
-  --wr-divider-margin-top: var(--wr-divider-margin-top-base);
-  --wr-divider-margin-bottom: var(--wr-divider-margin-bottom-base);
-
-  display: block;
-
+  // Defaults — line color/style/width drive the ::before and ::after
+  // pseudo-element lines on either side of the optional projected
+  // label.
+  --wr-divider-width: 1px;
+  --wr-divider-color: var(--wr-color-light);
+  --wr-divider-style: solid;
+  --wr-divider-gap: 0.75rem;
+  --wr-divider-aside: 1rem;
+
+  display: flex;
+  align-items: center;
   width: 100%;
-  border-bottom-width: var(--wr-divider-width);
-  border-bottom-color: var(--wr-divider-color);
-
-  margin-top: var(--wr-divider-margin-top);
-  margin-bottom: var(--wr-divider-margin-bottom);
-
   user-select: none;
-  pointer-events: none;
+  color: var(--wr-color-medium);
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1 1 auto;
+    min-width: 0;
+    border-top: var(--wr-divider-width) var(--wr-divider-style) var(--wr-divider-color);
+  }
 
-  &--solid {
-    border-bottom-style: solid;
+  // With a projected label, leave room around it. Without one,
+  // `:empty` keeps the two halves flush so the line stays continuous.
+  &:not(:empty) {
+    gap: var(--wr-divider-gap);
   }
 
+  // Line style — solid is the default token; dashed/dotted override.
   &--dashed {
-    border-bottom-style: dashed;
+    --wr-divider-style: dashed;
   }
-
   &--dotted {
-    border-bottom-style: dotted;
+    --wr-divider-style: dotted;
+  }
+
+  // Label alignment — shrink one of the lines to a short stub so the
+  // label can sit at the edge instead of dead center.
+  &--start::before {
+    flex: 0 0 var(--wr-divider-aside);
+  }
+  &--end::after {
+    flex: 0 0 var(--wr-divider-aside);
   }
-}
 
-@each $color, $value in maps.$theme-colors-map {
-  .wr-divider--#{$color} {
-    --wr-divider-color: var(--wr-color-#{$color});
+  @each $name in theme.$colors {
+    &--#{$name} {
+      --wr-divider-color: var(--wr-color-#{$name});
+    }
   }
 }

package/donut-chart/styles/_index.scss

@@ -0,0 +1,76 @@
+@use '../../theme/styles' as theme;
+
+.wr-donut-chart {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.875rem;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+
+  &__surface {
+    position: relative;
+    display: inline-block;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  &__center {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &__center-value {
+    font-size: var(--wr-text-2xl);
+    font-weight: var(--wr-font-weight-semibold);
+    line-height: var(--wr-leading-tight);
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__center-label {
+    margin-top: 0.125rem;
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-medium);
+  }
+
+  &__legend {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem 0.875rem;
+    justify-content: center;
+  }
+
+  &__legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: var(--wr-text-xs);
+  }
+
+  &__swatch {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 50%;
+  }
+
+  &__legend-label {
+    font-weight: var(--wr-font-weight-medium);
+  }
+
+  &__legend-value {
+    color: var(--wr-color-medium);
+    font-variant-numeric: tabular-nums;
+  }
+}

package/drag-drop/sortable-list.scss

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