@clusterenvision/ui-scss 1.94.3

package/src/components/feedback/_spinner.scss

@@ -0,0 +1,211 @@
+
+
+@use "../../abstracts/functions" as fn;
+
+
+
+
+
+
+
+.spinner,
+.loader,
+.ce-loader {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--ce-spinner-gap, var(--ce-spacing-sm, 0.5rem));
+
+  &__spinner {
+    display: inline-block;
+    width: var(--ce-spinner-size, 2rem);
+    height: var(--ce-spinner-size, 2rem);
+    vertical-align: middle;
+    position: relative;
+    color: var(--ce-spinner-color, #{fn.color(primary)});
+    animation: spinner-rotate var(--ce-spinner-speed, 0.8s) linear infinite;
+    border: var(--ce-spinner-thickness, 3px) solid rgba(fn.color(muted), 0.3);
+    border-top: var(--ce-spinner-thickness, 3px) solid currentColor;
+    border-radius: var(--ce-spinner-radius, var(--ce-radius-circle, 50%));
+    box-sizing: border-box;
+  }
+
+  &__label {
+    font-size: 0.875rem;
+    color: fn.color(dark);
+    font-weight: 500;
+    text-align: center;
+  }
+
+  
+  &--sm {
+    --ce-spinner-size: 1.25rem;
+    --ce-spinner-thickness: 2px;
+    gap: var(--ce-spinner-gap-sm, 0.375rem);
+
+    .loader__label,
+    .ce-loader__label,
+    .spinner__label {
+      font-size: 0.75rem;
+    }
+  }
+
+  &--md {
+    --ce-spinner-size: 2rem;
+    --ce-spinner-thickness: 3px;
+  }
+
+  &--lg {
+    --ce-spinner-size: 3rem;
+    --ce-spinner-thickness: 4px;
+    gap: var(--ce-spinner-gap-lg, 0.75rem);
+
+    .loader__label,
+    .ce-loader__label,
+    .spinner__label {
+      font-size: 1rem;
+    }
+  }
+
+  
+  &--primary {
+    --ce-spinner-color: #{fn.color(primary)};
+  }
+
+  &--secondary {
+    --ce-spinner-color: #{fn.color(secondary)};
+  }
+
+  &--success {
+    --ce-spinner-color: #{fn.color(success)};
+  }
+
+  &--danger {
+    --ce-spinner-color: #{fn.color(danger)};
+  }
+
+  &--warning {
+    --ce-spinner-color: #{fn.color(warning)};
+  }
+
+  &--info {
+    --ce-spinner-color: #{fn.color(info)};
+  }
+
+  &__visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  &--dots {
+    .loader__spinner,
+    .ce-loader__spinner,
+    .spinner__spinner {
+      border: none;
+      background: none;
+      width: auto;
+      height: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ce-spinner-dot-gap, 0.4em);
+      animation: none;
+    }
+
+    .spinner__dot {
+      width: var(--ce-spinner-dot-size, 0.5em);
+      height: var(--ce-spinner-dot-size, 0.5em);
+      background: var(--ce-spinner-color, #{fn.color(primary)});
+      border-radius: var(--ce-spinner-dot-radius, var(--ce-radius-circle, 50%));
+      animation: spinner-dot-bounce var(--ce-spinner-speed, 0.8s) infinite alternate;
+    }
+    .spinner__dot:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+    .spinner__dot:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+
+  &--bars {
+    .loader__spinner,
+    .ce-loader__spinner,
+    .spinner__spinner {
+      border: none;
+      background: none;
+      width: auto;
+      height: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ce-spinner-bar-gap, 0.25em);
+      animation: none;
+    }
+
+    .spinner__bar {
+      width: var(--ce-spinner-bar-width, 0.25em);
+      height: var(--ce-spinner-bar-height, 1.5em);
+      background: var(--ce-spinner-color, #{fn.color(primary)});
+      border-radius: var(--ce-spinner-bar-radius, 0.125em);
+      animation: spinner-bar-grow var(--ce-spinner-speed, 0.8s) infinite alternate;
+    }
+    .spinner__bar:nth-child(2) {
+      animation-delay: 0.15s;
+    }
+    .spinner__bar:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+  }
+
+  
+  &--inline {
+    flex-direction: row;
+    gap: var(--ce-spinner-gap-inline, 0.75rem);
+  }
+}
+
+@keyframes spinner-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-dot-bounce {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-0.5em);
+    opacity: 0.5;
+  }
+}
+
+@keyframes spinner-bar-grow {
+  0% {
+    height: var(--ce-spinner-bar-height, 1em);
+    opacity: 1;
+  }
+  100% {
+    height: calc(var(--ce-spinner-bar-height, 1em) * 1.5);
+    opacity: 0.5;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+

package/src/components/feedback/_toast-queue.scss

@@ -0,0 +1,164 @@
+// components/feedback/_toast-queue.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Toast Queue Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: ARIA roles, keyboard navigation
+// - Supports stacking, auto-dismiss, actions, types, icons
+
+.toast-queue {
+  position: fixed;
+  bottom: var(--ce-toast-queue-bottom, #{fn.space(xl)});
+  right: var(--ce-toast-queue-right, #{fn.space(xl)});
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-toast-gap, #{fn.space(md)});
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: var(--ce-toast-gap, #{fn.space(md)});
+  background: var(--ce-toast-bg, #{fn.color(neutral-ink)});
+  color: var(--ce-toast-color, #{fn.color(white)});
+  font-size: var(--ce-toast-font-size, 1rem);
+  border-radius: var(--ce-toast-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-toast-shadow, #{fn.shadow(md)});
+  padding: var(--ce-toast-padding, #{fn.space(sm)} #{fn.space(md)});
+  min-width: 16em;
+  max-width: 28em;
+  pointer-events: auto;
+  animation: toast-fade-in 0.3s;
+  position: relative;
+
+  &__icon {
+    font-size: 1.3em;
+    margin-right: 0.5em;
+    color: var(--ce-toast-icon-color, #{fn.color(white)});
+    flex-shrink: 0;
+  }
+
+  &__message {
+    flex: 1;
+    font-size: 1em;
+    color: var(--ce-toast-message-color, #{fn.color(white)});
+  }
+
+  &__actions {
+    display: flex;
+    gap: var(--ce-toast-action-gap, #{fn.space(sm)});
+    button {
+      background: var(--ce-toast-action-bg, #{fn.color(white)});
+      color: var(--ce-toast-action-color, #{fn.color(neutral-ink)});
+      border: none;
+      border-radius: var(--ce-toast-action-radius, #{fn.radius(sm)});
+      padding: var(--ce-toast-action-padding, #{fn.space(xs)} #{fn.space(sm)});
+      font-size: 0.95em;
+      cursor: pointer;
+      transition: background 0.2s;
+      &:hover,
+      &:focus {
+        background: var(--ce-toast-action-hover, #{fn.color(accent-blue-soft)});
+      }
+      &:disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &--info {
+    background: var(--ce-toast-info-bg, #{fn.color(accent-blue)});
+    color: var(--ce-toast-info-color, #{fn.color(white)});
+    .toast__icon {
+      color: var(--ce-toast-info-icon, #{fn.color(white)});
+    }
+  }
+  &--success {
+    background: var(--ce-toast-success-bg, #{fn.color(accent-lime)});
+    color: var(--ce-toast-success-color, #{fn.color(white)});
+    .toast__icon {
+      color: var(--ce-toast-success-icon, #{fn.color(white)});
+    }
+  }
+  &--warning {
+    background: var(--ce-toast-warning-bg, #{fn.color(accent-amber)});
+    color: var(--ce-toast-warning-color, #{fn.color(neutral-ink)});
+    .toast__icon {
+      color: var(--ce-toast-warning-icon, #{fn.color(neutral-ink)});
+    }
+  }
+  &--error {
+    background: var(--ce-toast-error-bg, #{fn.color(accent-rose)});
+    color: var(--ce-toast-error-color, #{fn.color(white)});
+    .toast__icon {
+      color: var(--ce-toast-error-icon, #{fn.color(white)});
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 0.7em;
+    right: 1em;
+    background: none;
+    border: none;
+    color: var(--ce-toast-close, #{fn.color(white)});
+    font-size: 1.2em;
+    cursor: pointer;
+    transition: color 0.2s;
+    &:hover {
+      color: var(--ce-toast-close-hover, #{fn.color(accent-rose)});
+    }
+  }
+}
+
+@keyframes toast-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Accessibility notes:
+// - Use role="alert" or role="status" as appropriate
+// - Use aria-live, aria-atomic, aria-label for messages
+// - Keyboard navigation: tab, enter/space to close or activate actions
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-toast-queue-bottom: 2em;
+//   --ce-toast-queue-right: 2em;
+//   --ce-toast-bg: #222;
+//   --ce-toast-color: #fff;
+//   --ce-toast-font-size: 1rem;
+//   --ce-toast-radius: 0.5em;
+//   --ce-toast-shadow: 0 2px 8px rgba(0,0,0,0.12);
+//   --ce-toast-padding: 0.8em 1.2em;
+//   --ce-toast-icon-color: #fff;
+//   --ce-toast-message-color: #fff;
+//   --ce-toast-action-bg: #fff;
+//   --ce-toast-action-color: #222;
+//   --ce-toast-action-hover: #e0eaff;
+//   --ce-toast-info-bg: #0078d4;
+//   --ce-toast-info-color: #fff;
+//   --ce-toast-info-icon: #fff;
+//   --ce-toast-success-bg: #2ecc40;
+//   --ce-toast-success-color: #fff;
+//   --ce-toast-success-icon: #fff;
+//   --ce-toast-warning-bg: #ffb700;
+//   --ce-toast-warning-color: #222;
+//   --ce-toast-warning-icon: #222;
+//   --ce-toast-error-bg: #d6336c;
+//   --ce-toast-error-color: #fff;
+//   --ce-toast-error-icon: #fff;
+//   --ce-toast-close: #fff;
+//   --ce-toast-close-hover: #d6336c;
+// }

package/src/components/form-controls/_autocomplete.scss

@@ -0,0 +1,80 @@
+// components/form-controls/_autocomplete.scss
+
+@use "../../abstracts/functions" as fn;
+
+.autocomplete {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+
+  &__input {
+    width: 100%;
+    padding: fn.space(sm) fn.space(md);
+    border: 1px solid var(--theme-autocomplete-border, fn.color(muted));
+    border-radius: fn.radius(sm);
+    background-color: var(--theme-autocomplete-bg, fn.color(white));
+    color: var(--theme-autocomplete-fg, fn.color(dark));
+    font-size: 1rem;
+    @extend %transition !optional;
+
+    &:focus {
+      border-color: var(--theme-autocomplete-focus, fn.color(primary));
+      box-shadow: 0 0 0 3px rgba(fn.color(primary), 0.2);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--theme-accent, var(--theme-primary));
+      outline-offset: 2px;
+    }
+  }
+
+  &__list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: var(--theme-autocomplete-list-bg, fn.color(white));
+    border: 1px solid var(--theme-autocomplete-list-border, fn.color(muted));
+    border-radius: fn.radius(sm);
+    box-shadow: fn.shadow(sm);
+    z-index: fn.z(dropdown);
+    margin-top: fn.space(xs);
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    padding: fn.space(xs) fn.space(md);
+    cursor: pointer;
+    color: var(--theme-autocomplete-item-fg, fn.color(dark));
+    background: none;
+    border: none;
+    font-size: inherit;
+    transition: background-color 0.2s, color 0.2s;
+    outline: none;
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--theme-autocomplete-item-hover, fn.color(primary));
+      color: var(--theme-autocomplete-item-hover-fg, fn.color(white));
+      outline: 2px solid var(--theme-accent, var(--theme-primary));
+      outline-offset: 2px;
+    }
+    &.active {
+      background-color: var(
+        --theme-autocomplete-item-active,
+        fn.color(primary)
+      );
+      color: var(--theme-autocomplete-item-active-fg, fn.color(white));
+    }
+  }
+}
+
+// Accessibility notes:
+// - Use role="combobox" on .autocomplete
+// - Use role="listbox" on .autocomplete__list
+// - Use role="option" on each item
+// - aria-activedescendant for active item
+// - aria-expanded, aria-controls, aria-autocomplete
+// - Keyboard navigation: up/down arrows, Enter to select

package/src/components/form-controls/_checkbox.scss

@@ -0,0 +1,202 @@
+// components/form-controls/_checkbox.scss
+
+@use "../../abstracts/functions" as fn;
+@use "../../abstracts/mixins" as mx;
+
+.checkbox,
+.ce-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ce-checkbox-gap, #{fn.space(sm)});
+  cursor: var(--ce-checkbox-cursor, pointer);
+  font-size: var(--ce-checkbox-size, 1rem);
+  position: relative;
+  color: var(--ce-checkbox-color, inherit);
+
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: var(--ce-checkbox-box-size, 1.125rem) !important;
+    height: var(--ce-checkbox-box-size, 1.125rem) !important;
+    min-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+    max-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+    min-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+    max-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+    border-width: var(--ce-checkbox-border-width, 2px);
+    border-style: var(--ce-checkbox-border-style, solid);
+    border-color: var(--ce-checkbox-border-color, #cbd5e0);
+    border-radius: var(--ce-checkbox-radius, 0.25rem);
+    background-color: var(--ce-checkbox-bg, white);
+    cursor: var(--ce-checkbox-cursor, pointer);
+    margin: 0;
+    padding: 0;
+    flex-shrink: 0;
+    position: relative;
+    transition: all var(--ce-checkbox-transition, 0.2s)
+      var(--ce-checkbox-transition-ease, ease);
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: var(--ce-checkbox-hover-border, #3b82f6);
+    }
+
+    &:checked {
+      background-color: var(--ce-checkbox-checked-bg, #3b82f6);
+      border-color: var(--ce-checkbox-checked-border, #3b82f6);
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: var(--ce-checkbox-check-left, 0.3rem);
+        top: var(--ce-checkbox-check-top, 0.05rem);
+        width: var(--ce-checkbox-check-width, 0.35rem);
+        height: var(--ce-checkbox-check-height, 0.65rem);
+        border: solid var(--ce-checkbox-check-color, white);
+        border-width: 0 var(--ce-checkbox-check-stroke, 2px)
+          var(--ce-checkbox-check-stroke, 2px) 0;
+        transform: rotate(45deg);
+      }
+    }
+
+    &:focus {
+      outline-width: var(--ce-checkbox-focus-outline-width, 2px);
+      outline-style: var(--ce-checkbox-focus-outline-style, solid);
+      outline-color: var(--ce-checkbox-focus-outline-color, rgba(59, 130, 246, 0.3));
+      outline-offset: var(--ce-checkbox-focus-outline-offset, 2px);
+    }
+
+    &:disabled {
+      cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+      opacity: var(--ce-checkbox-disabled-opacity, 0.5);
+      background-color: var(--ce-checkbox-disabled-bg, #f7fafc);
+    }
+  }
+
+  &--disabled {
+    color: var(--ce-checkbox-disabled-color, #{fn.color(muted)});
+    cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+
+    input[type="checkbox"] {
+      cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+    }
+  }
+}
+
+// Target checkbox inputs inside ce-checkbox webcomponent directly
+ce-checkbox {
+  display: inline-block;
+
+  > input[type="checkbox"],
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: inline-block;
+    width: var(--ce-checkbox-box-size, 1.125rem) !important;
+    height: var(--ce-checkbox-box-size, 1.125rem) !important;
+    min-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+    max-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+    min-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+    max-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+    border-width: var(--ce-checkbox-border-width, 2px);
+    border-style: var(--ce-checkbox-border-style, solid);
+    border-color: var(--ce-checkbox-border-color, #cbd5e0);
+    border-radius: var(--ce-checkbox-radius, 0.25rem);
+    background-color: var(--ce-checkbox-bg, white);
+    cursor: var(--ce-checkbox-cursor, pointer);
+    margin: 0;
+    padding: 0;
+    flex-shrink: 0;
+    position: relative;
+    transition: all var(--ce-checkbox-transition, 0.2s)
+      var(--ce-checkbox-transition-ease, ease);
+    vertical-align: middle;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: var(--ce-checkbox-hover-border, #3b82f6);
+    }
+
+    &:checked {
+      background-color: var(--ce-checkbox-checked-bg, #3b82f6);
+      border-color: var(--ce-checkbox-checked-border, #3b82f6);
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: var(--ce-checkbox-check-left, 0.3rem);
+        top: var(--ce-checkbox-check-top, 0.05rem);
+        width: var(--ce-checkbox-check-width, 0.35rem);
+        height: var(--ce-checkbox-check-height, 0.65rem);
+        border: solid var(--ce-checkbox-check-color, white);
+        border-width: 0 var(--ce-checkbox-check-stroke, 2px)
+          var(--ce-checkbox-check-stroke, 2px) 0;
+        transform: rotate(45deg);
+      }
+    }
+
+    &:focus {
+      outline-width: var(--ce-checkbox-focus-outline-width, 2px);
+      outline-style: var(--ce-checkbox-focus-outline-style, solid);
+      outline-color: var(--ce-checkbox-focus-outline-color, rgba(59, 130, 246, 0.3));
+      outline-offset: var(--ce-checkbox-focus-outline-offset, 2px);
+    }
+
+    &:disabled {
+      cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+      opacity: var(--ce-checkbox-disabled-opacity, 0.5);
+      background-color: var(--ce-checkbox-disabled-bg, #f7fafc);
+    }
+  }
+}
+
+// Also target div wrapper if it exists
+ce-checkbox > div {
+  > input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: inline-block;
+    width: var(--ce-checkbox-box-size, 1.125rem) !important;
+    height: var(--ce-checkbox-box-size, 1.125rem) !important;
+    min-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+    max-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+    min-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+    max-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+    border-width: var(--ce-checkbox-border-width, 2px);
+    border-style: var(--ce-checkbox-border-style, solid);
+    border-color: var(--ce-checkbox-border-color, #cbd5e0);
+    border-radius: var(--ce-checkbox-radius, 0.25rem);
+    background-color: var(--ce-checkbox-bg, white);
+    cursor: var(--ce-checkbox-cursor, pointer);
+    margin: 0;
+    padding: 0;
+    position: relative;
+    transition: all var(--ce-checkbox-transition, 0.2s)
+      var(--ce-checkbox-transition-ease, ease);
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: var(--ce-checkbox-hover-border, #3b82f6);
+    }
+
+    &:checked {
+      background-color: var(--ce-checkbox-checked-bg, #3b82f6);
+      border-color: var(--ce-checkbox-checked-border, #3b82f6);
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: var(--ce-checkbox-check-left, 0.3rem);
+        top: var(--ce-checkbox-check-top, 0.05rem);
+        width: var(--ce-checkbox-check-width, 0.35rem);
+        height: var(--ce-checkbox-check-height, 0.65rem);
+        border: solid var(--ce-checkbox-check-color, white);
+        border-width: 0 var(--ce-checkbox-check-stroke, 2px)
+          var(--ce-checkbox-check-stroke, 2px) 0;
+        transform: rotate(45deg);
+      }
+    }
+  }
+}

package/src/components/form-controls/_date-picker.scss

@@ -0,0 +1,50 @@
+// components/form-controls/_date-picker.scss
+
+@use "../../abstracts/functions" as fn;
+@use "../../abstracts/mixins" as mx;
+
+.date-picker {
+  width: 100%;
+
+  input[type="date"],
+  input[type="datetime-local"] {
+    padding: var(--ce-date-picker-padding, #{fn.space(sm)} #{fn.space(md)});
+    border-width: var(--ce-date-picker-border-width, 1px);
+    border-style: var(--ce-date-picker-border-style, solid);
+    border-color: var(
+      --ce-date-picker-border-color,
+      var(--theme-date-picker-border, #{fn.color(muted)})
+    );
+    border-radius: var(--ce-date-picker-radius, #{fn.radius(sm)});
+    background-color: var(
+      --ce-date-picker-bg,
+      var(--theme-date-picker-bg, #{fn.color(white)})
+    );
+    color: var(
+      --ce-date-picker-color,
+      var(--theme-date-picker-fg, #{fn.color(dark)})
+    );
+    width: var(--ce-date-picker-width, 100%);
+    @extend %transition !optional;
+
+    &:focus {
+      border-color: var(
+        --ce-date-picker-focus-border,
+        var(--theme-date-picker-focus, #{fn.color(primary)})
+      );
+      box-shadow: var(
+        --ce-date-picker-focus-shadow,
+        0 0 0 3px rgba(fn.color(primary), 0.2)
+      );
+    }
+    &:focus-visible {
+      outline-width: var(--ce-date-picker-outline-width, 2px);
+      outline-style: var(--ce-date-picker-outline-style, solid);
+      outline-color: var(
+        --ce-date-picker-outline-color,
+        var(--theme-accent, var(--theme-primary))
+      );
+      outline-offset: var(--ce-date-picker-outline-offset, 2px);
+    }
+  }
+}