@central-design-system/components 4.0.0-alpha.4 → 4.0.0-alpha.5

package/src/components/CdsPagination/CdsPagination.scss

@@ -0,0 +1,69 @@
+@use '../../styles/tools';
+@use './styles/CdsPagination.variables' as *;
+
+@include tools.layer('components') {
+  .cds-pagination {
+    &__list {
+      display: flex;
+      padding: $pagination-padding;
+      margin: 0;
+      list-style: none;
+    }
+
+    &__controls {
+      display: none;
+      gap: $pagination-controls-gap;
+      align-items: center;
+      margin-left: $pagination-controls-margin;
+    }
+
+    &--quick-jumper {
+      display: flex;
+      flex-wrap: wrap;
+
+      .cds-pagination__controls {
+        display: flex;
+
+        &-page {
+          color: $pagination-controls-page-color;
+
+          @include tools.cds-text-regular-200;
+        }
+
+        form {
+          display: flex;
+          gap: $pagination-controls-gap;
+          align-items: center;
+        }
+
+        &-input {
+          width: $pagination-input-width;
+
+          input::-webkit-outer-spin-button,
+          input::-webkit-inner-spin-button {
+            appearance: none;
+          }
+        }
+      }
+    }
+
+    &__item {
+      .cds-button {
+        min-width: $pagination-button-width;
+        padding: $pagination-button-padding;
+      }
+
+      &--active {
+        .cds-button {
+          color: $pagination-active-color;
+          pointer-events: none;
+          cursor: default;
+        }
+      }
+    }
+
+    .cds-functional-button {
+      border: none;
+    }
+  }
+}

package/src/components/CdsPagination/styles/_CdsPagination.variables.scss

@@ -0,0 +1,10 @@
+@use '../../../styles/tools';
+
+$pagination-padding: var(--cds-spacing-100) 0 !default;
+$pagination-button-padding: var(--cds-spacing-100) !default;
+$pagination-button-width: tools.to-rem(24px) !default;
+$pagination-active-color: rgb(var(--cds-color-content-tertiary)) !default;
+$pagination-controls-gap: var(--cds-spacing-200) !default;
+$pagination-controls-margin: var(--cds-spacing-400) !default;
+$pagination-controls-page-color: rgb(var(--cds-color-content-tertiary)) !default;
+$pagination-input-width: tools.to-rem(48px) !default;

package/src/components/CdsProgressBar/CdsProgressBar.scss

@@ -0,0 +1,285 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsProgressBar.variables' as *;
+
+@include tools.layer('components') {
+  .cds-progress-bar {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    background: transparent;
+    transition: $progress-bar-transition, mask-size 0s;
+
+    @media (forced-colors: active) {
+      border: thin solid buttontext;
+    }
+  }
+
+  .cds-progress-bar__background,
+  .cds-progress-bar__buffer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: $progress-bar-background;
+    opacity: $progress-bar-background-opacity;
+    transition: inherit;
+    transition-property: width, left, right;
+  }
+
+  .cds-progress-bar__content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background: transparent;
+  }
+
+  .cds-progress-bar__determinate,
+  .cds-progress-bar__indeterminate {
+    background: $progress-bar-background;
+  }
+
+  .cds-progress-bar__determinate {
+    position: absolute;
+    left: 0;
+    height: inherit;
+    transition: inherit;
+    transition-property: width, left, right;
+  }
+
+  .cds-progress-bar__indeterminate {
+    animation-name: indeterminate-ltr;
+    animation-duration: $progress-bar-indeterminate-animation-duration;
+    animation-iteration-count: infinite;
+    animation-play-state: paused;
+
+    .long, .short {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: auto;
+      height: inherit;
+    }
+
+    .long {
+      right: var(--cds-progress-indeterminate-long-right);
+      left: var(--cds-progress-indeterminate-long-left);
+    }
+
+    .short {
+      right: var(--cds-progress-indeterminate-short-right);
+      left: var(--cds-progress-indeterminate-short-left);
+    }
+
+    > .cds-progress-bar__background {
+      height: 100%;
+      border-radius: inherit;
+      transition: none;
+
+      &:nth-child(1) {
+        left: 0;
+        width: clamp(0%, calc(var(--cds-progress-indeterminate-long-left) - var(--cds-progress-chunk-gap)), 100%);
+      }
+
+      &:nth-child(2) {
+        left: clamp(0%, calc(100% - var(--cds-progress-indeterminate-long-right) + var(--cds-progress-chunk-gap)), 100%);
+        width: clamp(0%, calc(var(--cds-progress-indeterminate-short-left) - var(--cds-progress-chunk-gap)), 100%);
+      }
+
+      &:nth-child(3) {
+        right: 0;
+        left: unset;
+        width: clamp(0%, calc(var(--cds-progress-indeterminate-short-right) - var(--cds-progress-chunk-gap)), 100%);
+      }
+    }
+  }
+
+  .cds-progress-bar__stream {
+    position: absolute;
+    bottom: 0;
+    left: auto;
+    pointer-events: none;
+    opacity: $progress-bar-stream-opacity;
+    transition: inherit;
+    transition-property: width, left, right;
+    animation: $progress-bar-stream-animation;
+    animation-play-state: paused;
+  }
+
+  .cds-progress-bar--clickable {
+    .cds-progress-bar__content {
+      pointer-events: none;
+    }
+  }
+
+  .cds-progress-bar--reverse {
+    .cds-progress-bar__background,
+    .cds-progress-bar__determinate,
+    .cds-progress-bar__content {
+      right: 0;
+      left: auto;
+    }
+
+    .cds-progress-bar__indeterminate {
+      animation-name: indeterminate-rtl;
+
+      > .cds-progress-bar__background {
+        &:nth-child(1) {
+          right: 0;
+          left: unset;
+          width: clamp(0%, calc(var(--cds-progress-indeterminate-long-right) - var(--cds-progress-chunk-gap)), 100%);
+        }
+
+        &:nth-child(2) {
+          right: clamp(0%, calc(100% - var(--cds-progress-indeterminate-long-left) + var(--cds-progress-chunk-gap)), 100%);
+          left: unset;
+          width: clamp(0%, calc(var(--cds-progress-indeterminate-short-right) - var(--cds-progress-chunk-gap)), 100%);
+        }
+
+        &:nth-child(3) {
+          right: unset;
+          left: 0;
+          width: clamp(0%, calc(var(--cds-progress-indeterminate-short-left) - var(--cds-progress-chunk-gap)), 100%);
+        }
+      }
+    }
+
+    .cds-progress-bar__stream {
+      right: auto;
+    }
+  }
+
+  .cds-progress-bar--absolute,
+  .cds-progress-bar--fixed {
+    left: 0;
+    z-index: 1;
+  }
+
+  .cds-progress-bar--absolute {
+    position: absolute;
+  }
+
+  .cds-progress-bar--fixed {
+    position: fixed
+  }
+
+  .cds-progress-bar--striped {
+    .cds-progress-bar__determinate {
+      background-image: $progress-bar-striped-animation;
+      background-repeat: repeat;
+      background-size: $progress-bar-striped-size;
+      animation: $progress-bar-stripe-gradient;
+    }
+  }
+
+  .cds-progress-bar--active {
+    .cds-progress-bar__indeterminate {
+      animation-play-state: running;
+    }
+
+    .cds-progress-bar__stream {
+      animation-play-state: running;
+    }
+  }
+
+  .cds-progress-bar--rounded-bar {
+    .cds-progress-bar__determinate,
+    .cds-progress-bar__indeterminate,
+    .cds-progress-bar__stream + .cds-progress-bar__background {
+      border-radius: $progress-bar-border-radius;
+    }
+
+    .cds-progress-bar__determinate {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+}
+
+@property --cds-progress-indeterminate-long-left {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+@property --cds-progress-indeterminate-long-right {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+@property --cds-progress-indeterminate-short-left {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+@property --cds-progress-indeterminate-short-right {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+@keyframes indeterminate-ltr {
+  0% {
+    --cds-progress-indeterminate-long-left: -90%;
+    --cds-progress-indeterminate-long-right: 107%;
+    --cds-progress-indeterminate-short-left: -200%;
+    --cds-progress-indeterminate-short-right: 107%;
+  }
+
+  60% {
+    --cds-progress-indeterminate-long-left: -90%;
+    --cds-progress-indeterminate-long-right: 107%;
+    --cds-progress-indeterminate-short-left: 107%;
+    --cds-progress-indeterminate-short-right: -8%;
+  }
+
+  100% {
+    --cds-progress-indeterminate-long-left: 107%;
+    --cds-progress-indeterminate-long-right: -35%;
+    --cds-progress-indeterminate-short-left: 107%;
+    --cds-progress-indeterminate-short-right: -8%;
+  }
+}
+
+@keyframes indeterminate-rtl {
+  0% {
+    --cds-progress-indeterminate-long-left: 107%;
+    --cds-progress-indeterminate-long-right: -90%;
+    --cds-progress-indeterminate-short-left: 107%;
+    --cds-progress-indeterminate-short-right: -200%;
+  }
+
+  60% {
+    --cds-progress-indeterminate-long-left: 107%;
+    --cds-progress-indeterminate-long-right: -90%;
+    --cds-progress-indeterminate-short-left: -8%;
+    --cds-progress-indeterminate-short-right: 107%;
+  }
+
+  100% {
+    --cds-progress-indeterminate-long-left: -35%;
+    --cds-progress-indeterminate-long-right: 107%;
+    --cds-progress-indeterminate-short-left: -8%;
+    --cds-progress-indeterminate-short-right: 107%;
+  }
+}
+
+@keyframes stream {
+  to {
+    transform: translateX(var(--cds-progress-bar-stream-to))
+  }
+}
+
+@keyframes progress-bar-stripes {
+  0% {
+    background-position-x: $progress-bar-striped-size;
+  }
+}

package/src/components/CdsProgressBar/styles/_CdsProgressBar.variables.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../../../styles/tools';
+@use '../../../styles/settings';
+
+$progress-bar-transition: .2s settings.$standard-easing !default;
+$progress-bar-background: currentcolor !default;
+$progress-bar-background-opacity: 0.15 !default;
+$progress-bar-border-radius: map.get(settings.$rounded, 'pill') !default;
+$progress-bar-indeterminate-animation-duration: 2.2s !default;
+$progress-bar-stream-animation: stream .25s infinite linear !default;
+$progress-bar-stream-opacity: 0.3 !default;
+$progress-bar-striped-size: var(--cds-progress-bar-height) !default;
+$progress-bar-striped-animation: progress-bar-stripes 1s infinite linear !default;
+$progress-bar-stripe-gradient: linear-gradient(
+  135deg,
+  hsl(0deg 0% 100% / 25%) 25%,
+  transparent 0,
+  transparent 50%,
+  hsl(0deg 0% 100% / 25%) 0,
+  hsl(0deg 0% 100% / 25%) 75%,
+  transparent 0,
+  transparent
+) !default;

package/src/components/CdsProgressCircle/CdsProgressCircle.scss

@@ -0,0 +1,116 @@
+@use 'sass:list';
+@use '../../styles/tools';
+@use '../../styles/settings';
+@use './styles/CdsProgressCircle.variables' as *;
+
+@include tools.layer('components') {
+  .cds-progress-circle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    vertical-align: middle;
+
+    > svg {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+      margin: auto;
+    }
+
+    @each $name, $multiplier in $progress-circle-sizes {
+      $size: $progress-circle-size + (settings.$size-scale * $multiplier);
+
+      &--size-#{$name} {
+        width: tools.to-rem($size);
+        height: tools.to-rem($size);
+      }
+    }
+  }
+
+  .cds-progress-circle__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .cds-progress-circle__underlay {
+    z-index: 1;
+    color: $progress-circle-underlay-color;
+    stroke: currentcolor;
+  }
+
+  .cds-progress-circle__overlay {
+    z-index: 2;
+    stroke: currentcolor;
+    transition: $progress-circle-overlay-transition;
+  }
+
+  .cds-progress-circle--revealing {
+    --cds-progress-circle-reveal-duration: #{$progress-circle-reveal-duration};
+
+    .cds-progress-circle__overlay {
+      transition-duration: var(--cds-progress-circle-reveal-duration), 0s;
+    }
+  }
+
+  .cds-progress-circle--indeterminate {
+    > svg {
+      transform-origin: center center;
+      transition: $progress-circle-intermediate-svg-transition;
+      animation: $progress-circle-rotate-animation;
+    }
+
+    .cds-progress-circle__overlay {
+      stroke-linecap: round;
+      stroke-dasharray: 25, 200;
+      stroke-dashoffset: 0;
+      transform: $progress-circle-overlay-transform;
+      transform-origin: center center;
+      animation: $progress-circle-rotate-dash, $progress-circle-rotate-animation;
+    }
+  }
+
+  .cds-progress-circle--disable-shrink {
+    > svg {
+      animation-duration: list.nth($progress-circle-rotate-animation, 2) * .5;
+    }
+
+    .cds-progress-circle__overlay {
+      animation: none;
+    }
+  }
+
+  .cds-progress-circle--indeterminate:not(.cds-progress-circle--visible) {
+    > svg,
+    .cds-progress-circle__overlay {
+       animation-play-state: paused;
+    }
+  }
+
+  @keyframes progress-circle-dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+
+    50% {
+      stroke-dasharray: 100, 200;
+      stroke-dashoffset: -15px;
+    }
+
+    100% {
+     stroke-dasharray: 100, 200;
+     stroke-dashoffset: -124px;
+    }
+  }
+
+  @keyframes progress-circle-rotate {
+    100% {
+      transform: rotate(270deg);
+    }
+  }
+}

package/src/components/CdsProgressCircle/styles/_CdsProgressCircle.variables.scss

@@ -0,0 +1,21 @@
+@use '../../../styles/tools';
+
+$progress-circle-underlay-color: rgb(var(--cds-color-content-placeholder), 0.4) !default;
+
+// Transition
+$progress-circle-reveal-duration: 900ms;
+$progress-circle-overlay-transition: all 0.4s ease-in-out, stroke-width 0s !default;
+$progress-circle-intermediate-svg-transition: all 0.4s ease-in-out !default;
+$progress-circle-rotate-animation: progress-circle-rotate 2s linear infinite !default;
+$progress-circle-rotate-dash: progress-circle-dash 2s ease-in-out infinite !default;
+$progress-circle-overlay-transform: rotate(calc(-90deg)) !default;
+
+// Sizes
+$progress-circle-size: 32px !default;
+$progress-circle-sizes: (
+  'xs': -4,
+  'sm': -2,
+  'md': 0,
+  'lg': 4,
+  'xl': 8
+) !default;

package/src/components/CdsRadio/CdsRadio.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsRadio.variables' as *;
+
+@include tools.layer('components') {
+  .cds-radio {
+    --cds-selection-control-width: #{$radio-selection-control-width};
+    --cds-selection-control-height: #{$radio-selection-control-height};
+
+    .cds-selection-control__input {
+      align-items: center;
+    }
+
+    .cds-selection-control__wrapper {
+      color: map.get($radio-button-colors, 'unselected', 'default');
+    }
+
+    &.cds-selection-control--dirty {
+      .cds-selection-control__wrapper {
+        color: map.get($radio-button-colors, 'selected', 'default');
+      }
+    }
+
+    &.cds-selection-control--disabled {
+      .cds-selection-control__wrapper {
+        color: map.get($radio-button-colors, 'disabled', 'default');
+      }
+    }
+
+    &.cds-selection-control--error {
+      .cds-selection-control__wrapper {
+        color: map.get($radio-button-colors, 'unselected', 'error');
+      }
+
+      &.cds-selection-control--dirty {
+        .cds-selection-control__wrapper {
+          color: map.get($radio-button-colors, 'selected', 'error');
+        }
+      }
+    }
+  }
+}

package/src/components/CdsRadio/styles/_CdsRadio.variables.scss

@@ -0,0 +1,26 @@
+@use "../../../styles/tools";
+
+// Radio
+$radio-button-size: tools.to-rem(16px) !default;
+
+// Selection Field
+$radio-selection-control-width: calc($radio-button-size + var(--cds-spacing-200)) !default;
+$radio-selection-control-height: tools.to-rem(20px) !default;
+
+// Colors
+$radio-button-colors: (
+  'unselected': (
+    default: rgb(var(--cds-color-line-primary)),
+    error: rgb(var(--cds-color-status-danger-line))
+  ),
+  'selected': (
+    default: rgb(var(--cds-color-line-selected)),
+    error: rgb(var(--cds-color-status-danger-line))
+  ),
+  'disabled': (
+    default: rgb(var(--cds-color-line-disable))
+  ),
+  'focus': (
+    default: rgb(var(--cds-color-line-focus-outline))
+  )
+) !default;

package/src/components/CdsRadioGroup/CdsRadioGroup.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsRadioGroup.variables' as *;
+
+@include tools.layer('components') {
+  .cds-radio-group {
+    > .cds-input__control {
+      flex-direction: column;
+    }
+
+    .cds-selection-control .cds-label {
+      margin-block-end: 0;
+      line-height: var(--cds-font-line-height-300);
+    }
+
+    .cds-selection-control-group {
+      gap: $radio-group-gap-vertical;
+
+      &--horizontal {
+        gap: $radio-group-gap-horizontal;
+      }
+    }
+  }
+}

package/src/components/CdsRadioGroup/styles/_CdsRadioGroup.variables.scss

@@ -0,0 +1,4 @@
+@use "../../../styles/tools";
+
+$radio-group-gap-vertical: var(--cds-spacing-100) !default;
+$radio-group-gap-horizontal: var(--cds-spacing-300) !default;

package/src/components/CdsResponsive/CdsResponsive.scss

@@ -0,0 +1,33 @@
+@use '../../styles/tools';
+@use './styles/CdsResponsive.variables' as *;
+
+@include tools.layer('components') {
+  .cds-responsive {
+    position: relative;
+    display: flex;
+    flex: 1 0 auto;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+
+    &--inline {
+      display: inline-flex;
+      flex: 0 0 auto;
+    }
+  }
+
+  .cds-responsive__content {
+    flex: 1 0 0px;
+    max-width: 100%;
+  }
+
+  .cds-responsive__sizer ~ .cds-responsive__content {
+    margin-inline-start: -100%;
+  }
+
+  .cds-responsive__sizer {
+    flex: 1 0 0px;
+    pointer-events: none;
+    transition: $responsive-sizer-transition;
+  }
+}

package/src/components/CdsResponsive/styles/_CdsResponsive.variables.scss

@@ -0,0 +1,3 @@
+@use '../../../styles/settings';
+
+$responsive-sizer-transition: padding-bottom 0.2s settings.$standard-easing !default;