claritas-web-framework 8.5.8 → 8.5.91

package/sass/modules/form/_formFieldGroup.scss

@@ -1,60 +1,60 @@
-@use "./../../variables" as *;
-
-.form--field-group {
-  display: flex;
-  justify-content: flex-start;
-  align-items: stretch;
-
-  & .form__control {
-    display: flex;
-    flex-direction: row;
-
-    &:not(:last-child) {
-      margin-right: -1px;
-    }
-
-    & button,
-    & input,
-    & textarea,
-    & output,
-    & select,
-    & progress,
-    & .form__span,
-    & .form__input {
-      --input-border-radius: 0;
-      --button-border-radius: 0;
-    }
-
-    &:first-child {
-      & * {
-        --input-border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
-        --input-small-border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
-        --input-large-border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
-        --button-border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
-        --button-small-border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
-        --button-large-border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
-
-        &.button--rounded,
-        &.input--rounded {
-          border-radius: var(--border-radius-round) 0 0 var(--border-radius-round);
-        }
-      }
-    }
-
-    &:last-child {
-      & * {
-        --input-border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
-        --input-small-border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
-        --input-large-border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
-        --button-border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
-        --button-small-border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
-        --button-large-border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
-
-        &.button--rounded,
-        &.input--rounded {
-          border-radius: 0 var(--border-radius-round) var(--border-radius-round) 0;
-        }
-      }
-    }
-  }
-}
+@use "./../../variables" as *;
+
+.form--field-group {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+
+  & .form__control {
+    display: flex;
+    flex-direction: row;
+
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    & button,
+    & input,
+    & textarea,
+    & output,
+    & select,
+    & progress,
+    & .form__span,
+    & .form__input {
+      --input-border-radius: 0;
+      --button-border-radius: 0;
+    }
+
+    &:first-child {
+      & * {
+        --input-border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+        --input-small-border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
+        --input-large-border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
+        --button-border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+        --button-small-border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
+        --button-large-border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
+
+        &.button--rounded,
+        &.input--rounded {
+          border-radius: var(--border-radius-round) 0 0 var(--border-radius-round);
+        }
+      }
+    }
+
+    &:last-child {
+      & * {
+        --input-border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+        --input-small-border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
+        --input-large-border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
+        --button-border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+        --button-small-border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
+        --button-large-border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
+
+        &.button--rounded,
+        &.input--rounded {
+          border-radius: 0 var(--border-radius-round) var(--border-radius-round) 0;
+        }
+      }
+    }
+  }
+}

package/sass/modules/form/_output.scss

@@ -1,6 +1,6 @@
-@use "sass:color";
-@use "./../../variables" as *;
-
-output {
-  --input-background: color-mix(in oklab, var(--body-color), #fff 95%);
-}
+@use "sass:color";
+@use "./../../variables" as *;
+
+output {
+  --input-background: color-mix(in oklab, var(--body-color), #fff 95%);
+}

package/sass/modules/form/_progress.scss

@@ -1,55 +1,55 @@
-@use "sass:color";
-@use "./../../variables" as *;
-
-progress {
-  --input-padding-x: 1px;
-  --input-padding-y: 1px;
-  --input-small-padding-x: 1px;
-  --input-small-padding-y: 1px;
-  --input-large-padding-x: 1px;
-  --input-large-padding-y: 1px;
-  --input-height: var(--spacer);
-  --input-desktop-height: var(--spacer);
-
-  background-color: transparent;
-  border-radius: var(--input-round-border-radius);
-  overflow: hidden;
-
-  &::-webkit-progress-bar {
-    background-color: color-mix(in oklab, var(--body-color), #fff 95%);
-  }
-
-  &::-webkit-progress-value {
-    background-color: var(--input-detail-background);
-    border-radius: var(--input-round-border-radius);
-  }
-
-  &::-moz-progress-bar {
-    background-color: color-mix(in oklab, var(--body-color), #fff 95%);
-  }
-
-  &::-moz-progress-value {
-    background-color: var(--input-detail-background);
-    border-radius: var(--input-round-border-radius);
-  }
-
-  @each $key, $value in $theme-colors {
-    &.input--#{$key} {
-      &::-webkit-progress-bar {
-        background-color: hsl(from var(--#{$key}) h s l / 5%);
-      }
-
-      &::-moz-progress-bar {
-        background-color: hsl(from var(--#{$key}) h s l / 5%);
-      }
-
-      &::-webkit-progress-value {
-        background-color: var(--#{$key});
-      }
-
-      &::-moz-progress-value {
-        background-color: var(--#{$key});
-      }
-    }
-  }
-}
+@use "sass:color";
+@use "./../../variables" as *;
+
+progress {
+  --input-padding-x: 1px;
+  --input-padding-y: 1px;
+  --input-small-padding-x: 1px;
+  --input-small-padding-y: 1px;
+  --input-large-padding-x: 1px;
+  --input-large-padding-y: 1px;
+  --input-height: var(--spacer);
+  --input-desktop-height: var(--spacer);
+
+  background-color: transparent;
+  border-radius: var(--input-round-border-radius);
+  overflow: hidden;
+
+  &::-webkit-progress-bar {
+    background-color: color-mix(in oklab, var(--body-color), #fff 95%);
+  }
+
+  &::-webkit-progress-value {
+    background-color: var(--input-detail-background);
+    border-radius: var(--input-round-border-radius);
+  }
+
+  &::-moz-progress-bar {
+    background-color: color-mix(in oklab, var(--body-color), #fff 95%);
+  }
+
+  &::-moz-progress-value {
+    background-color: var(--input-detail-background);
+    border-radius: var(--input-round-border-radius);
+  }
+
+  @each $key, $value in $theme-colors {
+    &.input--#{$key} {
+      &::-webkit-progress-bar {
+        background-color: hsl(from var(--#{$key}) h s l / 5%);
+      }
+
+      &::-moz-progress-bar {
+        background-color: hsl(from var(--#{$key}) h s l / 5%);
+      }
+
+      &::-webkit-progress-value {
+        background-color: var(--#{$key});
+      }
+
+      &::-moz-progress-value {
+        background-color: var(--#{$key});
+      }
+    }
+  }
+}

package/sass/modules/form/_radio.scss

@@ -1,57 +1,57 @@
-@use "sass:map";
-@use "sass:color";
-@use "./../../variables" as *;
-@use "./../../mixins/breakpoints" as *;
-
-.form__control.radio {
-  & > * {
-    &:not(:last-child) {
-      margin-right: var(--spacer);
-
-      @include media-breakpoint-up("desktop") {
-        margin-right: calc(var(--spacer) * 0.5);
-      }
-    }
-  }
-
-  & input[type="radio"] {
-    --input-width: auto;
-    --input-desktop-width: auto;
-
-    border-radius: var(--input-round-border-radius);
-    aspect-ratio: 1;
-    flex-shrink: 0;
-    vertical-align: text-bottom;
-
-    &::before {
-      content: "";
-      position: absolute;
-      margin: auto;
-      inset: 0;
-      overflow: hidden;
-      border-radius: var(--input-round-border-radius);
-      background: var(--white);
-      width: 50%;
-      aspect-ratio: 1;
-    }
-
-    &:checked {
-      background: var(--input-detail-background);
-
-      &:disabled,
-      &.disabled,
-      &[aria-disabled="true"] {
-        background: var(--input-disabled-detail-background);
-      }
-    }
-
-    @each $key, $value in $theme-colors {
-      &.input--#{$key} {
-        &:checked {
-          --input-detail-background: var(--#{$key});
-          --input-disabled-detail-background: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:color";
+@use "./../../variables" as *;
+@use "./../../mixins/breakpoints" as *;
+
+.form__control.radio {
+  & > * {
+    &:not(:last-child) {
+      margin-right: var(--spacer);
+
+      @include media-breakpoint-up("desktop") {
+        margin-right: calc(var(--spacer) * 0.5);
+      }
+    }
+  }
+
+  & input[type="radio"] {
+    --input-width: auto;
+    --input-desktop-width: auto;
+
+    border-radius: var(--input-round-border-radius);
+    aspect-ratio: 1;
+    flex-shrink: 0;
+    vertical-align: text-bottom;
+
+    &::before {
+      content: "";
+      position: absolute;
+      margin: auto;
+      inset: 0;
+      overflow: hidden;
+      border-radius: var(--input-round-border-radius);
+      background: var(--white);
+      width: 50%;
+      aspect-ratio: 1;
+    }
+
+    &:checked {
+      background: var(--input-detail-background);
+
+      &:disabled,
+      &.disabled,
+      &[aria-disabled="true"] {
+        background: var(--input-disabled-detail-background);
+      }
+    }
+
+    @each $key, $value in $theme-colors {
+      &.input--#{$key} {
+        &:checked {
+          --input-detail-background: var(--#{$key});
+          --input-disabled-detail-background: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
+        }
+      }
+    }
+  }
+}

package/sass/modules/form/_range.scss

@@ -1,144 +1,144 @@
-@use "sass:color";
-@use "./../../variables" as *;
-
-@mixin make-track() {
-  background: hsl(from var(--border-color-main) h s l / 10%);
-  border-radius: var(--input-round-border-radius);
-  width: 100%;
-  height: calc(var(--spacer) * 0.5);
-  cursor: pointer;
-}
-
-@mixin make-thumb(
-  $focus: false,
-  $disabled: false,
-  $color: var(--input-detail-background),
-  $shadow: hsl(from var(--primary) h s l / 25%)
-) {
-  margin-top: calc(var(--spacer) * -0.25);
-  width: var(--spacer);
-  height: var(--spacer);
-  background: $color;
-  border: 1px solid var(--border-color-main);
-  border-radius: var(--input-round-border-radius);
-  cursor: pointer;
-  box-shadow: var(--box-shadow-small);
-  appearance: none;
-
-  @if $focus == true {
-    box-shadow:
-      0 0 0 1px var(--white),
-      0 0 0 calc(var(--spacer) * 0.25) $shadow;
-  }
-
-  @if $disabled == true {
-    background: var(--input-disabled-detail-background);
-  }
-}
-
-input[type="range"] {
-  --input-border-color: transparent;
-  --input-hover-border-color: transparent;
-  --input-focus-border-color: transparent;
-  --input-active-border-color: transparent;
-  --input-disabled-border-color: transparent;
-  --input-box-shadow: none;
-  --input-hover-box-shadow: none;
-  --input-focus-box-shadow: none;
-  --input-active-box-shadow: none;
-  --input-disabled-box-shadow: none;
-  --input-disabled-background: var(--white);
-  --input-padding-x: 0;
-  --input-small-padding-x: 0;
-  --input-large-padding-x: 0;
-
-  margin: calc(var(--spacer) * 0.5) 0;
-
-  &::-moz-range-track {
-    @include make-track;
-  }
-
-  &::-webkit-slider-runnable-track {
-    @include make-track;
-  }
-
-  &::-moz-range-thumb {
-    @include make-thumb(false, false);
-  }
-
-  &::-webkit-slider-thumb {
-    @include make-thumb(false, false);
-  }
-
-  &:focus {
-    &::-webkit-slider-runnable-track {
-      @include make-track;
-    }
-
-    &::-moz-range-track {
-      @include make-track;
-    }
-
-    &::-webkit-slider-thumb {
-      @include make-thumb(true, false);
-    }
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled="true"] {
-    --input-disabled-detail-background: color-mix(in oklab, var(--primary), #fff #{$link-shade-percentage});
-
-    &::-webkit-slider-runnable-track {
-      @include make-track;
-    }
-
-    &::-moz-range-track {
-      @include make-track;
-    }
-
-    &::-moz-range-thumb {
-      @include make-thumb(false, true);
-    }
-
-    &::-webkit-slider-thumb {
-      @include make-thumb(false, true);
-    }
-  }
-
-  @each $key, $value in $theme-colors {
-    &.input--#{$key} {
-      --input-disabled-detail-background: color-mix(in oklab, var(--#{$key}), #000 #{$link-shade-percentage});
-
-      &::-moz-range-thumb {
-        @include make-thumb(false, false, $value, hsl(from var(--#{$key}) h s l / 25%));
-      }
-
-      &::-webkit-slider-thumb {
-        @include make-thumb(false, false, $value, hsl(from var(--#{$key}) h s l / 25%));
-      }
-
-      &:focus {
-        &::-moz-range-thumb {
-          @include make-thumb(true, false, $value, hsl(from var(--#{$key}) h s l / 25%));
-        }
-
-        &::-webkit-slider-thumb {
-          @include make-thumb(true, false, $value, hsl(from var(--#{$key}) h s l / 25%));
-        }
-      }
-
-      &:disabled,
-      &.disabled,
-      &[aria-disabled="true"] {
-        &::-moz-range-thumb {
-          @include make-thumb(false, true, $value, hsl(from var(--#{$key}) h s l / 25%));
-        }
-
-        &::-webkit-slider-thumb {
-          @include make-thumb(false, true, $value, hsl(from var(--#{$key}) h s l / 25%));
-        }
-      }
-    }
-  }
-}
+@use "sass:color";
+@use "./../../variables" as *;
+
+@mixin make-track() {
+  background: hsl(from var(--border-color-main) h s l / 10%);
+  border-radius: var(--input-round-border-radius);
+  width: 100%;
+  height: calc(var(--spacer) * 0.5);
+  cursor: pointer;
+}
+
+@mixin make-thumb(
+  $focus: false,
+  $disabled: false,
+  $color: var(--input-detail-background),
+  $shadow: hsl(from var(--primary) h s l / 25%)
+) {
+  margin-top: calc(var(--spacer) * -0.25);
+  width: var(--spacer);
+  height: var(--spacer);
+  background: $color;
+  border: 1px solid var(--border-color-main);
+  border-radius: var(--input-round-border-radius);
+  cursor: pointer;
+  box-shadow: var(--box-shadow-small);
+  appearance: none;
+
+  @if $focus == true {
+    box-shadow:
+      0 0 0 1px var(--white),
+      0 0 0 calc(var(--spacer) * 0.25) $shadow;
+  }
+
+  @if $disabled == true {
+    background: var(--input-disabled-detail-background);
+  }
+}
+
+input[type="range"] {
+  --input-border-color: transparent;
+  --input-hover-border-color: transparent;
+  --input-focus-border-color: transparent;
+  --input-active-border-color: transparent;
+  --input-disabled-border-color: transparent;
+  --input-box-shadow: none;
+  --input-hover-box-shadow: none;
+  --input-focus-box-shadow: none;
+  --input-active-box-shadow: none;
+  --input-disabled-box-shadow: none;
+  --input-disabled-background: var(--white);
+  --input-padding-x: 0;
+  --input-small-padding-x: 0;
+  --input-large-padding-x: 0;
+
+  margin: calc(var(--spacer) * 0.5) 0;
+
+  &::-moz-range-track {
+    @include make-track;
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include make-track;
+  }
+
+  &::-moz-range-thumb {
+    @include make-thumb(false, false);
+  }
+
+  &::-webkit-slider-thumb {
+    @include make-thumb(false, false);
+  }
+
+  &:focus {
+    &::-webkit-slider-runnable-track {
+      @include make-track;
+    }
+
+    &::-moz-range-track {
+      @include make-track;
+    }
+
+    &::-webkit-slider-thumb {
+      @include make-thumb(true, false);
+    }
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled="true"] {
+    --input-disabled-detail-background: color-mix(in oklab, var(--primary), #fff #{$link-shade-percentage});
+
+    &::-webkit-slider-runnable-track {
+      @include make-track;
+    }
+
+    &::-moz-range-track {
+      @include make-track;
+    }
+
+    &::-moz-range-thumb {
+      @include make-thumb(false, true);
+    }
+
+    &::-webkit-slider-thumb {
+      @include make-thumb(false, true);
+    }
+  }
+
+  @each $key, $value in $theme-colors {
+    &.input--#{$key} {
+      --input-disabled-detail-background: color-mix(in oklab, var(--#{$key}), #000 #{$link-shade-percentage});
+
+      &::-moz-range-thumb {
+        @include make-thumb(false, false, $value, hsl(from var(--#{$key}) h s l / 25%));
+      }
+
+      &::-webkit-slider-thumb {
+        @include make-thumb(false, false, $value, hsl(from var(--#{$key}) h s l / 25%));
+      }
+
+      &:focus {
+        &::-moz-range-thumb {
+          @include make-thumb(true, false, $value, hsl(from var(--#{$key}) h s l / 25%));
+        }
+
+        &::-webkit-slider-thumb {
+          @include make-thumb(true, false, $value, hsl(from var(--#{$key}) h s l / 25%));
+        }
+      }
+
+      &:disabled,
+      &.disabled,
+      &[aria-disabled="true"] {
+        &::-moz-range-thumb {
+          @include make-thumb(false, true, $value, hsl(from var(--#{$key}) h s l / 25%));
+        }
+
+        &::-webkit-slider-thumb {
+          @include make-thumb(false, true, $value, hsl(from var(--#{$key}) h s l / 25%));
+        }
+      }
+    }
+  }
+}