@dodlhuat/basix 1.2.2 → 1.2.3

package/README.md

@@ -280,6 +280,48 @@ sheet.hide();
 sheet.snapTo('full');
 ```
 
+### Lightbox
+
+The Lightbox component opens images in a fullscreen overlay with an optional gallery mode. Supports keyboard navigation (← →, Escape), touch swipe, click-to-zoom, adjacent image preloading, focus trap, and a static `bind()` method for declarative HTML wiring.
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `src` | string | — | Image URL for single-image mode |
+| `alt` | string | — | Alt text for the image |
+| `caption` | string | — | Optional caption below the image |
+| `images` | LightboxImage[] | — | Array of `{ src, alt?, caption? }` for gallery mode |
+| `startIndex` | number | `0` | Starting index when opening a gallery |
+| `closeable` | boolean | `true` | Shows × button and enables backdrop/Escape dismissal |
+| `onOpen` | function | — | Callback fired when the lightbox opens |
+| `onClose` | function | — | Callback fired after the close animation completes |
+
+``` js
+import { Lightbox } from '@dodlhuat/basix/js/lightbox.js';
+
+// Single image
+new Lightbox({ src: 'photo.jpg', alt: 'A landscape', caption: 'Taken at sunrise' }).show();
+
+// Gallery
+new Lightbox({
+    images: [
+        { src: 'photo1.jpg', alt: 'Photo 1', caption: 'Day one' },
+        { src: 'photo2.jpg', alt: 'Photo 2' },
+    ],
+    startIndex: 0,
+    onClose: () => console.log('closed'),
+}).show();
+
+// Declarative binding — groups elements by data-lightbox value into galleries
+Lightbox.bind();
+```
+
+``` html
+<!-- Declarative usage -->
+<a href="full.jpg" data-lightbox="trip" data-lightbox-caption="Arrival day">
+    <img src="thumb.jpg" alt="Arrival" />
+</a>
+```
+
 ### Tooltip
 
 The Tooltip component shows contextual information on hover.

package/css/lightbox.scss

@@ -0,0 +1,272 @@
+@use "properties";
+@use "parameters" as *;
+
+.lightbox-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.is-visible {
+    pointer-events: auto;
+
+    .lightbox-background {
+      opacity: 1;
+    }
+
+    .lightbox {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .lightbox-close,
+    .lightbox-prev,
+    .lightbox-next {
+      opacity: 1;
+    }
+  }
+}
+
+.lightbox-background {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  opacity: 0;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: opacity 0.3s ease;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: $spacing;
+  right: $spacing;
+  z-index: 1002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  opacity: 0;
+  transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease;
+  -webkit-tap-highlight-color: transparent;
+
+  .icon {
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.22);
+    color: #fff;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.6);
+    outline-offset: 2px;
+  }
+}
+
+.lightbox {
+  position: relative;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: min(90vw, 1280px);
+  opacity: 0;
+  transform: scale(0.97);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.lightbox-img-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  max-height: calc(90dvh - 3.5rem);
+  cursor: zoom-in;
+  border-radius: calc($border-radius * 2);
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.04);
+
+  &.is-loading {
+    min-width: 6rem;
+    min-height: 6rem;
+
+    .lightbox-img {
+      opacity: 0;
+    }
+
+    .lightbox-spinner {
+      display: flex;
+    }
+  }
+
+  &.is-error {
+    min-width: 14rem;
+    min-height: 8rem;
+    cursor: default;
+
+    .lightbox-img {
+      display: none;
+    }
+
+    .lightbox-spinner {
+      display: none;
+    }
+
+    &::after {
+      content: 'Failed to load image';
+      color: rgba(255, 255, 255, 0.4);
+      font-size: 0.875rem;
+      padding: $spacing * 2;
+    }
+  }
+
+  &.is-zoomed {
+    cursor: zoom-out;
+    overflow: auto;
+    max-height: 90dvh;
+    border-radius: 0;
+  }
+}
+
+.lightbox-spinner {
+  position: absolute;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+
+  // Override spinner colors for the dark overlay
+  .spinner {
+    border-color: rgba(255, 255, 255, 0.15);
+    border-top-color: rgba(255, 255, 255, 0.7);
+  }
+}
+
+.lightbox-img {
+  display: block;
+  max-width: 100%;
+  max-height: calc(90dvh - 3.5rem);
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  border-radius: calc($border-radius * 2);
+  user-select: none;
+  -webkit-user-drag: none;
+
+  &.is-loaded {
+    opacity: 1;
+  }
+
+  &.is-zoomed {
+    max-width: none;
+    max-height: none;
+    border-radius: 0;
+  }
+}
+
+.lightbox-caption {
+  margin: calc($spacing * 0.6) 0 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.875rem;
+  text-align: center;
+  max-width: 60ch;
+  line-height: 1.5;
+}
+
+.lightbox-counter {
+  margin-top: calc($spacing * 0.5);
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  text-align: center;
+  user-select: none;
+}
+
+// Prev/Next buttons — glass pill, matches carousel style
+.lightbox-prev,
+.lightbox-next {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.32);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  opacity: 0;
+  transition: background 0.2s ease,
+              opacity 0.3s ease,
+              transform 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+
+  .icon {
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.55);
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.93);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.6);
+    outline-offset: 2px;
+  }
+}
+
+.lightbox-prev { left: $spacing; }
+.lightbox-next { right: $spacing; }
+
+@media (max-width: 768px) {
+  .lightbox-prev,
+  .lightbox-next {
+    width: 2rem;
+    height: 2rem;
+
+    .icon { font-size: 1.25rem; }
+  }
+
+  .lightbox-prev { left: calc($spacing * 0.5); }
+  .lightbox-next { right: calc($spacing * 0.5); }
+
+  .lightbox {
+    max-width: 100vw;
+  }
+
+  .lightbox-img,
+  .lightbox-img-wrap {
+    max-height: 82dvh;
+    border-radius: $border-radius;
+  }
+
+  .lightbox-close {
+    top: calc($spacing * 0.75);
+    right: calc($spacing * 0.75);
+  }
+}

package/css/style.css

@@ -1844,6 +1844,260 @@ button.button-error:active:not(:disabled) {
     border-radius: 0;
   }
 }
+.lightbox-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.lightbox-wrapper.is-visible {
+  pointer-events: auto;
+}
+.lightbox-wrapper.is-visible .lightbox-background {
+  opacity: 1;
+}
+.lightbox-wrapper.is-visible .lightbox {
+  opacity: 1;
+  transform: scale(1);
+}
+.lightbox-wrapper.is-visible .lightbox-close,
+.lightbox-wrapper.is-visible .lightbox-prev,
+.lightbox-wrapper.is-visible .lightbox-next {
+  opacity: 1;
+}
+
+.lightbox-background {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  opacity: 0;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: opacity 0.3s ease;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  opacity: 0;
+  transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.lightbox-close .icon {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+.lightbox-close:hover {
+  background: rgba(255, 255, 255, 0.22);
+  color: #fff;
+}
+.lightbox-close:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.6);
+  outline-offset: 2px;
+}
+
+.lightbox {
+  position: relative;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: min(90vw, 1280px);
+  opacity: 0;
+  transform: scale(0.97);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.lightbox-img-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  max-height: calc(90dvh - 3.5rem);
+  cursor: zoom-in;
+  border-radius: 0.8rem;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.04);
+}
+.lightbox-img-wrap.is-loading {
+  min-width: 6rem;
+  min-height: 6rem;
+}
+.lightbox-img-wrap.is-loading .lightbox-img {
+  opacity: 0;
+}
+.lightbox-img-wrap.is-loading .lightbox-spinner {
+  display: flex;
+}
+.lightbox-img-wrap.is-error {
+  min-width: 14rem;
+  min-height: 8rem;
+  cursor: default;
+}
+.lightbox-img-wrap.is-error .lightbox-img {
+  display: none;
+}
+.lightbox-img-wrap.is-error .lightbox-spinner {
+  display: none;
+}
+.lightbox-img-wrap.is-error::after {
+  content: "Failed to load image";
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.875rem;
+  padding: 2rem;
+}
+.lightbox-img-wrap.is-zoomed {
+  cursor: zoom-out;
+  overflow: auto;
+  max-height: 90dvh;
+  border-radius: 0;
+}
+
+.lightbox-spinner {
+  position: absolute;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+.lightbox-spinner .spinner {
+  border-color: rgba(255, 255, 255, 0.15);
+  border-top-color: rgba(255, 255, 255, 0.7);
+}
+
+.lightbox-img {
+  display: block;
+  max-width: 100%;
+  max-height: calc(90dvh - 3.5rem);
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  border-radius: 0.8rem;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.lightbox-img.is-loaded {
+  opacity: 1;
+}
+.lightbox-img.is-zoomed {
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+}
+
+.lightbox-caption {
+  margin: 0.6rem 0 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.875rem;
+  text-align: center;
+  max-width: 60ch;
+  line-height: 1.5;
+}
+
+.lightbox-counter {
+  margin-top: 0.5rem;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  text-align: center;
+  user-select: none;
+}
+
+.lightbox-prev,
+.lightbox-next {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.32);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  opacity: 0;
+  transition: background 0.2s ease, opacity 0.3s ease, transform 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.lightbox-prev .icon,
+.lightbox-next .icon {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+.lightbox-prev:hover,
+.lightbox-next:hover {
+  background: rgba(0, 0, 0, 0.55);
+}
+.lightbox-prev:active,
+.lightbox-next:active {
+  transform: translateY(-50%) scale(0.93);
+}
+.lightbox-prev:focus-visible,
+.lightbox-next:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.6);
+  outline-offset: 2px;
+}
+
+.lightbox-prev {
+  left: 1rem;
+}
+
+.lightbox-next {
+  right: 1rem;
+}
+
+@media (max-width: 768px) {
+  .lightbox-prev,
+  .lightbox-next {
+    width: 2rem;
+    height: 2rem;
+  }
+  .lightbox-prev .icon,
+  .lightbox-next .icon {
+    font-size: 1.25rem;
+  }
+  .lightbox-prev {
+    left: 0.5rem;
+  }
+  .lightbox-next {
+    right: 0.5rem;
+  }
+  .lightbox {
+    max-width: 100vw;
+  }
+  .lightbox-img,
+  .lightbox-img-wrap {
+    max-height: 82dvh;
+    border-radius: 0.4rem;
+  }
+  .lightbox-close {
+    top: 0.75rem;
+    right: 0.75rem;
+  }
+}
 .popover {
   position: fixed;
   z-index: 900;
@@ -8102,14 +8356,18 @@ body {
   left: 0;
   top: 0;
   height: 100vh;
-  overflow-y: auto;
   background: var(--primary-bg);
   border-right: 1px solid var(--divider);
   display: flex;
   flex-direction: column;
   z-index: 100;
-  scrollbar-width: thin;
-  scrollbar-color: var(--divider) transparent;
+}
+.sidebar-nav .sidebar-scroll {
+  flex: 1;
+  min-height: 0;
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
 }
 
 .sidebar-main {
@@ -8675,3 +8933,5 @@ body {
   display: flex;
   gap: 1.25rem;
 }
+
+/*# sourceMappingURL=style.css.map */