@dodlhuat/basix 1.3.2 → 1.3.3

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.3.2
+# Basix 1.3.3
 
 Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to
 include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.
@@ -616,18 +616,24 @@ new ContextMenu('.my-element', [
     { label: 'Rename', icon: 'edit',        shortcut: 'F2', action: (target) => {} },
     'separator',
     {
-        label: 'Share', icon: 'send',
+        label: 'Share', icon: 'share',
         submenu: [
-            { label: 'Copy link',    icon: 'attachment', action: (target) => {} },
-            { label: 'Send by mail', icon: 'mail',       action: (target) => {} },
+            { label: 'Copy link',    icon: 'link', action: (target) => {} },
+            { label: 'Send by mail', icon: 'mail', action: (target) => {} },
         ]
     },
     'separator',
     { label: 'Delete', icon: 'delete', destructive: true, action: (target) => {} },
-]);
+], { spritePath: 'svg-icons/icons.svg' });
 ```
 
-The constructor accepts a CSS selector string, a single `HTMLElement`, or an array of `HTMLElement`s as the first argument.
+The constructor accepts a CSS selector string, a single `HTMLElement`, or an array of `HTMLElement`s as the first argument. The optional third argument is an options object.
+
+#### Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `spritePath` | string | — | Path to the SVG sprite file (e.g. `'svg-icons/icons.svg'`). Icons are only rendered when this is set. |
 
 #### Item types
 
@@ -642,7 +648,7 @@ The constructor accepts a CSS selector string, a single `HTMLElement`, or an arr
 | Property | Type | Description |
 |---|---|---|
 | `label` | string | Display text |
-| `icon` | string | SVG sprite icon id (e.g. `'delete'`) |
+| `icon` | string | SVG sprite icon ID (e.g. `'delete'`). Requires `spritePath` option. |
 | `shortcut` | string | Keyboard shortcut hint shown on the right (e.g. `'⌘O'`) |
 | `disabled` | boolean | Renders item at reduced opacity, non-interactive |
 | `destructive` | boolean | Renders item in error/red color |

package/css/accordion.scss

@@ -14,12 +14,10 @@
   &:last-child { border-bottom: none; }
 }
 
-// Hidden checkbox toggle
 .accordion-toggle {
   display: none;
 }
 
-// Clickable header / trigger
 .accordion-header {
   display: flex;
   justify-content: space-between;
@@ -49,7 +47,6 @@
   }
 }
 
-// Active state
 .accordion-toggle:checked + .accordion-header {
   color: var(--accent-color);
 
@@ -59,7 +56,6 @@
   }
 }
 
-// Grid wrapper — animates height via grid-template-rows
 .accordion-content {
   display: grid;
   grid-template-rows: 0fr;
@@ -71,7 +67,6 @@
   grid-template-rows: 1fr;
 }
 
-// Inner body — min-height:0 is required for grid 0fr to collapse
 .accordion-body {
   min-height: 0;
   padding: 0;

package/css/badge.scss

@@ -11,7 +11,7 @@
   align-items: center;
   gap: calc($spacing * 0.3);
   padding: calc($spacing * 0.15) calc($spacing * 0.5);
-  border-radius: calc($border-radius * 4);
+  border-radius: $radius-xl;
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 1.4;
@@ -20,7 +20,6 @@
   vertical-align: middle;
   border: 1px solid transparent;
 
-  // Default — neutral
   background: var(--secondary-background);
   color: var(--secondary-text);
 
@@ -56,7 +55,6 @@
     border-color: color-mix(in srgb, var(--error) 20%, transparent);
   }
 
-  // Solid filled
   &-solid {
     &.badge-info    { background: var(--accent-color); color: #fff; border-color: transparent; }
     &.badge-success { background: var(--success);      color: #fff; border-color: transparent; }
@@ -64,7 +62,6 @@
     &.badge-error   { background: var(--error);        color: #fff; border-color: transparent; }
   }
 
-  // Outline only
   &-outline {
     background: transparent;
     border-color: var(--divider);
@@ -76,7 +73,6 @@
     &.badge-error   { border-color: var(--error);        color: var(--error); }
   }
 
-  // Sizes
   &-sm {
     padding: calc($spacing * 0.1) calc($spacing * 0.35);
     font-size: 0.6875rem;
@@ -87,7 +83,6 @@
     font-size: 0.875rem;
   }
 
-  // Dot indicator — no text
   &-dot {
     width: 0.5rem;
     height: 0.5rem;

package/css/bottom-sheet.scss

@@ -39,7 +39,7 @@
   background: var(--background);
   border: 1px solid var(--divider);
   border-bottom: none;
-  border-radius: calc($border-radius * 4) calc($border-radius * 4) 0 0;
+  border-radius: $radius-xl $radius-xl 0 0;
   box-shadow:
     0 -2px 0 rgba(255, 255, 255, 0.06) inset,
     0 -8px 40px rgba(0, 0, 0, 0.18),
@@ -54,7 +54,6 @@
   will-change: transform;
   overscroll-behavior: contain;
 
-  // Snap height variants
   &.snap-half {
     height: 50vh;
   }
@@ -65,7 +64,6 @@
   }
 }
 
-// Drag handle — large tap target wrapping a visual pill
 .bottom-sheet-handle {
   flex-shrink: 0;
   display: flex;
@@ -97,7 +95,6 @@
   }
 }
 
-// Scrollable content area
 .bottom-sheet-body {
   flex: 1;
   overflow-x: hidden;
@@ -106,7 +103,6 @@
   padding: 0 $spacing $spacing;
   padding-bottom: calc($spacing + env(safe-area-inset-bottom));
 
-  // fade out bottom edge when content overflows
   mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent 100%);
   -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent 100%);
 
@@ -116,7 +112,6 @@
   }
 }
 
-// Header and footer are outside .bottom-sheet-body so they stay fixed
 .bottom-sheet-header {
   flex-shrink: 0;
   display: flex;
@@ -177,12 +172,12 @@
     width: 480px;
     bottom: $spacing;
     border: 1px solid var(--divider);
-    border-radius: calc($border-radius * 4);
+    border-radius: $radius-xl;
     transform: translateX(-50%) translateY(calc(100% + #{$spacing}));
     max-height: 80vh;
 
     .bottom-sheet-footer {
-      border-radius: 0 0 calc($border-radius * 4) calc($border-radius * 4);
+      border-radius: 0 0 $radius-xl $radius-xl;
     }
   }
 

package/css/breadcrumb.scss

@@ -1,7 +1,6 @@
 @use "properties";
 @use "parameters" as *;
-
-// ─── Breadcrumb ────────────────────────────────────────────────────────────────
+@use "mixins" as *;
 
 .breadcrumb {
   ol {
@@ -19,9 +18,8 @@
     align-items: center;
     min-width: 0;
 
-    // Chevron separator via Material Symbols font
     + li::before {
-      content: "\e409"; // navigate_next
+      content: "\e409";
       font-family: "Material Symbols Outlined 24pt";
       font-size: 1.125rem;
       line-height: 1;
@@ -40,7 +38,7 @@
       color: var(--secondary-text);
       text-decoration: none;
       padding: 0.25rem 0.375rem;
-      border-radius: calc($border-radius / 2);
+      border-radius: $radius-sm;
       white-space: nowrap;
       transition: color 0.15s ease, background 0.15s ease;
 
@@ -54,13 +52,11 @@
       }
 
       &:focus-visible {
-        outline: 2px solid var(--accent-color);
-        outline-offset: -1px;
-        border-radius: calc($border-radius / 2);
+        @include focus-ring(-1px);
+        border-radius: $radius-sm;
       }
     }
 
-    // Current page item (not a link)
     &[aria-current="page"] > span {
       display: block;
       font-size: 0.8125rem;
@@ -74,14 +70,12 @@
     }
   }
 
-  // Collapse modifier: on small screens, hide everything except last ancestor + current
   &--collapse {
     @media (max-width: 600px) {
       li:not(:nth-last-child(-n+2)) {
         display: none;
       }
 
-      // Replace separator with ellipsis when items are hidden
       li:nth-last-child(2):not(:first-child)::before {
         content: "···";
         font-family: inherit;
@@ -94,8 +88,6 @@
   }
 }
 
-// ─── Page Header ───────────────────────────────────────────────────────────────
-
 .page-header {
   padding-block: calc($spacing * 1.25) $spacing;
 
@@ -121,7 +113,7 @@
     align-items: center;
     gap: calc($spacing * 0.5);
     flex-shrink: 0;
-    padding-top: 0.3rem; // optical alignment with h1 baseline
+    padding-top: 0.3rem;
   }
 
   &__description {
@@ -132,7 +124,6 @@
     color: var(--secondary-text);
   }
 
-  // Bordered variant — adds a bottom divider and bottom margin
   &--bordered {
     border-bottom: 1px solid var(--divider);
     padding-bottom: calc($spacing * 1.25);

package/css/button.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 @mixin button-variant($bg) {
   background: $bg;
@@ -55,7 +56,7 @@ button,
 
   &:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
+    @include focus-glow();
   }
 
   &.active {

package/css/calendar.scss

@@ -40,10 +40,6 @@
   box-sizing: inherit;
 }
 
-// ------------------------------------------------------------------
-// Header
-// ------------------------------------------------------------------
-
 .cal__header {
   display: flex;
   align-items: center;
@@ -144,18 +140,10 @@
   }
 }
 
-// ------------------------------------------------------------------
-// Body wrapper
-// ------------------------------------------------------------------
-
 .cal__body {
   width: 100%;
 }
 
-// ------------------------------------------------------------------
-// Month View
-// ------------------------------------------------------------------
-
 .cal__month-grid {
   border: 1px solid var(--cal-border);
   border-radius: var(--cal-radius);
@@ -180,7 +168,6 @@
   text-transform: uppercase;
 }
 
-// Each week row is a 7-column subgrid with span bars overlaid
 .cal__week-row {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
@@ -189,7 +176,6 @@
   position: relative;
   border-top: 1px solid var(--cal-border);
 
-  // Push event pills below span bars
   .cal__day-events {
     margin-top: calc(var(--span-lanes, 0) * var(--cal-span-lane-height, 20px));
   }
@@ -260,7 +246,6 @@
   overflow: hidden;
 }
 
-// Event pills — use badge color semantics for the left border accent
 .cal__event-pill {
   font-size: 0.6875rem;
   line-height: 1.4;
@@ -292,7 +277,6 @@
     outline-offset: 1px;
   }
 
-  // Badge-class color mapping for left border
   &.badge-success { border-left-color: var(--success); }
   &.badge-warning { border-left-color: var(--warning); }
   &.badge-error   { border-left-color: var(--error); }
@@ -307,10 +291,6 @@
   cursor: pointer;
 }
 
-// ------------------------------------------------------------------
-// Span bars — multi-day events in month and week all-day row
-// ------------------------------------------------------------------
-
 .cal__span-bar {
   position: absolute;
   height: 18px;
@@ -329,7 +309,6 @@
   z-index: 2;
   transition: filter 0.12s ease, transform 0.1s ease;
 
-  // Position via CSS custom props set inline
   left:  calc(var(--span-col)  * 100% / 7);
   width: calc(var(--span-len)  * 100% / 7 - 4px);
 
@@ -340,19 +319,16 @@
     outline-offset: 1px;
   }
 
-  // Rounded end removed when event continues past week boundary
   &--cont-before { border-left: none; border-radius: 0 var(--cal-radius-sm) var(--cal-radius-sm) 0; padding-left: 4px; }
   &--cont-after  { border-radius: var(--cal-radius-sm) 0 0 var(--cal-radius-sm); }
   &--cont-before#{&}--cont-after { border-radius: 0; }
 
-  // Color variants — match badge semantics
   &.badge-success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--cal-bg)); }
   &.badge-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--cal-bg)); }
   &.badge-error   { border-left-color: var(--error);   background: color-mix(in srgb, var(--error)   14%, var(--cal-bg)); }
   &.badge-info    { border-left-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, var(--cal-bg)); }
 }
 
-// Month view: bars sit just below the date number
 .cal__week-row > .cal__span-bar {
   top: calc(36px + var(--span-lane) * var(--cal-span-lane-height, 20px));
 }
@@ -363,10 +339,6 @@
   opacity: 0.7;
 }
 
-// ------------------------------------------------------------------
-// Week View
-// ------------------------------------------------------------------
-
 .cal__week {
   border: 1px solid var(--cal-border);
   border-radius: var(--cal-radius);
@@ -460,14 +432,12 @@
   font-weight: 500;
 }
 
-// Span container for all-day events in week view
 .cal__allday-spans {
   position: relative;
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   min-height: calc(max(var(--allday-lanes, 1), 1) * var(--cal-span-lane-height, 20px) + 6px);
 
-  // Week view span bars: no date-num offset, 2px top padding per lane
   > .cal__span-bar {
     top: calc(var(--span-lane) * var(--cal-span-lane-height, 20px) + 3px);
   }
@@ -596,7 +566,6 @@
     z-index: 3;
   }
 
-  // Badge-class color mapping
   &.badge-success {
     border-left-color: var(--success);
     background: color-mix(in srgb, var(--success) 10%, var(--cal-bg));
@@ -615,7 +584,6 @@
   }
 }
 
-// Now-line
 .cal__now-line {
   position: absolute;
   left: var(--cal-time-col-width);
@@ -639,10 +607,6 @@
   }
 }
 
-// ------------------------------------------------------------------
-// Agenda View
-// ------------------------------------------------------------------
-
 .cal__agenda {
   border: 1px solid var(--cal-border);
   border-radius: var(--cal-radius);
@@ -734,7 +698,6 @@
     outline-offset: 1px;
   }
 
-  // Badge-class color mapping
   &.badge-success { border-left-color: var(--success); }
   &.badge-warning { border-left-color: var(--warning); }
   &.badge-error   { border-left-color: var(--error); }
@@ -766,10 +729,6 @@
   text-align: center;
 }
 
-// ------------------------------------------------------------------
-// Responsive — mobile-first refinements
-// ------------------------------------------------------------------
-
 @media (max-width: 600px) {
   .cal__header {
     gap: var(--cal-spacing-xs);
@@ -795,7 +754,6 @@
     }
   }
 
-  // Month grid — borderless, airy, centered numbers
   .cal__month-grid {
     border: none;
     border-radius: 0;
@@ -859,12 +817,10 @@
     display: none;
   }
 
-  // Reset span-lane-based margin since bars are hidden
   .cal__week-row .cal__day-events {
     margin-top: 0;
   }
 
-  // Week view — compact
   .cal {
     --cal-time-col-width: 40px;
   }
@@ -889,7 +845,6 @@
     padding-right: 3px;
   }
 
-  // Agenda — tighter
   .cal__agenda-day {
     padding: var(--cal-spacing-sm) var(--cal-spacing-md);
     gap: var(--cal-spacing-md);
@@ -911,10 +866,6 @@
   }
 }
 
-// ------------------------------------------------------------------
-// Print styles
-// ------------------------------------------------------------------
-
 @media print {
   .cal__header .cal__view-toggle,
   .cal__header .cal__nav .cal__btn--today {
@@ -933,10 +884,6 @@
   }
 }
 
-// ------------------------------------------------------------------
-// Animation — staggered grid entrance + now-line pulse
-// ------------------------------------------------------------------
-
 @media (prefers-reduced-motion: no-preference) {
   .cal__body {
     animation: cal-slide-in 0.25s cubic-bezier(0.2, 0, 0, 1);
@@ -947,7 +894,6 @@
     animation: cal-cell-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
   }
 
-  // Stagger day cells across week rows
   @for $i from 1 through 7 {
     .cal__week-row:nth-child(#{$i}) .cal__day {
       animation-delay: #{0.03s * ($i - 1) + 0.01s};

package/css/card.scss

@@ -2,7 +2,6 @@
 @use "defaults";
 @use "parameters" as *;
 
-// Base card styles
 .card {
   box-shadow: $shadow;
   background: var(--secondary-background);
@@ -17,14 +16,12 @@
     flex-direction: row;
   }
 
-  // Card header
   .card-header {
     border-bottom: 1px solid var(--divider);
     margin: (-$spacing) (-$spacing) $spacing (-$spacing);
     padding: $spacing;
   }
 
-  // Card footer
   .card-footer {
     border-top: 1px solid var(--divider);
     margin: auto (-$spacing) (-$spacing) (-$spacing);
@@ -32,7 +29,6 @@
   }
 }
 
-// Card variants
 .card-flat {
   box-shadow: none;
   border: 1px solid var(--divider);
@@ -51,7 +47,6 @@
   }
 }
 
-// Utility modifiers for cards
 .card-padding-none {
   padding: 0;
 }

package/css/carousel.scss

@@ -10,7 +10,6 @@
   box-shadow: $shadow;
   background: var(--secondary-background);
 
-  // Gradient scrim so controls are readable over any slide content
   &::after {
     content: '';
     position: absolute;
@@ -49,7 +48,6 @@
   user-select: none;
 }
 
-// Prev / next buttons — glass pill, always visible
 .carousel-button {
   position: absolute;
   top: 50%;
@@ -92,7 +90,6 @@
 .carousel-button--left  { left:  calc($spacing * 0.75); }
 .carousel-button--right { right: calc($spacing * 0.75); }
 
-// Dot navigation
 .carousel-nav {
   display: flex;
   align-items: center;

package/css/chart.scss

@@ -1,9 +1,6 @@
 @use "properties";
 @use "parameters" as *;
 
-// ─── Chart color palette ────────────────────────────────────────────────────
-// Readable via JS: getComputedStyle(el).getPropertyValue('--chart-color-1')
-
 .chart {
   --chart-color-1: var(--accent-color);
   --chart-color-2: var(--success);
@@ -15,8 +12,6 @@
   --chart-color-8: #EC4899;
 }
 
-// ─── Wrapper ────────────────────────────────────────────────────────────────
-
 .chart {
   position: relative;
   width: 100%;
@@ -24,8 +19,6 @@
   color: var(--primary-text);
   font-size: 0.875rem;
 
-  // ─── Header ───────────────────────────────────────────────────────────────
-
   &-header {
     margin-bottom: calc($spacing * 0.75);
   }
@@ -43,8 +36,6 @@
     margin-top: calc($spacing * 0.2);
   }
 
-  // ─── Canvas ───────────────────────────────────────────────────────────────
-
   &-canvas {
     width: 100%;
     position: relative;
@@ -57,8 +48,6 @@
     overflow: visible;
   }
 
-  // ─── Axes & grid ──────────────────────────────────────────────────────────
-
   .chart-axis-line {
     stroke: var(--divider);
     stroke-width: 1;
@@ -77,8 +66,6 @@
     font-family: inherit;
   }
 
-  // ─── Line & area ──────────────────────────────────────────────────────────
-
   .chart-line {
     fill: none;
     stroke-linecap: round;
@@ -92,7 +79,6 @@
     animation: chart-fade-in 0.8s ease forwards;
   }
 
-  // Dots visible by default (small), expand on hover via group
   .chart-point-dot {
     transition: r 0.15s ease;
   }
@@ -114,8 +100,6 @@
     }
   }
 
-  // ─── Column & bar ─────────────────────────────────────────────────────────
-
   .chart-bar {
     transition: opacity 0.15s ease, filter 0.15s ease;
     cursor: pointer;
@@ -139,8 +123,6 @@
     }
   }
 
-  // ─── Pie ──────────────────────────────────────────────────────────────────
-
   .chart-slice {
     cursor: pointer;
     transform-box: fill-box;
@@ -155,8 +137,6 @@
     }
   }
 
-  // ─── Legend ───────────────────────────────────────────────────────────────
-
   &-legend {
     display: flex;
     flex-wrap: wrap;
@@ -180,7 +160,6 @@
     flex-shrink: 0;
   }
 
-  // Pie legend variant — bigger swatches, stacked nicely
   &-pie-legend {
     display: flex;
     flex-wrap: wrap;
@@ -210,8 +189,6 @@
     margin-left: calc($spacing * 0.15);
   }
 
-  // ─── Tooltip ──────────────────────────────────────────────────────────────
-
   &-tooltip {
     position: fixed;
     background: var(--primary-dark);
@@ -242,8 +219,6 @@
   }
 }
 
-// ─── Animations ─────────────────────────────────────────────────────────────
-
 @keyframes chart-draw {
   from { stroke-dashoffset: var(--path-length, 9999); }
   to   { stroke-dashoffset: 0; }