@dodlhuat/basix 1.2.0 → 1.2.1

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.2.0
+# Basix 1.2.1
 
 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.
@@ -539,6 +539,61 @@ The FileUploader component provides drag-and-drop file upload functionality with
 
 Virtual Dropdown is a performant, virtualized dropdown component that efficiently renders large option lists by only drawing visible items in the DOM. Supports single and multi-select modes, built-in search/filtering, keyboard navigation, and configurable item height and render limits — making it ideal for scenarios with hundreds or thousands of selectable options.
 
+### Group Picker
+
+The GroupPicker component enables hierarchical group and subgroup selection. Users can either select an entire parent group (covering all subgroups) or pick individual subgroups. Groups without children are directly selectable. Selecting all subgroups automatically promotes to a parent selection. Includes debounced search with match highlighting, expand/collapse, and a chip-based selection summary.
+
+``` html
+<div id="group-picker-demo"></div>
+```
+
+``` js
+const data: GroupData[] = [
+  {
+    id: 'gruppenspiele', label: 'Gruppenspiele',
+    subgroups: [
+      { id: 'grossgruppe', label: 'Grossgruppenspiele' },
+      { id: 'trinkspiele', label: 'Trinkspiele' },
+    ]
+  },
+  { id: 'schach', label: 'Schach' }, // no subgroups — directly selectable
+];
+
+const picker = new GroupPicker('#group-picker-demo', data, {
+  onSelectionChange: (selection) => console.log(selection),
+});
+```
+
+#### GroupData
+
+| Property | Type | Description |
+|---|---|---|
+| `id` | string | Unique identifier for the group |
+| `label` | string | Display name |
+| `subgroups` | SubgroupData[] | Optional array of `{ id, label }` child items |
+
+#### GroupPickerOptions
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `onSelectionChange` | function | — | Callback fired on selection change with `GroupPickerSelection` |
+| `searchPlaceholder` | string | `'Gruppen durchsuchen...'` | Placeholder text for the search input |
+| `selectAllLabel` | string | `'Alle'` | Label for the select-all button |
+| `deselectLabel` | string | `'Abwahlen'` | Label shown when a parent group is selected |
+| `emptyLabel` | string | `'Keine Ergebnisse'` | Shown when search yields no results |
+| `selectionPlaceholder` | string | `'Noch keine Auswahl getroffen'` | Placeholder in the selection summary area |
+
+#### Public API
+
+| Method | Description |
+|---|---|
+| `getSelection()` | Returns `{ parentGroups: string[], subgroups: { groupId, subgroupId }[] }` |
+| `setSelection(selection)` | Programmatically set the selection state |
+| `clearSelection()` | Clear all selections |
+| `expandAll()` | Expand all groups |
+| `collapseAll()` | Collapse all groups |
+| `destroy()` | Remove event listeners and clear the DOM |
+
 ### Custom Scrollbar
 
 The Scrollbar component creates custom-styled scrollbars. Supports pointer/touch dragging, track clicking, and automatic thumb sizing. Can be used with any class.

package/css/accordion.scss

@@ -1,87 +1,86 @@
-@use "properties";
-@use "parameters" as *;
-
-.accordion {
-  margin: 0 auto;
-  border: 1px solid var(--divider);
-  border-radius: $border-radius;
-  overflow: hidden;
-}
-
-.accordion-item {
-  border-bottom: 1px solid var(--divider);
-}
-
-.accordion-item:last-child {
-  border-bottom: none;
-}
-
-.accordion-input {
-  display: none;
-}
-
-.accordion-label {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: calc($spacing * 0.85) calc($spacing * 1.25);
-  background: transparent;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 160ms ease,
-              color 160ms ease;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-
-  &:hover {
-    background: var(--hover);
-  }
-
-  &:active {
-    background: var(--hover);
-  }
-}
-
-.accordion-label::after {
-  content: '';
-  width: 8px;
-  height: 8px;
-  border-right: 1.5px solid var(--secondary-text);
-  border-bottom: 1.5px solid var(--secondary-text);
-  transform: rotate(45deg);
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
-              border-color 160ms ease;
-  margin-left: $spacing;
-  flex-shrink: 0;
-}
-
-.accordion-input:checked + .accordion-label {
-  color: var(--accent-color);
-
-  &::after {
-    transform: rotate(-135deg);
-    border-color: var(--accent-color);
-  }
-}
-
-.accordion-content {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-}
-
-.accordion-body {
-  min-height: 0;
-}
-
-.accordion-body > div {
-  padding: 0 calc($spacing * 1.25) calc($spacing * 1.25);
-  color: var(--secondary-text);
-  font-size: 0.9rem;
-  line-height: 1.6;
-}
-
-.accordion-input:checked ~ .accordion-content {
-  grid-template-rows: 1fr;
-}
+@use "properties";
+@use "parameters" as *;
+
+.accordion {
+  margin: 0 auto;
+  border: 1px solid var(--divider);
+  border-radius: $border-radius;
+  overflow: hidden;
+}
+
+.accordion-item {
+  border-bottom: 1px solid var(--divider);
+
+  &:last-child { border-bottom: none; }
+}
+
+// Hidden checkbox toggle
+.accordion-toggle {
+  display: none;
+}
+
+// Clickable header / trigger
+.accordion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: calc($spacing * 0.85) calc($spacing * 1.25);
+  background: transparent;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 160ms ease, color 160ms ease;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &:hover  { background: var(--hover); }
+  &:active { background: var(--hover); }
+
+  &::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-right: 1.5px solid var(--secondary-text);
+    border-bottom: 1.5px solid var(--secondary-text);
+    transform: rotate(45deg);
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-color 160ms ease;
+    margin-left: $spacing;
+    flex-shrink: 0;
+  }
+}
+
+// Active state
+.accordion-toggle:checked + .accordion-header {
+  color: var(--accent-color);
+
+  &::after {
+    transform: rotate(-135deg);
+    border-color: var(--accent-color);
+  }
+}
+
+// Grid wrapper — animates height via grid-template-rows
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.accordion-toggle:checked ~ .accordion-content {
+  grid-template-rows: 1fr;
+}
+
+// Inner body — min-height:0 is required for grid 0fr to collapse
+.accordion-body {
+  min-height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  > * {
+    padding: 0 calc($spacing * 1.25) calc($spacing * 1.25);
+    color: var(--secondary-text);
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+}

package/css/alert.scss

@@ -1,138 +1,138 @@
-@use "properties";
-@use "parameters" as *;
-
-$alert-border-width: 4px;
-
-@mixin alert-variant($accent, $bg-tint) {
-  background: $bg-tint;
-  border-left-color: $accent;
-  color: var(--primary-text);
-
-  strong {
-    color: $accent;
-  }
-
-  .alert-icon {
-    fill: $accent;
-  }
-
-  .alert-close:hover {
-    background: color-mix(in srgb, $accent 12%, transparent);
-  }
-}
-
-.alert {
-  position: relative;
-  border-radius: $border-radius;
-  padding: calc($spacing * 0.75) $spacing calc($spacing * 0.75) calc($spacing + $alert-border-width);
-  border-left: $alert-border-width solid transparent;
-  color: var(--primary-text);
-  line-height: 1.6;
-  font-size: 0.9rem;
-
-  & + & {
-    margin-top: calc($spacing / 2);
-  }
-
-  strong {
-    font-weight: 600;
-    letter-spacing: -0.01em;
-  }
-
-  &-default {
-    background: var(--secondary-background);
-    border-left-color: var(--divider);
-    color: var(--primary-text);
-  }
-
-  &-info {
-    @include alert-variant(
-      var(--accent-color),
-      color-mix(in srgb, var(--accent-color) 8%, var(--background))
-    );
-  }
-
-  &-success {
-    @include alert-variant(
-      var(--success),
-      color-mix(in srgb, var(--success) 8%, var(--background))
-    );
-  }
-
-  &-warning {
-    @include alert-variant(
-      var(--warning),
-      color-mix(in srgb, var(--warning) 8%, var(--background))
-    );
-  }
-
-  &-error {
-    @include alert-variant(
-      var(--error),
-      color-mix(in srgb, var(--error) 8%, var(--background))
-    );
-  }
-
-  &-dismissible {
-    padding-right: calc($spacing * 3);
-
-    .alert-close {
-      position: absolute;
-      top: 50%;
-      right: calc($spacing * 0.75);
-      transform: translateY(-50%);
-      background: transparent;
-      border: none;
-      border-radius: $border-radius;
-      cursor: pointer;
-      padding: calc($spacing / 4) calc($spacing / 2);
-      color: inherit;
-      opacity: 0.5;
-      transition: opacity 0.2s ease, background 0.2s ease;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .alert-icon {
-    width: 1.1em;
-    height: 1.1em;
-    margin-right: calc($spacing / 2);
-    vertical-align: -0.15em;
-    fill: currentColor;
-  }
-}
-
-[data-theme="dark"] {
-  .alert {
-    &-info {
-      @include alert-variant(
-        var(--accent-color),
-        color-mix(in srgb, var(--accent-color) 10%, var(--background))
-      );
-    }
-
-    &-success {
-      @include alert-variant(
-        var(--success),
-        color-mix(in srgb, var(--success) 10%, var(--background))
-      );
-    }
-
-    &-warning {
-      @include alert-variant(
-        var(--warning),
-        color-mix(in srgb, var(--warning) 10%, var(--background))
-      );
-    }
-
-    &-error {
-      @include alert-variant(
-        var(--error),
-        color-mix(in srgb, var(--error) 10%, var(--background))
-      );
-    }
-  }
+@use "properties";
+@use "parameters" as *;
+
+$alert-border-width: 4px;
+
+@mixin alert-variant($accent, $bg-tint) {
+  background: $bg-tint;
+  border-left-color: $accent;
+  color: var(--primary-text);
+
+  strong {
+    color: $accent;
+  }
+
+  .alert-icon {
+    fill: $accent;
+  }
+
+  .alert-close:hover {
+    background: color-mix(in srgb, $accent 12%, transparent);
+  }
+}
+
+.alert {
+  position: relative;
+  border-radius: $border-radius;
+  padding: calc($spacing * 0.75) $spacing calc($spacing * 0.75) calc($spacing + $alert-border-width);
+  border-left: $alert-border-width solid transparent;
+  color: var(--primary-text);
+  line-height: 1.6;
+  font-size: 0.9rem;
+
+  & + & {
+    margin-top: calc($spacing / 2);
+  }
+
+  strong {
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  &-default {
+    background: var(--secondary-background);
+    border-left-color: var(--divider);
+    color: var(--primary-text);
+  }
+
+  &-info {
+    @include alert-variant(
+      var(--accent-color),
+      color-mix(in srgb, var(--accent-color) 8%, var(--background))
+    );
+  }
+
+  &-success {
+    @include alert-variant(
+      var(--success),
+      color-mix(in srgb, var(--success) 8%, var(--background))
+    );
+  }
+
+  &-warning {
+    @include alert-variant(
+      var(--warning),
+      color-mix(in srgb, var(--warning) 8%, var(--background))
+    );
+  }
+
+  &-error {
+    @include alert-variant(
+      var(--error),
+      color-mix(in srgb, var(--error) 8%, var(--background))
+    );
+  }
+
+  &-dismissible {
+    padding-right: calc($spacing * 3);
+
+    .alert-close {
+      position: absolute;
+      top: 50%;
+      right: calc($spacing * 0.75);
+      transform: translateY(-50%);
+      background: transparent;
+      border: none;
+      border-radius: $border-radius;
+      cursor: pointer;
+      padding: calc($spacing / 4) calc($spacing / 2);
+      color: inherit;
+      opacity: 0.5;
+      transition: opacity 0.2s ease, background 0.2s ease;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .alert-icon {
+    width: 1.1em;
+    height: 1.1em;
+    margin-right: calc($spacing / 2);
+    vertical-align: -0.15em;
+    fill: currentColor;
+  }
+}
+
+[data-theme="dark"] {
+  .alert {
+    &-info {
+      @include alert-variant(
+        var(--accent-color),
+        color-mix(in srgb, var(--accent-color) 10%, var(--background))
+      );
+    }
+
+    &-success {
+      @include alert-variant(
+        var(--success),
+        color-mix(in srgb, var(--success) 10%, var(--background))
+      );
+    }
+
+    &-warning {
+      @include alert-variant(
+        var(--warning),
+        color-mix(in srgb, var(--warning) 10%, var(--background))
+      );
+    }
+
+    &-error {
+      @include alert-variant(
+        var(--error),
+        color-mix(in srgb, var(--error) 10%, var(--background))
+      );
+    }
+  }
 }

package/css/button.scss

@@ -67,6 +67,41 @@ button,
     opacity: 0.45;
     cursor: not-allowed;
   }
+
+  &.is-loading {
+    pointer-events: none;
+    position: relative;
+    color: transparent !important;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 1.1em;
+      height: 1.1em;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spinner-rotate 0.8s ease-in-out infinite;
+      color: var(--primary-text);
+    }
+
+    > * {
+      visibility: hidden;
+    }
+  }
+}
+
+.button-primary,
+button.button-primary,
+.button-success,
+button.button-success,
+.button-warning,
+button.button-warning,
+.button-error,
+button.button-error {
+  &.is-loading::after {
+    color: var(--background);
+  }
 }
 
 .button-primary,
@@ -148,4 +183,17 @@ button.button-error {
   button.button-error {
     @include button-variant-dark(var(--error));
   }
+
+  .button-primary,
+  button.button-primary,
+  .button-success,
+  button.button-success,
+  .button-warning,
+  button.button-warning,
+  .button-error,
+  button.button-error {
+    &.is-loading::after {
+      color: var(--primary-text);
+    }
+  }
 }