@dodlhuat/basix 1.1.0 → 1.2.0

package/css/typography.scss

@@ -1,161 +1,194 @@
-@use "properties";
-@use "parameters" as *;
-
-$spacing-half: calc($spacing / 2);
-$spacing-two-thirds: calc($spacing / 1.5);
-$spacing-1-5x: calc($spacing * 1.5);
-
-@font-face {
-  font-family: "Outfit";
-  src: url("../fonts/Outfit-VariableFont_wght.woff2") format("woff2");
-}
-
-body {
-  font-family: "Outfit", helvetica, arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-p, li, td, th, div {
-  font-size: $spacing;
-  line-height: 1.6;
-  color: var(--primary-text);
-}
-
-p {
-  padding-bottom: $spacing-half;
-}
-
-code {
-  font-family: "Courier New", Courier, monospace;
-  font-size: 0.875em;
-  background: var(--secondary-background);
-  padding: 0.15em 0.4em;
-  border-radius: calc($border-radius / 2);
-}
-
-pre code {
-  display: block;
-  padding: $spacing;
-  overflow-x: auto;
-  border-radius: $border-radius;
-  line-height: 1.5;
-}
-
-strong {
-  font-weight: 700;
-}
-
-em {
-  font-style: italic;
-}
-
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5 {
-  margin: $spacing-half 0 $spacing-two-thirds 0;
-  line-height: 1.15;
-  font-weight: 700;
-  color: var(--primary-text);
-  letter-spacing: -0.02em;
-}
-
-h1, .h1 {
-  font-size: 2rem;
-  font-weight: 800;
-  letter-spacing: -0.03em;
-}
-
-h2, .h2 {
-  font-size: 1.625rem;
-  font-weight: 750;
-}
-
-h3, .h3 {
-  font-size: 1.375rem;
-}
-
-h4, .h4 {
-  font-size: 1.125rem;
-  letter-spacing: -0.01em;
-}
-
-small, .text-small {
-  font-size: 0.8125rem;
-  line-height: 1.4;
-}
-
-.text-secondary {
-  color: var(--secondary-text);
-}
-
-.text-caption {
-  font-size: 0.75rem;
-  line-height: 1.4;
-  color: var(--secondary-text);
-  letter-spacing: 0.01em;
-}
-
-.text-overline {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--secondary-text);
-}
-
-ul, ol {
-  list-style-position: inside;
-  margin-bottom: $spacing-two-thirds;
-}
-
-ul li {
-  list-style-type: disc;
-
-  li { list-style-type: circle; }
-}
-
-ol li {
-  list-style-type: decimal;
-
-  li { list-style-type: lower-latin; }
-}
-
-li + li {
-  margin-top: 0.25em;
-}
-
-hr {
-  border: none;
-  height: 1px;
-  background: var(--divider);
-  margin-block: $spacing-1-5x;
-}
-
-a {
-  color: var(--accent-color);
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.2s ease;
-
-  &:hover,
-  &:focus-visible {
-    color: var(--accent-color-lighten);
-  }
-
-  &:active {
-    color: var(--accent-color);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--accent-color);
-    outline-offset: 2px;
-  }
-}
-
-.text-center {
-  text-align: center;
-}
+@use "properties";
+@use "parameters" as *;
+
+$spacing-half: calc($spacing / 2);
+$spacing-two-thirds: calc($spacing / 1.5);
+$spacing-1-5x: calc($spacing * 1.5);
+
+@font-face {
+  font-family: "Outfit";
+  src: url("../fonts/Outfit-VariableFont_wght.woff2") format("woff2");
+  font-display: swap;
+}
+
+body {
+  font-family: "Outfit", helvetica, arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+p, li, td, th, div {
+  font-size: $spacing;
+  line-height: 1.6;
+  color: var(--primary-text);
+}
+
+p {
+  margin-bottom: $spacing-half;
+}
+
+code {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.875em;
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  padding: 0.15em 0.4em;
+  border-radius: calc($border-radius / 2);
+}
+
+pre code {
+  display: block;
+  padding: $spacing;
+  overflow-x: auto;
+  border-radius: $border-radius;
+  line-height: 1.5;
+  border: none;
+}
+
+strong {
+  font-weight: 700;
+}
+
+em {
+  font-style: italic;
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5 {
+  font-weight: 700;
+  color: var(--primary-text);
+  letter-spacing: -0.02em;
+}
+
+h1, .h1 {
+  font-size: 2rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  margin: $spacing-1-5x 0 $spacing-two-thirds 0;
+}
+
+h2, .h2 {
+  font-size: 1.625rem;
+  font-weight: 750;
+  line-height: 1.12;
+  margin: $spacing-1-5x 0 $spacing-two-thirds 0;
+}
+
+h3, .h3 {
+  font-size: 1.375rem;
+  line-height: 1.2;
+  margin: $spacing 0 $spacing-half 0;
+}
+
+h4, .h4 {
+  font-size: 1.125rem;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  margin: $spacing 0 $spacing-half 0;
+}
+
+h5, .h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.3;
+  margin: $spacing-half 0 calc($spacing / 4) 0;
+}
+
+small, .text-small {
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.text-secondary {
+  color: var(--secondary-text);
+}
+
+.text-caption {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--secondary-text);
+  letter-spacing: 0.01em;
+}
+
+.text-overline {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--secondary-text);
+}
+
+blockquote {
+  border-left: 3px solid var(--divider);
+  padding: $spacing-half $spacing;
+  margin-block: $spacing-half;
+  color: var(--secondary-text);
+  font-style: italic;
+}
+
+mark {
+  background-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  color: var(--primary-text);
+  border-radius: calc($border-radius / 4);
+  padding: 0 0.2em;
+}
+
+ul, ol {
+  list-style-position: outside;
+  padding-left: $spacing-1-5x;
+  margin-bottom: $spacing-two-thirds;
+}
+
+ul li {
+  list-style-type: disc;
+
+  li { list-style-type: circle; }
+}
+
+ol li {
+  list-style-type: decimal;
+
+  li { list-style-type: lower-latin; }
+}
+
+li + li {
+  margin-top: 0.25em;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background: var(--divider);
+  margin-block: $spacing-1-5x;
+}
+
+a {
+  color: var(--accent-color);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--accent-color-lighten);
+  }
+
+  &:active {
+    color: var(--accent-color);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+  }
+}
+
+.text-center {
+  text-align: center;
+}

package/js/bottom-sheet.js

@@ -0,0 +1,173 @@
+class BottomSheet {
+    constructor(options) {
+        this.wrapper = null;
+        this.sheet = null;
+        this.handle = null;
+        this.body = null;
+        // Touch drag state
+        this.dragStartY = 0;
+        this.currentDragY = 0;
+        this.isDragging = false;
+        this.content = options.content;
+        this.header = options.header;
+        this.footer = options.footer;
+        this.closeable = options.closeable ?? true;
+        this.snapHeight = options.snapHeight ?? 'auto';
+        this.onClose = options.onClose;
+        this.hide = this.hide.bind(this);
+        this.handleEscape = this.handleEscape.bind(this);
+        this.handleBackdropClick = this.handleBackdropClick.bind(this);
+        this.handleTouchStart = this.handleTouchStart.bind(this);
+        this.handleTouchMove = this.handleTouchMove.bind(this);
+        this.handleTouchEnd = this.handleTouchEnd.bind(this);
+    }
+    show() {
+        this.hide();
+        const wrapper = document.createElement('div');
+        wrapper.className = 'bottom-sheet-wrapper';
+        wrapper.innerHTML = this.buildTemplate();
+        document.body.append(wrapper);
+        this.wrapper = wrapper;
+        this.sheet = wrapper.querySelector('.bottom-sheet');
+        this.handle = wrapper.querySelector('.bottom-sheet-handle');
+        this.body = wrapper.querySelector('.bottom-sheet-body');
+        if (this.closeable) {
+            const backdrop = wrapper.querySelector('.bottom-sheet-backdrop');
+            backdrop?.addEventListener('click', this.handleBackdropClick);
+            document.addEventListener('keydown', this.handleEscape);
+            const closeBtn = wrapper.querySelector('.close');
+            closeBtn?.addEventListener('click', this.hide);
+        }
+        if (this.handle) {
+            this.handle.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+            this.handle.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+            this.handle.addEventListener('touchend', this.handleTouchEnd);
+        }
+        if (this.body) {
+            this.updateScrollMask();
+            this.body.addEventListener('scroll', () => this.updateScrollMask());
+        }
+        document.body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            wrapper.classList.add('is-visible');
+        });
+    }
+    hide() {
+        if (!this.wrapper)
+            return;
+        const backdrop = this.wrapper.querySelector('.bottom-sheet-backdrop');
+        backdrop?.removeEventListener('click', this.handleBackdropClick);
+        document.removeEventListener('keydown', this.handleEscape);
+        if (this.handle) {
+            this.handle.removeEventListener('touchstart', this.handleTouchStart);
+            this.handle.removeEventListener('touchmove', this.handleTouchMove);
+            this.handle.removeEventListener('touchend', this.handleTouchEnd);
+        }
+        document.body.style.overflow = '';
+        this.wrapper.classList.remove('is-visible');
+        const wrapper = this.wrapper;
+        this.wrapper = null;
+        this.sheet = null;
+        this.handle = null;
+        this.body = null;
+        setTimeout(() => {
+            wrapper.remove();
+            this.onClose?.();
+        }, 420);
+    }
+    snapTo(height) {
+        if (!this.sheet)
+            return;
+        this.sheet.classList.remove(`snap-${this.snapHeight}`);
+        this.snapHeight = height;
+        if (height !== 'auto') {
+            this.sheet.classList.add(`snap-${height}`);
+        }
+    }
+    handleEscape(e) {
+        if (e.key === 'Escape')
+            this.hide();
+    }
+    handleBackdropClick(e) {
+        if (e.target?.classList.contains('bottom-sheet-backdrop')) {
+            this.hide();
+        }
+    }
+    handleTouchStart(e) {
+        this.dragStartY = e.touches[0].clientY;
+        this.currentDragY = 0;
+        this.isDragging = true;
+        if (this.sheet) {
+            this.sheet.style.transition = 'none';
+        }
+    }
+    handleTouchMove(e) {
+        if (!this.isDragging || !this.sheet)
+            return;
+        const deltaY = e.touches[0].clientY - this.dragStartY;
+        // Rubber-band resistance going upward
+        if (deltaY < 0) {
+            const resistance = Math.log(1 + Math.abs(deltaY)) * 4;
+            this.currentDragY = -resistance;
+        }
+        else {
+            this.currentDragY = deltaY;
+        }
+        const isDesktop = window.innerWidth >= 768;
+        const translateX = isDesktop ? '-50%' : '0';
+        this.sheet.style.transform = `translateX(${translateX}) translateY(${this.currentDragY}px)`;
+        e.preventDefault();
+    }
+    handleTouchEnd() {
+        if (!this.isDragging || !this.sheet)
+            return;
+        this.isDragging = false;
+        const threshold = this.sheet.offsetHeight * 0.3;
+        if (this.currentDragY > threshold) {
+            this.hide();
+        }
+        else {
+            // Spring back
+            this.sheet.style.transition = '';
+            this.sheet.style.transform = '';
+        }
+    }
+    updateScrollMask() {
+        if (!this.body)
+            return;
+        const canScroll = this.body.scrollHeight > this.body.clientHeight;
+        const atBottom = this.body.scrollTop + this.body.clientHeight >= this.body.scrollHeight - 4;
+        this.body.classList.toggle('is-scrollable', canScroll && !atBottom);
+    }
+    buildTemplate() {
+        const snapClass = this.snapHeight !== 'auto' ? ` snap-${this.snapHeight}` : '';
+        const closeButton = this.closeable
+            ? `<div class="icon icon-close close"></div>`
+            : '';
+        const headerHtml = this.header !== undefined
+            ? `<div class="bottom-sheet-header has-divider">
+                <span class="title">${this.header}</span>
+                ${closeButton}
+               </div>`
+            : '';
+        const footerHtml = this.footer !== undefined
+            ? `<div class="bottom-sheet-footer">${this.footer}</div>`
+            : '';
+        return `
+            <div class="bottom-sheet${snapClass}">
+                <div class="bottom-sheet-handle" role="button" aria-label="Drag to dismiss"></div>
+                ${headerHtml}
+                <div class="bottom-sheet-body">${this.content}</div>
+                ${footerHtml}
+            </div>
+            <div class="bottom-sheet-backdrop"></div>
+        `;
+    }
+    isVisible() {
+        return this.wrapper !== null && document.body.contains(this.wrapper);
+    }
+    destroy() {
+        this.hide();
+    }
+}
+export { BottomSheet };