@dodlhuat/basix 1.3.2 → 1.3.3

package/css/popover.scss

@@ -8,7 +8,7 @@ $arrow: 6px;
   z-index: 900;
   background: var(--background);
   border: 1px solid var(--divider);
-  border-radius: calc($border-radius * 2.5);
+  border-radius: $radius-panel;
   box-shadow:
     0 0 0 1px rgba(0, 0, 0, 0.03),
     0 4px 6px -2px rgba(0, 0, 0, 0.05),
@@ -18,13 +18,11 @@ $arrow: 6px;
   opacity: 0;
   pointer-events: none;
 
-  // Entry: offset from the trigger side + subtle scale
   &[data-placement="top"]    { transform-origin: bottom center; transform: translateY(6px)  scale(0.95); }
   &[data-placement="bottom"] { transform-origin: top center;    transform: translateY(-6px) scale(0.95); }
   &[data-placement="left"]   { transform-origin: right center;  transform: translateX(6px)  scale(0.95); }
   &[data-placement="right"]  { transform-origin: left center;   transform: translateX(-6px) scale(0.95); }
 
-  // Shift transform-origin to the anchor corner for aligned popovers
   &[data-placement="bottom"][data-align="start"] { transform-origin: top left; }
   &[data-placement="bottom"][data-align="end"]   { transform-origin: top right; }
   &[data-placement="top"][data-align="start"]    { transform-origin: bottom left; }
@@ -40,8 +38,6 @@ $arrow: 6px;
     transform: none !important;
   }
 
-  // ── Arrows ─────────────────────────────────────────────────────────────────
-  // Two layers: ::before = border colour (1px larger), ::after = background fill
   &[data-arrow="true"] {
     &::before,
     &::after {
@@ -52,7 +48,6 @@ $arrow: 6px;
       pointer-events: none;
     }
 
-    // bottom placement → arrow ▲ at top of popover
     &[data-placement="bottom"] {
       &::before {
         top: -($arrow + 1px);
@@ -72,7 +67,6 @@ $arrow: 6px;
       }
     }
 
-    // top placement → arrow ▼ at bottom of popover
     &[data-placement="top"] {
       &::before {
         bottom: -($arrow + 1px);
@@ -92,7 +86,6 @@ $arrow: 6px;
       }
     }
 
-    // right placement → arrow ◁ at left of popover
     &[data-placement="right"] {
       &::before {
         left: -($arrow + 1px);
@@ -112,7 +105,6 @@ $arrow: 6px;
       }
     }
 
-    // left placement → arrow ▶ at right of popover
     &[data-placement="left"] {
       &::before {
         right: -($arrow + 1px);
@@ -134,8 +126,6 @@ $arrow: 6px;
   }
 }
 
-// ── Content regions ──────────────────────────────────────────────────────────
-
 .popover-header {
   padding: calc($spacing * 0.65) $spacing;
   border-bottom: 1px solid var(--divider);
@@ -146,7 +136,7 @@ $arrow: 6px;
   align-items: center;
   justify-content: space-between;
   gap: calc($spacing * 0.5);
-  border-radius: calc($border-radius * 2.5) calc($border-radius * 2.5) 0 0;
+  border-radius: $radius-panel $radius-panel 0 0;
 }
 
 .popover-body {
@@ -162,11 +152,9 @@ $arrow: 6px;
   display: flex;
   justify-content: flex-end;
   gap: calc($spacing * 0.5);
-  border-radius: 0 0 calc($border-radius * 2.5) calc($border-radius * 2.5);
+  border-radius: 0 0 $radius-panel $radius-panel;
 }
 
-// ── Action list (menu-style content) ─────────────────────────────────────────
-
 .popover-menu {
   padding: calc($spacing * 0.375) 0;
 

package/css/progress.scss

@@ -1,8 +1,6 @@
 @use "properties";
 @use "parameters" as *;
 
-// ── Progress bar ──────────────────────────────────────────────────────────────
-
 .progress {
   width: 100%;
   height: 8px;
@@ -18,13 +16,11 @@
   transition: width 0.3s ease;
   min-width: 0;
 
-  // ── Color variants ────────────────────────────────────────────────────────
   &.accent  { background: var(--accent-color); }
   &.success { background: var(--success); }
   &.warning { background: var(--warning); }
   &.error   { background: var(--error); }
 
-  // ── Indeterminate ─────────────────────────────────────────────────────────
   &.animated {
     width: 40% !important;
     background: var(--accent-color);
@@ -37,8 +33,6 @@
   100% { transform: translateX(350%); }
 }
 
-// ── Skeleton ──────────────────────────────────────────────────────────────────
-
 @keyframes skeleton-shimmer {
   0%   { background-position: 200% 0; }
   100% { background-position: -200% 0; }

package/css/push-menu.scss

@@ -5,15 +5,13 @@ $menu-width: 280px;
 $menu-easing: cubic-bezier(0.4, 0, 0.2, 1);
 $menu-duration: 300ms;
 
-// ─── Outer nav shell ───────────────────────────────────────────────────────
-
 nav.push-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: $menu-width;
   height: 100%;
-  overflow: hidden; // clip sliding panels
+  overflow: hidden;
   transform: translateX(-100%);
   transition: transform $menu-duration $menu-easing,
               box-shadow $menu-duration $menu-easing;
@@ -34,12 +32,6 @@ nav.push-menu {
   }
 }
 
-// ─── Panel system ──────────────────────────────────────────────────────────
-// Three states:
-//   (no class)  → translateX(105%)  hidden to the right
-//   .is-prev    → translateX(-20%)  parallax depth, previous level
-//   .is-active  → translateX(0)     current visible panel
-
 .push-menu-panel {
   position: absolute;
   inset: 0;
@@ -61,18 +53,14 @@ nav.push-menu {
   }
 }
 
-// ─── Root panel list ───────────────────────────────────────────────────────
-
 .push-menu-panel[data-level="0"] > ul {
-  padding-top: calc($spacing * 4.5); // clear the fixed header
+  padding-top: calc($spacing * 4.5);
   padding-bottom: $spacing;
   margin: 0;
   list-style: none;
   width: 100%;
 }
 
-// ─── Sub-panel header (back button + title) ────────────────────────────────
-
 .push-menu-panel-header {
   display: flex;
   align-items: center;
@@ -116,7 +104,7 @@ nav.push-menu {
   border: none;
   background: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.65);
-  pointer-events: none; // header handles the click
+  pointer-events: none;
   transition: background 160ms ease, color 160ms ease, transform 160ms ease;
 }
 
@@ -131,8 +119,6 @@ nav.push-menu {
   text-overflow: ellipsis;
 }
 
-// ─── Sub-panel list ────────────────────────────────────────────────────────
-
 .push-menu-panel:not([data-level="0"]) > ul {
   padding: calc($spacing * 0.5) 0;
   margin: 0;
@@ -140,13 +126,10 @@ nav.push-menu {
   width: 100%;
 }
 
-// ─── List items ────────────────────────────────────────────────────────────
-
 nav li {
   margin: 0;
 }
 
-// Shared styles: anchor links and submenu trigger spans
 nav a,
 .push-menu-item {
   color: var(--accent-color-text);
@@ -181,8 +164,6 @@ nav li + li .push-menu-item {
   border-top: 1px solid rgba(255, 255, 255, 0.055);
 }
 
-// ─── Chevron for parent items ───────────────────────────────────────────────
-
 .push-menu-chevron {
   margin-left: auto;
   flex-shrink: 0;
@@ -198,8 +179,6 @@ nav li + li .push-menu-item {
   transform: translateX(2px);
 }
 
-// ─── Navigation controls (hamburger) ───────────────────────────────────────
-
 .navigation-controls {
   line-height: inherit;
 
@@ -221,8 +200,6 @@ nav li + li .push-menu-item {
   }
 }
 
-// ─── Backdrop ──────────────────────────────────────────────────────────────
-
 .push-menu-backdrop {
   position: fixed;
   inset: 0;
@@ -240,8 +217,6 @@ nav li + li .push-menu-item {
   }
 }
 
-// ─── Main header ───────────────────────────────────────────────────────────
-
 .main-header {
   position: fixed;
   background: var(--secondary-background);

package/css/radiobutton.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 $radio-size: 1.15rem;
 $radio-dot-size: 0.55rem;
@@ -31,7 +32,7 @@ $radio-dot-size: 0.55rem;
     }
 
     &:focus-visible ~ .checkmark {
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+      @include focus-glow(15%);
       border-color: var(--accent-color);
     }
 

package/css/range-slider.scss

@@ -16,13 +16,12 @@ $thumb-size: 1.1rem;
     padding: calc($spacing / 2) 0;
     margin: 0;
     display: block;
-    // reset form.scss overrides
+
     min-height: auto;
     border: none;
     box-shadow: none;
     outline: none;
 
-    // ── Track ────────────────────────────────────────────────
     &::-webkit-slider-runnable-track {
       height: $track-height;
       border-radius: $track-height;
@@ -45,7 +44,6 @@ $thumb-size: 1.1rem;
       background: var(--accent-color);
     }
 
-    // ── Thumb ─────────────────────────────────────────────────
     &::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
@@ -70,7 +68,6 @@ $thumb-size: 1.1rem;
       cursor: pointer;
     }
 
-    // ── Hover ─────────────────────────────────────────────────
     &:hover::-webkit-slider-thumb {
       transform: scale(1.15);
       box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 15%, transparent);
@@ -81,7 +78,6 @@ $thumb-size: 1.1rem;
       box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 15%, transparent);
     }
 
-    // ── Active ────────────────────────────────────────────────
     &:active::-webkit-slider-thumb {
       transform: scale(1.22);
       box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-color) 18%, transparent);
@@ -92,7 +88,6 @@ $thumb-size: 1.1rem;
       box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-color) 18%, transparent);
     }
 
-    // ── Focus ─────────────────────────────────────────────────
     &:focus-visible::-webkit-slider-thumb {
       box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
     }
@@ -101,7 +96,6 @@ $thumb-size: 1.1rem;
       box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
     }
 
-    // ── Disabled ──────────────────────────────────────────────
     &:disabled {
       cursor: not-allowed;
 

package/css/scrollbar.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 :root {
   --track-width: 12px;
@@ -52,7 +53,6 @@
     pointer-events: auto;
     transition: background 0.3s ease;
 
-    // Direct hover over the track lane → more intent, wider thumb
     &:hover {
       background: var(--hover);
 
@@ -76,7 +76,6 @@
     pointer-events: auto;
     touch-action: none;
 
-    // Thin sliver at rest, grows rightward on interaction
     transform: scaleX(0.3);
     transform-origin: right center;
     transition:
@@ -87,19 +86,16 @@
     will-change: top, height, transform, opacity;
   }
 
-  // Hover over the container → reveal thumb gently
   &:hover .thumb {
     opacity: 0.45;
     transform: scaleX(0.5);
   }
 
-  // JS: user is actively scrolling (fades out ~800ms after last scroll)
   &.is-scrolling .thumb {
     opacity: 0.6;
     transform: scaleX(0.5);
   }
 
-  // JS: thumb is being dragged
   &.is-dragging {
     cursor: grabbing;
 
@@ -111,7 +107,7 @@
       opacity: 1;
       transform: scaleX(1);
       background: var(--accent-color);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
+      @include focus-glow(18%);
       cursor: grabbing;
       transition:
         opacity 0.15s ease,

package/css/sidebar-nav.scss

@@ -1,14 +1,10 @@
 @use "parameters" as *;
 
-// ── Layout shell ──────────────────────────────────────────────────────────────
-
 .sidebar-layout {
   display: flex;
   min-height: 100vh;
 }
 
-// ── Sidebar ───────────────────────────────────────────────────────────────────
-
 .sidebar-nav {
   width: var(--sidebar-width, 240px);
   position: fixed;
@@ -30,8 +26,6 @@
   }
 }
 
-// ── Main content area ─────────────────────────────────────────────────────────
-
 .sidebar-main {
   flex: 1;
   min-width: 0;
@@ -40,8 +34,6 @@
   margin-left: var(--sidebar-width, 240px);
 }
 
-// ── Backdrop (mobile overlay) ─────────────────────────────────────────────────
-
 .sidebar-backdrop {
   display: none;
   position: fixed;
@@ -52,8 +44,6 @@
   &.is-visible { display: block; }
 }
 
-// ── Mobile toggle button ──────────────────────────────────────────────────────
-
 .sidebar-toggle {
   display: none;
   background: none;
@@ -67,8 +57,6 @@
   svg { display: block; }
 }
 
-// ── Mobile breakpoint ─────────────────────────────────────────────────────────
-
 @media (max-width: 768px) {
   .sidebar-toggle {
     display: flex;

package/css/stepper.scss

@@ -87,7 +87,6 @@ $connector-thickness: 2px;
   transition: opacity 0.25s ease;
 }
 
-// Connector — animated fill via ::after
 .stepper-connector {
   flex: 1;
   height: $connector-thickness;
@@ -113,7 +112,6 @@ $connector-thickness: 2px;
   }
 }
 
-// Step states
 .stepper-step {
   &.active {
     .stepper-indicator {
@@ -169,7 +167,6 @@ $connector-thickness: 2px;
   }
 }
 
-// Vertical orientation
 .stepper-vertical {
   flex-direction: column;
 
@@ -207,7 +204,6 @@ $connector-thickness: 2px;
   }
 }
 
-// Clickable steps
 .stepper-clickable {
   .stepper-step {
     &.completed,