@dodlhuat/basix 1.2.0 → 1.2.2

package/css/form.scss

@@ -181,25 +181,10 @@ select {
   }
 
   .form-hint {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.3rem;
     font-size: 0.75rem;
     line-height: 1.45;
     color: var(--secondary-text);
     margin-top: 0.125rem;
-
-    &::before {
-      content: '';
-      display: block;
-      width: 4px;
-      height: 4px;
-      border-radius: 50%;
-      background: currentColor;
-      flex-shrink: 0;
-      margin-top: 0.38em;
-      opacity: 0.55;
-    }
   }
 
   &.error {

package/css/gallery.scss

@@ -22,9 +22,31 @@
   overflow: hidden;
   box-shadow: $shadow;
   transition:
-    transform 0.3s ease,
-    box-shadow 0.3s ease;
+    transform 0.3s cubic-bezier(0.2, 0, 0, 1),
+    box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
   position: relative;
+  cursor: pointer;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow:
+      0 8px 24px rgba(0, 0, 0, 0.1),
+      0 2px 8px rgba(0, 0, 0, 0.06);
+
+    img.loaded {
+      transform: scale(1.03);
+    }
+  }
+
+  &:active {
+    transform: translateY(-1px);
+    transition-duration: 0.1s;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+  }
 }
 
 .masonry-item img {
@@ -33,30 +55,67 @@
   display: block;
   object-fit: cover;
   opacity: 0;
-  transition: opacity 0.5s ease-in;
+  transform: scale(1.06);
+  filter: blur(4px);
+  transition:
+    opacity 0.5s ease,
+    transform 0.6s cubic-bezier(0.2, 0, 0, 1),
+    filter 0.5s ease;
 }
 
 .masonry-item img.loaded {
   opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
 }
 
 .masonry-item-info {
-  padding: $spacing;
+  padding: calc($spacing * 0.75) $spacing;
+  border-top: 1px solid var(--divider);
 }
 
 .masonry-item-title {
   margin: 0 0 calc($spacing / 4);
-  font-size: $spacing;
+  font-size: 0.9375rem;
   font-weight: 600;
+  color: var(--primary-text);
+  line-height: 1.3;
 }
 
 .masonry-item-desc {
   margin: 0;
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
   color: var(--secondary-text);
+  line-height: 1.5;
 }
 
 .loader {
   text-align: center;
   padding: calc($spacing * 2.5);
+  color: var(--secondary-text);
+  font-size: 0.8125rem;
+}
+
+// Staggered entrance for items
+@media (prefers-reduced-motion: no-preference) {
+  .masonry-item {
+    animation: masonry-in 0.4s cubic-bezier(0.2, 0, 0, 1) both;
+  }
+
+  @for $i from 1 through 20 {
+    .masonry-column .masonry-item:nth-child(#{$i}) {
+      animation-delay: #{0.04s * $i};
+    }
+  }
+}
+
+@keyframes masonry-in {
+  from {
+    opacity: 0;
+    transform: translateY(16px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }

package/css/grid.scss

@@ -1,40 +1,41 @@
-@use "parameters" as *;
-
-.row {
-  display: flex;
-  flex-direction: row;
-  gap: $spacing;
-  margin-bottom: $spacing;
-
-  &.spacing-top {
-    padding-top: calc($spacing / 2);
-  }
-
-  .column {
-    flex: 1;
-    padding: $spacing;
-
-    @for $i from 2 through 6 {
-      &.grow-#{$i} {
-        flex-grow: $i;
-      }
-    }
-
-    .column {
-      padding: 0;
-    }
-
-    .row {
-      margin-bottom: 0;
-    }
-  }
-}
-
-@media screen and (max-width:768px) {
-  .row {
-    flex-wrap: wrap;
-    .column {
-      flex-basis: 100%;
-    }
-  }
-}
+@use "parameters" as *;
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: $spacing;
+  margin-bottom: $spacing;
+
+  &.spacing-top {
+    padding-top: calc($spacing / 2);
+  }
+
+  .column {
+    flex: 1;
+    min-width: 0;
+    padding: $spacing;
+
+    @for $i from 2 through 6 {
+      &.grow-#{$i} {
+        flex-grow: $i;
+      }
+    }
+
+    .column {
+      padding: 0;
+    }
+
+    .row {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media screen and (max-width:768px) {
+  .row {
+    flex-wrap: wrap;
+    .column {
+      flex-basis: 100%;
+    }
+  }
+}

package/css/group-picker.scss

@@ -0,0 +1,345 @@
+@use "properties";
+@use "parameters" as *;
+
+.group-picker {
+  position: relative;
+  width: 100%;
+  color: var(--primary-text);
+
+  // ─── Selection summary ─────────────────────────────────────────────────────
+
+  &__selection {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc($spacing * 0.35);
+    min-height: $form-height;
+    padding: calc($spacing * 0.35) calc($spacing * 0.6);
+    background: var(--background);
+    border: 1px solid var(--divider);
+    border-radius: calc($border-radius / 2);
+    margin-bottom: calc($spacing * 0.75);
+    box-shadow: $shadow;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    // Chips inside use gap — suppress their own margins
+    .chip {
+      margin: 0;
+      animation: gp-chip-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    }
+
+    // Fix font icon centering inside the absolute close button
+    .chip.closeable button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        font-size: 0.7rem;
+        top: 0;
+      }
+    }
+
+    &:empty::before {
+      content: attr(data-placeholder);
+      color: var(--secondary-text);
+      font-size: 0.875rem;
+    }
+
+    &:focus-within {
+      border-color: var(--accent-color);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+    }
+  }
+
+  // Parent chip — solid accent fill
+  // Specificity 0,3,0 via .chip.group-picker__chip--parent → beats .chips .chip (0,2,0)
+  &__selection .chip.group-picker__chip--parent {
+    background: var(--accent-color);
+    color: var(--background); // same pattern as button.scss button-variant
+
+    button {
+      background: color-mix(in srgb, var(--accent-color) 78%, black);
+      color: var(--background);
+    }
+  }
+
+  // ─── Search ────────────────────────────────────────────────────────────────
+  // Basix <input> handles border, focus ring, shadow — we only position the icon
+
+  &__search {
+    position: relative;
+    margin-bottom: calc($spacing * 0.5);
+
+    input {
+      padding-left: calc($spacing * 2.2);
+    }
+  }
+
+  &__search-icon {
+    position: absolute;
+    left: calc($spacing * 0.55);
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1rem;
+    color: var(--secondary-text);
+    pointer-events: none;
+    opacity: 0.45;
+    z-index: 1;
+  }
+
+  // ─── List container ────────────────────────────────────────────────────────
+
+  &__list {
+    max-height: 420px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    border: 1px solid var(--divider);
+    border-radius: calc($border-radius / 2);
+    background: var(--background);
+    box-shadow: $shadow;
+  }
+
+  // ─── Empty state ───────────────────────────────────────────────────────────
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: calc($spacing * 2.5) $spacing;
+    color: var(--secondary-text);
+    font-size: 0.875rem;
+    text-align: center;
+    gap: calc($spacing * 0.5);
+
+    .icon {
+      font-size: 2rem;
+      opacity: 0.2;
+    }
+  }
+
+  // ─── Group row ─────────────────────────────────────────────────────────────
+
+  &__group {
+    border-bottom: 1px solid var(--divider);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    // Expanded state: tint the header and accent the label
+    &.is-expanded > .group-picker__group-header {
+      background: color-mix(in srgb, var(--accent-color) 4%, transparent);
+
+      .group-picker__group-label {
+        color: var(--accent-color);
+      }
+    }
+  }
+
+  &__group-header {
+    display: flex;
+    align-items: center;
+    gap: calc($spacing * 0.5);
+    padding: calc($spacing * 0.75) calc($spacing * 0.85);
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: background 0.15s ease;
+
+    &:hover {
+      background: var(--hover);
+    }
+
+    &:active {
+      background: var(--secondary-background);
+    }
+  }
+
+  // Chevron — accent color when expanded, eased rotation
+  &__chevron {
+    flex-shrink: 0;
+    font-size: 1rem;
+    color: var(--secondary-text);
+    opacity: 0.5;
+    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
+                color 0.15s ease,
+                opacity 0.15s ease;
+
+    .group-picker__group.is-expanded & {
+      transform: rotate(90deg);
+      color: var(--accent-color);
+      opacity: 1;
+    }
+  }
+
+  &__group-label {
+    flex: 1;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--primary-text);
+    transition: color 0.15s ease;
+
+    mark {
+      background: color-mix(in srgb, var(--warning) 22%, transparent);
+      color: inherit;
+      border-radius: 2px;
+      padding: 0 2px;
+    }
+  }
+
+  // Action button — pill style, overrides Basix <button> base where needed
+  &__group-action {
+    flex-shrink: 0;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+    padding: calc($spacing * 0.15) calc($spacing * 0.6);
+    border-radius: calc($border-radius * 3);
+    border: 1px solid var(--divider);
+    background: transparent;
+    color: var(--secondary-text);
+    line-height: 1.5;
+    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease,
+                transform 0.1s ease;
+
+    &:hover:not(.button-primary):not(:disabled) {
+      border-color: var(--accent-color);
+      color: var(--accent-color);
+      background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+      transform: none;
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.94);
+    }
+
+    // When button-primary is added by JS — keep pill shape
+    &.button-primary {
+      border-radius: calc($border-radius * 3);
+      font-size: 0.6875rem;
+      font-weight: 500;
+      letter-spacing: 0.025em;
+      text-transform: uppercase;
+      padding: calc($spacing * 0.15) calc($spacing * 0.6);
+      border: 1px solid transparent;
+      line-height: 1.5;
+    }
+  }
+
+  // ─── Leaf group ────────────────────────────────────────────────────────────
+
+  &__group.is-leaf {
+    cursor: pointer;
+
+    &.is-selected > .group-picker__group-header {
+      background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+
+      .group-picker__group-label {
+        color: var(--accent-color);
+      }
+    }
+
+    &.is-selected .group-picker__leaf-check {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  // Leaf check icon — springs in on select
+  &__leaf-check {
+    flex-shrink: 0;
+    font-size: 1.1rem;
+    color: var(--accent-color);
+    opacity: 0;
+    transform: scale(0.3);
+    transition: opacity 0.18s ease,
+                transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  // ─── Subgroups accordion ───────────────────────────────────────────────────
+
+  &__subgroups {
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
+                opacity 0.2s ease;
+
+    .group-picker__group.is-expanded & {
+      opacity: 1;
+    }
+  }
+
+  // Subgroup chip list — indented to align with label, not chevron
+  &__subgroup-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc($spacing * 0.3);
+    padding: calc($spacing * 0.3) calc($spacing * 0.85) calc($spacing * 0.75) calc($spacing * 2.35);
+
+    // Chips use gap — suppress their own margins
+    .chip {
+      margin: 0;
+    }
+  }
+
+  // Subgroup chip — selected/disabled states on top of .chip.clickable
+  &__subgroup {
+    transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
+
+    &.is-selected {
+      background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+      color: var(--accent-color);
+      outline: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
+      font-weight: 500;
+    }
+
+    &.is-disabled {
+      opacity: 0.35;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    mark {
+      background: color-mix(in srgb, var(--warning) 22%, transparent);
+      color: inherit;
+      border-radius: 2px;
+      padding: 0 2px;
+    }
+  }
+}
+
+// ─── Chip entrance animation ─────────────────────────────────────────────────
+
+@keyframes gp-chip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.7) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+// ─── Responsive ──────────────────────────────────────────────────────────────
+
+@media (max-width: 768px) {
+  .group-picker {
+    &__list {
+      max-height: 55vh;
+    }
+
+    &__group-header {
+      padding: calc($spacing * 0.9) calc($spacing * 0.85);
+    }
+
+    &__subgroup-list {
+      padding-left: calc($spacing * 2);
+    }
+  }
+}