@alacris/ui 0.5.1 → 0.6.0

package/README.md

@@ -47,9 +47,9 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
 {
   "imports": {
     "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.5/dist/alacris.js",
-    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.1/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.1/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.1/src/components/"
+    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.0/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.0/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.0/src/components/"
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Themeable design system for Alacris — Material defaults, sixty-nine custom elements, ESM-only, no build step.",
   "type": "module",
   "exports": {

package/src/components/base.js

@@ -21,6 +21,79 @@ export const base = css`
       animation-iteration-count: 1;
     }
   }
+  @media (hover: hover) and (pointer: fine) {
+    :host, *, *::before, *::after {
+      scrollbar-width: thin;
+      scrollbar-color: ${sys.scrollbar.thumb} ${sys.scrollbar.track};
+    }
+    ::-webkit-scrollbar {
+      inline-size: ${sys.scrollbar.size};
+      block-size: ${sys.scrollbar.size};
+    }
+    ::-webkit-scrollbar-track {
+      background: ${sys.scrollbar.track};
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: ${sys.scrollbar.thumb};
+      border-radius: ${sys.scrollbar.radius};
+      border: 2px solid transparent;
+      background-clip: content-box;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: ${sys.scrollbar.thumbHover};
+    }
+    ::-webkit-scrollbar-thumb:active {
+      background-color: ${sys.scrollbar.thumbActive};
+    }
+    ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-button {
+      display: none;
+      inline-size: 0;
+      block-size: 0;
+    }
+  }
+`;
+
+/**
+ * Custom scrollbar rules for a specific selector.
+ * Interpolate into a component's css template.
+ */
+export const scrollbarOn = (selector) => `
+  @media (hover: hover) and (pointer: fine) {
+    ${selector} {
+      scrollbar-width: thin;
+      scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
+    }
+    ${selector}::-webkit-scrollbar {
+      inline-size: var(--ui-scrollbar-size);
+      block-size: var(--ui-scrollbar-size);
+    }
+    ${selector}::-webkit-scrollbar-track {
+      background: var(--ui-scrollbar-track);
+    }
+    ${selector}::-webkit-scrollbar-thumb {
+      background-color: var(--ui-scrollbar-thumb);
+      border-radius: var(--ui-scrollbar-radius);
+      border: 2px solid transparent;
+      background-clip: content-box;
+    }
+    ${selector}::-webkit-scrollbar-thumb:hover {
+      background-color: var(--ui-scrollbar-thumb-hover);
+    }
+    ${selector}::-webkit-scrollbar-thumb:active {
+      background-color: var(--ui-scrollbar-thumb-active);
+    }
+    ${selector}::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+    ${selector}::-webkit-scrollbar-button {
+      display: none;
+      inline-size: 0;
+      block-size: 0;
+    }
+  }
 `;
 
 /**
@@ -44,3 +117,4 @@ export const stateLayerOn = (host, { focus = host } = {}) => `
   ${focus}:focus-visible .layer { opacity: var(--ui-state-focus); }
   ${host}:active .layer { opacity: var(--ui-state-pressed); }
 `;
+

package/src/components/ui-date-picker.js

@@ -274,10 +274,25 @@ const styles = css`
   .overlay {
     position: fixed;
     inset: 0;
+    inline-size: 100vw;
+    block-size: 100vh;
+    max-inline-size: 100vw;
+    max-block-size: 100vh;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: visible;
     z-index: ${sys.z.popup};
     display: grid;
     place-items: center;
   }
+  .overlay:popover-open {
+    display: grid;
+  }
+  .overlay::backdrop {
+    display: none;
+  }
   .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
   .modal-surface {
     position: relative;
@@ -714,8 +729,16 @@ define('ui-date-picker', {
       releaseFill(animate(el, fx.scaleIn, { duration: 'medium2', easing: 'emphasizedDecelerate' }));
     };
 
+    const modalOverlayRef = (el) => {
+      queueMicrotask(() => {
+        try {
+          if (el.isConnected) el.showPopover?.();
+        } catch {}
+      });
+    };
+
     const modalView = () => html`
-      <div class="overlay">
+      <div class="overlay" popover="manual" ref=${modalOverlayRef}>
         <div class="scrim" aria-hidden="true" @click=${closePanel}></div>
         <div class="modal-surface" part="panel" role="dialog" aria-modal="true"
              aria-label=${() => label() || 'Choose date'}

package/src/components/ui-dialog.js

@@ -46,10 +46,25 @@ const styles = css`
   .overlay {
     position: fixed;
     inset: 0;
+    inline-size: 100vw;
+    block-size: 100vh;
+    max-inline-size: 100vw;
+    max-block-size: 100vh;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: visible;
     z-index: ${sys.z.modal};
     display: grid;
     place-items: center;
   }
+  .overlay:popover-open {
+    display: grid;
+  }
+  .overlay::backdrop {
+    display: none;
+  }
   .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
   .surface {
     position: relative;
@@ -146,8 +161,16 @@ define('ui-dialog', {
       releaseFill(animate(el, fx.scaleIn, { duration: 'medium2', easing: 'emphasizedDecelerate' }));
     };
 
+    const overlayRef = (el) => {
+      queueMicrotask(() => {
+        try {
+          if (el.isConnected) el.showPopover?.();
+        } catch {}
+      });
+    };
+
     const view = () => html`
-      <div class="overlay">
+      <div class="overlay" popover="manual" ref=${overlayRef}>
         <div class="scrim" part="scrim" aria-hidden="true" @click=${() => requestClose('scrim')}></div>
         <div class="surface" part="surface" role="dialog" aria-modal="true"
              aria-labelledby=${() => (hasHeadline() ? 'headline' : null)}

package/src/components/ui-drawer.js

@@ -47,7 +47,23 @@ const styles = css`
   .overlay {
     position: fixed;
     inset: 0;
+    inline-size: 100vw;
+    block-size: 100vh;
+    max-inline-size: 100vw;
+    max-block-size: 100vh;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: visible;
     z-index: ${sys.z.drawer};
+    display: block;
+  }
+  .overlay:popover-open {
+    display: block;
+  }
+  .overlay::backdrop {
+    display: none;
   }
   .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
   .surface {
@@ -221,8 +237,16 @@ define('ui-drawer', {
       });
     };
 
+    const overlayRef = (el) => {
+      queueMicrotask(() => {
+        try {
+          if (el.isConnected) el.showPopover?.();
+        } catch {}
+      });
+    };
+
     const overlay = () => html`
-      <div class="overlay">
+      <div class="overlay" popover="manual" ref=${overlayRef}>
         <div class="scrim" part="scrim" aria-hidden="true"
              ref=${(el) => { scrimEl = el; }}
              @click=${() => requestClose('scrim')}></div>

package/src/components/ui-sheet.js

@@ -48,11 +48,26 @@ const styles = css`
   .overlay {
     position: fixed;
     inset: 0;
+    inline-size: 100vw;
+    block-size: 100vh;
+    max-inline-size: 100vw;
+    max-block-size: 100vh;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: visible;
     z-index: ${sys.z.modal};
     display: flex;
     align-items: flex-end;
     justify-content: center;
   }
+  .overlay:popover-open {
+    display: flex;
+  }
+  .overlay::backdrop {
+    display: none;
+  }
   .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
   .surface {
     position: relative;
@@ -241,8 +256,16 @@ define('ui-sheet', {
       });
     };
 
+    const overlayRef = (el) => {
+      queueMicrotask(() => {
+        try {
+          if (el.isConnected) el.showPopover?.();
+        } catch {}
+      });
+    };
+
     const modalView = () => html`
-      <div class="overlay">
+      <div class="overlay" popover="manual" ref=${overlayRef}>
         <div class="scrim" part="scrim" aria-hidden="true"
              ref=${(el) => { scrimEl = el; }}
              @click=${() => requestClose('scrim')}></div>

package/src/components/ui-side-sheet.js

@@ -48,7 +48,23 @@ const styles = css`
   .overlay {
     position: fixed;
     inset: 0;
+    inline-size: 100vw;
+    block-size: 100vh;
+    max-inline-size: 100vw;
+    max-block-size: 100vh;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: visible;
     z-index: ${sys.z.modal};
+    display: block;
+  }
+  .overlay:popover-open {
+    display: block;
+  }
+  .overlay::backdrop {
+    display: none;
   }
   .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
   .surface {
@@ -245,8 +261,16 @@ define('ui-side-sheet', {
       sync();
     };
 
+    const overlayRef = (el) => {
+      queueMicrotask(() => {
+        try {
+          if (el.isConnected) el.showPopover?.();
+        } catch {}
+      });
+    };
+
     const modalView = () => html`
-      <div class="overlay">
+      <div class="overlay" popover="manual" ref=${overlayRef}>
         <div class="scrim" part="scrim" aria-hidden="true"
              ref=${(el) => { scrimEl = el; }}
              @click=${() => requestClose('scrim')}></div>

package/src/index.js

@@ -36,6 +36,7 @@ export {
   processTable, filterRows, sortRows, groupRows, paginate,
   aggregateRow, toCsv, downloadText, inferColumns, visibleColumns,
 } from './util/table.js';
+export { base, scrollbarOn, focusRingOn, stateLayerOn } from './components/base.js';
 
 // Components — importing registers the custom element.
 import './components/ui-icon.js';

package/src/theme/apply-theme.js

@@ -27,12 +27,49 @@ const block = (tokens) => {
 // plain typeface. Components then set a type-role shorthand on top.
 const FACE = 'font-family:var(--ui-font-plain);font-optical-sizing:auto;font-synthesis:none;';
 
+const SCROLLBAR = [
+  '@media (hover: hover) and (pointer: fine) {',
+  '  :root, html, body {',
+  '    scrollbar-width: thin;',
+  '    scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);',
+  '  }',
+  '  ::-webkit-scrollbar {',
+  '    inline-size: var(--ui-scrollbar-size);',
+  '    block-size: var(--ui-scrollbar-size);',
+  '  }',
+  '  ::-webkit-scrollbar-track {',
+  '    background: var(--ui-scrollbar-track);',
+  '  }',
+  '  ::-webkit-scrollbar-thumb {',
+  '    background-color: var(--ui-scrollbar-thumb);',
+  '    border-radius: var(--ui-scrollbar-radius);',
+  '    border: 2px solid transparent;',
+  '    background-clip: content-box;',
+  '  }',
+  '  ::-webkit-scrollbar-thumb:hover {',
+  '    background-color: var(--ui-scrollbar-thumb-hover);',
+  '  }',
+  '  ::-webkit-scrollbar-thumb:active {',
+  '    background-color: var(--ui-scrollbar-thumb-active);',
+  '  }',
+  '  ::-webkit-scrollbar-corner {',
+  '    background: transparent;',
+  '  }',
+  '  ::-webkit-scrollbar-button {',
+  '    display: none;',
+  '    inline-size: 0;',
+  '    block-size: 0;',
+  '  }',
+  '}',
+].join('\n');
+
 export function themeCss(theme) {
   const { common, schemes } = theme;
   return [
     `:root{${FACE}${block(common)}${block(schemes.light)}}`,
     `:root[data-ui-scheme="dark"]{${block(schemes.dark)}}`,
     `@media (prefers-color-scheme: dark){:root:not([data-ui-scheme="light"]){${block(schemes.dark)}}}`,
+    SCROLLBAR,
   ].join('\n');
 }
 

package/src/theme/create-theme.js

@@ -11,7 +11,7 @@ import { makePalettes, makeScheme, COLOR_ROLES } from '../tokens/color.js';
 import { typographyTokens, resolveTypography } from '../tokens/typography.js';
 import {
   shapeTokens, elevationTokens, motionTokens, spacingTokens,
-  stateTokens, focusTokens, zTokens, densityTokens,
+  stateTokens, focusTokens, zTokens, densityTokens, scrollbarTokens,
 } from '../tokens/system.js';
 
 const kebab = (s) => s.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
@@ -47,6 +47,7 @@ export function createTheme(config = {}) {
     ...focusTokens(),
     ...zTokens(),
     ...densityTokens(config),
+    ...scrollbarTokens(),
     ...(config.overrides?.common || {}),
   };
 

package/src/tokens/index.js

@@ -9,6 +9,7 @@ export {
 } from './typography.js';
 export {
   shapeTokens, elevationTokens, motionTokens, spacingTokens, stateTokens,
-  focusTokens, zTokens, densityTokens, RADIUS_KEYS, ELEVATION_LEVELS,
+  focusTokens, zTokens, densityTokens, scrollbarTokens, RADIUS_KEYS, ELEVATION_LEVELS,
   DURATIONS, EASINGS, SPACE_STEPS,
 } from './system.js';
+

package/src/tokens/sys.js

@@ -69,6 +69,14 @@ export const sys = {
     snackbar: v('z-snackbar'),
     tooltip: v('z-tooltip'),
   },
+  scrollbar: {
+    thumb: v('scrollbar-thumb'),
+    thumbHover: v('scrollbar-thumb-hover'),
+    thumbActive: v('scrollbar-thumb-active'),
+    track: v('scrollbar-track'),
+    size: v('scrollbar-size'),
+    radius: v('scrollbar-radius'),
+  },
   density: 'var(--ui-density, 0)',
 };
 

package/src/tokens/system.js

@@ -113,3 +113,17 @@ export function zTokens() {
 export function densityTokens({ density = 0 } = {}) {
   return { density: String(Math.max(-2, Math.min(0, density))) };
 }
+
+// ---------------------------------------------------------------- scrollbar
+
+export function scrollbarTokens() {
+  return {
+    'scrollbar-size': '8px',
+    'scrollbar-radius': 'var(--ui-radius-full)',
+    'scrollbar-track': 'transparent',
+    'scrollbar-thumb': 'var(--ui-color-outline-variant)',
+    'scrollbar-thumb-hover': 'var(--ui-color-outline)',
+    'scrollbar-thumb-active': 'var(--ui-color-on-surface-variant)',
+  };
+}
+

package/types/index.d.ts

@@ -1,6 +1,4 @@
-// Hand-written types for @alacris/ui. They track starter/src/index.js and the
-// theme / motion / token / util entry points — not generated.
-import type { Signal, Computed, Template } from '@alacris/core';
+import type { Signal, Computed, Template, Sheet } from '@alacris/core';
 import './elements.js';
 
 export type Scheme = 'light' | 'dark';
@@ -60,6 +58,7 @@ export const sys: {
   state: Record<string, string>;
   focus: Record<string, string>;
   z: Record<string, string>;
+  scrollbar: Record<string, string>;
   density: string;
 };
 export function typeRule(role: string): string;
@@ -190,3 +189,10 @@ export function showSnackbar(
   message: string,
   opts?: { action?: string; duration?: number; closeButton?: boolean }
 ): { close: () => void; closed: Promise<void> };
+
+export const base: Sheet;
+export function scrollbarOn(selector: string): string;
+export function focusRingOn(selector: string): string;
+export function stateLayerOn(host: string, opts?: { focus?: string }): string;
+export function scrollbarTokens(): Record<string, string>;
+