@clusterenvision/ui-scss 1.94.3

package/src/components/navigation/_stepper.scss

@@ -0,0 +1,115 @@
+// components/navigation/_stepper.scss
+
+@use "../../abstracts/functions" as fn;
+
+.stepper {
+  display: var(--ce-stepper-display, flex);
+  align-items: var(--ce-stepper-align, center);
+  gap: var(--ce-stepper-gap, 1.5rem);
+  width: var(--ce-stepper-width, 100%);
+  padding: var(--ce-stepper-padding, #{fn.space(md)} 0);
+
+  &__step {
+    display: var(--ce-stepper-step-display, flex);
+    flex-direction: var(--ce-stepper-step-direction, column);
+    align-items: var(--ce-stepper-step-align, center);
+    position: var(--ce-stepper-step-position, relative);
+    flex: var(--ce-stepper-step-flex, 1);
+    min-width: var(--ce-stepper-step-min-width, 2.5rem);
+    color: var(
+      --ce-stepper-step-color,
+      var(--theme-stepper-fg, #{fn.color(muted)})
+    );
+    font-size: var(--ce-stepper-step-size, 1rem);
+    font-weight: var(--ce-stepper-step-weight, 500);
+
+    &.active {
+      color: var(
+        --ce-stepper-step-active,
+        var(--theme-stepper-active, #{fn.color(primary)})
+      );
+    }
+    &.completed {
+      color: var(
+        --ce-stepper-step-completed,
+        var(--theme-stepper-completed, #{fn.color(success)})
+      );
+    }
+    &:focus-visible {
+      outline: var(
+        --ce-stepper-step-focus-outline,
+        2px solid var(--theme-accent, var(--theme-primary))
+      );
+      outline-offset: var(--ce-stepper-step-focus-offset, 2px);
+    }
+  }
+
+  &__circle {
+    width: var(--ce-stepper-circle-size, 2rem);
+    height: var(--ce-stepper-circle-size, 2rem);
+    border-radius: var(--ce-stepper-circle-radius, 50%);
+    background-color: var(
+      --ce-stepper-circle-bg,
+      var(--theme-stepper-circle-bg, #{fn.color(light)})
+    );
+    color: var(
+      --ce-stepper-circle-fg,
+      var(--theme-stepper-circle-fg, #{fn.color(dark)})
+    );
+    display: var(--ce-stepper-circle-display, flex);
+    align-items: var(--ce-stepper-circle-align, center);
+    justify-content: var(--ce-stepper-circle-justify, center);
+    font-weight: var(--ce-stepper-circle-weight, 600);
+    font-size: var(--ce-stepper-circle-size-text, 1rem);
+    margin-bottom: var(--ce-stepper-circle-margin, 0.5rem);
+    border: var(
+      --ce-stepper-circle-border,
+      2px solid var(--theme-stepper-circle-border, #{fn.color(muted)})
+    );
+    transition: var(
+      --ce-stepper-circle-transition,
+      border-color 0.2s
+    );
+
+    &.active {
+      border-color: var(
+        --ce-stepper-circle-active,
+        var(--theme-stepper-active, #{fn.color(primary)})
+      );
+    }
+    &.completed {
+      border-color: var(
+        --ce-stepper-circle-completed,
+        var(--theme-stepper-completed, #{fn.color(success)})
+      );
+    }
+  }
+
+  &__label {
+    font-size: var(--ce-stepper-label-size, 0.875rem);
+    color: var(
+      --ce-stepper-label-color,
+      var(--theme-stepper-label, #{fn.color(muted)})
+    );
+    text-align: var(--ce-stepper-label-align, center);
+  }
+
+  &__line {
+    position: var(--ce-stepper-line-position, absolute);
+    top: var(--ce-stepper-line-top, 1rem);
+    left: var(--ce-stepper-line-left, 100%);
+    width: var(--ce-stepper-line-width, 1.5rem);
+    height: var(--ce-stepper-line-height, 2px);
+    background-color: var(
+      --ce-stepper-line-bg,
+      var(--theme-stepper-line, #{fn.color(muted)})
+    );
+    z-index: var(--ce-stepper-line-z, 0);
+  }
+}
+
+// Accessibility notes:
+// - Use role="list" on .stepper
+// - Use role="listitem" on each step
+// - aria-current for active step
+// - aria-label for step labels

package/src/components/navigation/_tabs.scss

@@ -0,0 +1,50 @@
+// components/navigation/_tabs.scss
+
+@use "../../abstracts/functions" as fn;
+
+.tabs {
+  display: var(--ce-tabs-display, flex);
+  border-bottom: var(
+    --ce-tabs-border,
+    2px solid var(--theme-tabs-border, #{fn.color(muted)})
+  );
+  overflow-x: var(--ce-tabs-overflow, auto);
+  gap: var(--ce-tabs-gap, #{fn.space(md)});
+
+  .tab {
+    padding: var(--ce-tabs-tab-padding, #{fn.space(sm)} #{fn.space(md)});
+    cursor: var(--ce-tabs-tab-cursor, pointer);
+    font-weight: var(--ce-tabs-tab-weight, 500);
+    border-bottom: var(--ce-tabs-tab-underline, 2px solid transparent);
+    color: var(
+      --ce-tabs-tab-color,
+      var(--theme-tabs-fg, #{fn.color(dark)})
+    );
+    transition: var(--ce-tabs-tab-transition, border-color 0.2s);
+
+    &.active {
+      border-color: var(
+        --ce-tabs-tab-active-border,
+        var(--theme-tabs-active-border, #{fn.color(primary)})
+      );
+      color: var(
+        --ce-tabs-tab-active-color,
+        var(--theme-tabs-active-fg, #{fn.color(primary)})
+      );
+    }
+
+    &:hover {
+      border-color: var(
+        --ce-tabs-tab-hover-border,
+        var(--theme-tabs-hover-border, #{fn.color(primary)})
+      );
+      &:focus-visible {
+        outline: var(
+          --ce-tabs-tab-focus-outline,
+          2px solid var(--theme-accent, var(--theme-primary))
+        );
+        outline-offset: var(--ce-tabs-tab-focus-offset, 2px);
+      }
+    }
+  }
+}

package/src/components/navigation/_tree-view.scss

@@ -0,0 +1,95 @@
+// components/navigation/_tree-view.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Tree View Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: keyboard navigation, ARIA roles
+// - Supports nested nodes, expand/collapse, icons
+
+.tree-view {
+  display: block;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  background: var(--ce-tree-bg, #{fn.color(white)});
+  color: var(--ce-tree-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-tree-font-size, 1rem);
+
+  &__node {
+    display: flex;
+    align-items: center;
+    padding: var(--ce-tree-node-padding, #{fn.space(sm)} #{fn.space(md)});
+    cursor: pointer;
+    border-radius: var(--ce-tree-node-radius, #{fn.radius(sm)});
+    transition: background 0.2s;
+    outline: none;
+
+    &:hover,
+    &:focus {
+      background: var(--ce-tree-node-hover-bg, #{fn.color(gray-100)});
+    }
+
+    &--selected {
+      background: var(--ce-tree-node-selected-bg, #{fn.color(accent-blue-soft)});
+      color: var(--ce-tree-node-selected-color, #{fn.color(accent-blue)});
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  &__toggle {
+    width: 1em;
+    height: 1em;
+    margin-right: 0.5em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: none;
+    border: none;
+    color: var(--ce-tree-toggle-color, #{fn.color(neutral-mid)});
+    transition: color 0.2s;
+    &:hover {
+      color: var(--ce-tree-toggle-hover, #{fn.color(accent-blue)});
+    }
+  }
+
+  &__children {
+    margin-left: var(--ce-tree-children-indent, 1.5em);
+    padding-left: 0.5em;
+    border-left: 1px dashed var(--ce-tree-children-border, #{fn.color(gray-200)});
+  }
+
+  &__icon {
+    margin-right: 0.5em;
+    color: var(--ce-tree-icon-color, #{fn.color(neutral-mid)});
+    font-size: 1em;
+    display: inline-block;
+  }
+}
+
+// Accessibility notes:
+// - Use role="tree" on the root, role="treeitem" on nodes, aria-expanded, aria-selected, aria-disabled as needed
+// - Keyboard navigation: arrow keys, space/enter to expand/collapse/select
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-tree-bg: #fff;
+//   --ce-tree-color: #222;
+//   --ce-tree-font-size: 1rem;
+//   --ce-tree-node-padding: 0.5em 1em;
+//   --ce-tree-node-radius: 0.25em;
+//   --ce-tree-node-hover-bg: #f0f4fa;
+//   --ce-tree-node-selected-bg: #e0eaff;
+//   --ce-tree-node-selected-color: #0078d4;
+//   --ce-tree-toggle-color: #888;
+//   --ce-tree-toggle-hover: #0078d4;
+//   --ce-tree-children-indent: 1.5em;
+//   --ce-tree-children-border: #e0e0e0;
+//   --ce-tree-icon-color: #888;
+// }

package/src/components/navigation/_wizard.scss

@@ -0,0 +1,132 @@
+// components/navigation/_wizard.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Wizard/Stepper Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: keyboard navigation, ARIA roles
+// - Supports steps, progress, completed, error, disabled
+
+.wizard {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--ce-wizard-gap, #{fn.space(xl)});
+  background: var(--ce-wizard-bg, #{fn.color(white)});
+  color: var(--ce-wizard-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-wizard-font-size, 1rem);
+  padding: var(--ce-wizard-padding, #{fn.space(md)});
+  border-radius: var(--ce-wizard-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-wizard-shadow, #{fn.shadow(xs)});
+
+  &__steps {
+    display: flex;
+    flex-direction: row;
+    gap: var(--ce-wizard-step-gap, #{fn.space(lg)});
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  &__step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    transition: color 0.2s, background 0.2s;
+    color: var(--ce-wizard-step-color, #{fn.color(neutral-mid)});
+    background: var(--ce-wizard-step-bg, #{fn.color(neutral-surface)});
+    border-radius: var(--ce-wizard-step-radius, #{fn.radius(xl)});
+    padding: var(--ce-wizard-step-padding, #{fn.space(sm)} #{fn.space(md)});
+    min-width: 3em;
+    min-height: 3em;
+    font-weight: 500;
+    &:hover,
+    &:focus {
+      background: var(--ce-wizard-step-hover-bg, #{fn.color(accent-blue-soft)});
+      color: var(--ce-wizard-step-hover-color, #{fn.color(accent-blue)});
+    }
+    &--active {
+      background: var(--ce-wizard-step-active-bg, #{fn.color(accent-blue)});
+      color: var(--ce-wizard-step-active-color, #{fn.color(white)});
+      font-weight: 700;
+      box-shadow: 0 0 0 var(--ce-wizard-outline, 2px)
+        var(--ce-wizard-step-active-shadow, #{fn.color(accent-blue-muted)});
+    }
+    &--completed {
+      background: var(--ce-wizard-step-completed-bg, #{fn.color(accent-blue-muted)});
+      color: var(--ce-wizard-step-completed-color, #{fn.color(accent-blue)});
+    }
+    &--error {
+      background: var(--ce-wizard-step-error-bg, #{fn.color(accent-rose-soft)});
+      color: var(--ce-wizard-step-error-color, #{fn.color(accent-rose)});
+    }
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    &__label {
+      margin-top: 0.5em;
+      font-size: 0.95em;
+      color: inherit;
+    }
+    &__icon {
+      font-size: 1.2em;
+      margin-bottom: 0.2em;
+      color: inherit;
+    }
+  }
+
+  &__progress {
+    flex: 1;
+    height: var(--ce-wizard-progress-height, 0.25em);
+    background: var(--ce-wizard-progress-bg, #{fn.color(gray-200)});
+    border-radius: var(--ce-wizard-progress-radius, var(--ce-radius-sm, 0.25em));
+    margin: var(--ce-wizard-progress-margin, 1em 0);
+    position: relative;
+    overflow: hidden;
+    &__bar {
+      height: 100%;
+      background: var(--ce-wizard-progress-bar, #{fn.color(accent-blue)});
+      border-radius: var(--ce-wizard-progress-radius, var(--ce-radius-sm, 0.25em));
+      transition: width 0.3s;
+      width: 0%; // Set dynamically
+    }
+  }
+}
+
+// Accessibility notes:
+// - Use role="list" for steps, role="listitem" for step
+// - Use aria-current, aria-disabled, aria-label as needed
+// - Keyboard navigation: arrow keys, tab, enter/space to activate
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-wizard-bg: #fff;
+//   --ce-wizard-color: #222;
+//   --ce-wizard-font-size: 1rem;
+//   --ce-wizard-padding: 1em;
+//   --ce-wizard-radius: 0.5em;
+//   --ce-wizard-shadow: 0 1px 4px rgba(0,0,0,0.04);
+//   --ce-wizard-gap: 2em;
+//   --ce-wizard-step-gap: 1.5em;
+//   --ce-wizard-step-color: #888;
+//   --ce-wizard-step-bg: #f5f7fa;
+//   --ce-wizard-step-radius: 1em;
+//   --ce-wizard-step-padding: 0.5em 1em;
+//   --ce-wizard-step-hover-bg: #e0eaff;
+//   --ce-wizard-step-hover-color: #0078d4;
+//   --ce-wizard-step-active-bg: #0078d4;
+//   --ce-wizard-step-active-color: #fff;
+//   --ce-wizard-step-active-shadow: #d0e7ff;
+//   --ce-wizard-step-completed-bg: #d0e7ff;
+//   --ce-wizard-step-completed-color: #0078d4;
+//   --ce-wizard-step-error-bg: #ffe0e0;
+//   --ce-wizard-step-error-color: #d6336c;
+//   --ce-wizard-progress-bg: #e0e0e0;
+//   --ce-wizard-progress-bar: #0078d4;
+// }

package/src/components/overlays/_backdrop.scss

@@ -0,0 +1,10 @@
+// components/overlays/_backdrop.scss
+
+@use "../../abstracts/functions" as fn;
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(fn.color(black), 0.5);
+  z-index: fn.z(modal);
+}

package/src/components/overlays/_dropdown.scss

@@ -0,0 +1,110 @@
+// components/overlays/_dropdown.scss
+
+@use "../../abstracts/functions" as fn;
+
+.dropdown,
+.ce-dropdown {
+  position: relative;
+  display: inline-block;
+
+  &__trigger,
+  &__toggle {
+    cursor: var(--ce-dropdown-trigger-cursor, pointer);
+    padding: var(--ce-dropdown-trigger-padding, #{fn.space(sm)} #{fn.space(md)});
+    border-width: var(--ce-dropdown-trigger-border-width, 1px);
+    border-style: var(--ce-dropdown-trigger-border-style, solid);
+    border-color: var(
+      --ce-dropdown-trigger-border-color,
+      var(--theme-dropdown-trigger-border, #{fn.color(muted)})
+    );
+    border-radius: var(--ce-dropdown-trigger-radius, #{fn.radius(sm)});
+    background-color: var(
+      --ce-dropdown-trigger-bg,
+      var(--theme-dropdown-trigger-bg, #{fn.color(white)})
+    );
+    color: var(
+      --ce-dropdown-trigger-color,
+      var(--theme-dropdown-trigger-fg, #{fn.color(dark)})
+    );
+  }
+
+  &__menu {
+    position: absolute;
+    top: var(--ce-dropdown-menu-top, calc(100% + 0.25rem));
+    left: var(--ce-dropdown-menu-left, 0);
+    right: var(--ce-dropdown-menu-right, auto);
+    background-color: var(
+      --ce-dropdown-menu-bg,
+      var(--theme-dropdown-bg, #{fn.color(white)})
+    );
+    border-width: var(--ce-dropdown-menu-border-width, 1px);
+    border-style: var(--ce-dropdown-menu-border-style, solid);
+    border-color: var(
+      --ce-dropdown-menu-border-color,
+      var(--theme-dropdown-border, #{fn.color(muted)})
+    );
+    border-radius: var(--ce-dropdown-menu-radius, #{fn.radius(sm)});
+    box-shadow: var(--ce-dropdown-menu-shadow, #{fn.shadow(md)});
+    min-width: var(--ce-dropdown-menu-min-width, 160px);
+    max-height: var(--ce-dropdown-menu-max-height, 300px);
+    overflow-y: var(--ce-dropdown-menu-overflow, auto);
+    z-index: var(--ce-dropdown-menu-z, #{fn.z(dropdown)});
+    display: block;
+    opacity: var(--ce-dropdown-menu-opacity, 0);
+    visibility: var(--ce-dropdown-menu-visibility, hidden);
+    pointer-events: var(--ce-dropdown-menu-events, none);
+    transform: var(--ce-dropdown-menu-transform, translateY(-0.5rem));
+    transition: opacity var(--ce-dropdown-menu-transition, 0.2s)
+        var(--ce-dropdown-menu-transition-ease, ease),
+      visibility var(--ce-dropdown-menu-transition, 0.2s)
+        var(--ce-dropdown-menu-transition-ease, ease),
+      transform var(--ce-dropdown-menu-transition, 0.2s)
+        var(--ce-dropdown-menu-transition-ease, ease);
+
+    // Visibility triggers
+    &.is-visible,
+    &.open,
+    .dropdown--open &,
+    .ce-dropdown--open &,
+    .dropdown__toggle[aria-expanded="true"] ~ &,
+    .ce-dropdown__toggle[aria-expanded="true"] ~ &,
+    .dropdown__trigger[aria-expanded="true"] ~ &,
+    .ce-dropdown__trigger[aria-expanded="true"] ~ &,
+    .dropdown:focus-within &,
+    .ce-dropdown:focus-within &,
+    .dropdown:hover &,
+    .ce-dropdown:hover & {
+      opacity: 1 !important;
+      visibility: visible !important;
+      pointer-events: auto !important;
+      transform: translateY(0) !important;
+      display: block !important;
+    }
+
+    a {
+      display: block;
+      padding: var(--ce-dropdown-item-padding, #{fn.space(sm)} #{fn.space(md)});
+      color: var(
+        --ce-dropdown-item-color,
+        var(--theme-dropdown-item-fg, #{fn.color(dark)})
+      );
+      text-decoration: none;
+
+      &:hover {
+        background-color: var(
+          --ce-dropdown-item-hover-bg,
+          var(--theme-dropdown-item-hover, #{fn.color(light)})
+        );
+        &:focus-visible {
+          outline-width: var(--ce-dropdown-item-outline-width, 2px);
+          outline-style: var(--ce-dropdown-item-outline-style, solid);
+          outline-color: var(
+            --ce-dropdown-item-outline-color,
+            var(--theme-accent, var(--theme-primary))
+          );
+          outline-offset: var(--ce-dropdown-item-outline-offset, 2px);
+        }
+      }
+    }
+  }
+}

package/src/components/overlays/_loader.scss

@@ -0,0 +1,32 @@
+// components/overlays/_loader.scss
+
+@use "../../abstracts/functions" as fn;
+
+.loader,
+.ce-loader {
+  width: var(--ce-loader-size, 2rem);
+  height: var(--ce-loader-size, 2rem);
+  border-width: var(--ce-loader-border-width, 3px);
+  border-style: var(--ce-loader-border-style, solid);
+  border-color: var(--ce-loader-border-color, #{fn.color(light)});
+  border-top-color: var(--ce-loader-border-top-color, #{fn.color(primary)});
+  border-radius: var(--ce-loader-radius, 50%);
+  animation: var(--ce-loader-spin, spin 0.75s linear infinite);
+  margin: var(--ce-loader-margin, auto);
+
+  &--sm {
+    width: var(--ce-loader-sm-size, 1.5rem);
+    height: var(--ce-loader-sm-size, 1.5rem);
+  }
+
+  &--lg {
+    width: var(--ce-loader-lg-size, 3rem);
+    height: var(--ce-loader-lg-size, 3rem);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/overlays/_popover.scss

@@ -0,0 +1,64 @@
+// components/overlays/_popover.scss
+
+@use "../../abstracts/functions" as fn;
+
+.popover {
+  position: absolute;
+  min-width: 200px;
+  max-width: 320px;
+  background-color: var(--theme-popover-bg, fn.color(white));
+  color: var(--theme-popover-fg, fn.color(dark));
+  border-radius: fn.radius(md);
+  box-shadow: fn.shadow(md);
+  border: 1px solid var(--theme-popover-border, fn.color(muted));
+  z-index: fn.z(popover);
+  padding: fn.space(md);
+  font-size: 1rem;
+  transition: opacity 0.2s, transform 0.2s;
+  opacity: 0;
+  pointer-events: none;
+
+  &__trigger {
+    cursor: pointer;
+  }
+
+  &__content {
+    position: static;
+    background: none;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    min-width: unset;
+    z-index: auto;
+    display: contents;
+    &.open {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    &__arrow {
+      position: absolute;
+      width: 1rem;
+      height: 1rem;
+      background: var(--theme-popover-bg, fn.color(white));
+      border: 1px solid var(--theme-popover-border, fn.color(muted));
+      transform: rotate(45deg);
+      z-index: -1;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--theme-accent, var(--theme-primary));
+      outline-offset: 2px;
+    }
+  }
+
+  &--right .popover__content {
+    left: auto;
+    right: 0;
+  }
+
+  &--top .popover__content {
+    top: auto;
+    bottom: calc(100% + fn.space(xs));
+  }
+}

package/src/components/overlays/_tooltip.scss

@@ -0,0 +1,64 @@
+// components/overlays/_tooltip.scss
+
+@use "../../abstracts/functions" as fn;
+
+.tooltip {
+  position: var(--ce-tooltip-position, relative);
+  cursor: var(--ce-tooltip-cursor, help);
+
+  &__content {
+    position: var(--ce-tooltip-content-position, absolute);
+    bottom: var(--ce-tooltip-content-bottom, 100%);
+    left: var(--ce-tooltip-content-left, 50%);
+    transform: var(
+      --ce-tooltip-content-transform,
+      translateX(-50%) translateY(fn.space(xs))
+    );
+    background-color: var(
+      --ce-tooltip-content-bg,
+      var(--theme-tooltip-bg, fn.color(dark))
+    );
+    color: var(
+      --ce-tooltip-content-color,
+      var(--theme-tooltip-fg, fn.color(white))
+    );
+    padding: var(
+      --ce-tooltip-content-padding,
+      #{fn.space(xs)} #{fn.space(sm)}
+    );
+    font-size: var(--ce-tooltip-content-size, 0.75rem);
+    white-space: var(--ce-tooltip-content-whitespace, nowrap);
+    border-radius: var(--ce-tooltip-content-radius, #{fn.radius(sm)});
+    opacity: var(--ce-tooltip-content-opacity, 0);
+    pointer-events: var(--ce-tooltip-content-pointer, none);
+    transition: var(--ce-tooltip-content-transition, opacity 0.2s);
+    z-index: var(--ce-tooltip-content-z, #{fn.z(tooltip)});
+
+    &::after {
+      content: var(--ce-tooltip-arrow-content, "");
+      position: var(--ce-tooltip-arrow-position, absolute);
+      top: var(--ce-tooltip-arrow-top, 100%);
+      left: var(--ce-tooltip-arrow-left, 50%);
+      margin-left: var(--ce-tooltip-arrow-offset, -6px);
+      border-width: var(--ce-tooltip-arrow-size, 6px);
+      border-style: var(--ce-tooltip-arrow-style, solid);
+      border-color: var(
+        --ce-tooltip-arrow-color,
+        var(--theme-tooltip-bg, fn.color(dark)) transparent transparent
+          transparent
+      );
+      &:focus-visible {
+        outline: var(
+          --ce-tooltip-focus-outline,
+          2px solid var(--theme-accent, var(--theme-primary))
+        );
+        outline-offset: var(--ce-tooltip-focus-offset, 2px);
+      }
+    }
+  }
+
+  &:hover .tooltip__content,
+  &:focus-within .tooltip__content {
+    opacity: var(--ce-tooltip-content-visible-opacity, 1);
+  }
+}