@noxlovette/material 0.8.3 → 0.9.1

package/dist/components/toolbar/theme.js

@@ -33,7 +33,10 @@ export const toolbar = tv({
         },
         variant: {
             floating: { root: 'inline-flex', segment: 'rounded-full shadow-elevation-1' },
-            docked: { root: 'fixed left-spacing-0 z-layer-bar w-full', segment: 'w-full rounded-none' }
+            docked: {
+                root: 'md-vt-persist fixed left-spacing-0 z-layer-bar w-full',
+                segment: 'w-full rounded-none'
+            }
         },
         color: {
             standard: { segment: 'bg-md-sys-color-surface-container' },

package/dist/styles/motion.css

@@ -371,3 +371,29 @@
   background-color: var(--md-container-transform-color, transparent);
   box-shadow: var(--md-container-transform-shadow, none);
 }
+
+/*
+  App chrome stays put through navigation transitions (#50). Motion's `animateView` puts the
+  `target` region (or the root) in its own layer, and the whole `::view-transition` tree paints
+  over the live page, so a fixed bar outside `main` was covered by `main`'s snapshots and a fixed
+  toolbar or FAB inside it faded and scaled with the page. `md-vt-persist` lifts an element
+  into its own layer that is drawn above the page's and never animates: the old snapshot is
+  hidden and the new one is the live element.
+
+  Scoped to the navigation helpers (sharedAxis, lateral, fadeThrough), which set
+  `md-navigation-transition` on the root while they run, so a container transform (the search
+  view) still grows over the Navbar instead of under it. Built into Navbar, viewport-anchored
+  Rail, AppBar and docked Toolbar; add the class to an app-positioned floating Toolbar or FAB.
+  Browsers without `match-element` fall back to the old behaviour.
+*/
+:root.md-navigation-transition .md-vt-persist {
+  view-transition-name: match-element;
+  view-transition-class: md-persist;
+}
+::view-transition-group(*.md-persist),
+::view-transition-new(*.md-persist) {
+  animation: none !important;
+}
+::view-transition-old(*.md-persist) {
+  display: none;
+}

package/dist/utils/Layer.svelte

@@ -194,7 +194,9 @@
       :global(input:disabled + .layer-container) > .tint,
       :global(:disabled) > .tint
     ) {
-      @media (hover: hover) {
+      /* pointer: fine too — some touch phones report hover: hover, and a
+         tapped element keeps :hover until the next tap elsewhere (#48). */
+      @media (hover: hover) and (pointer: fine) {
         &:is(:global(:hover) > .tint, :global(:active) > .tint) {
           opacity: 0.08;
         }

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './icon/index.js';
+export * from './shortcut.js';
 export * from './theme.svelte.js';
 export * from './types.js';
 export * from './ui.js';

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 export * from './icon/index.js';
+export * from './shortcut.js';
 export * from './theme.svelte.js';
 export * from './types.js';
 export * from './ui.js';

package/dist/utils/shortcut.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A keyboard shortcut, written as `aria-keyshortcuts` writes one: modifiers, then the key, joined
+ * by `+`. `'/'`, `'Mod+K'`, `'Alt+Shift+P'`. `Mod` is ⌘ on Apple platforms and Ctrl elsewhere,
+ * the key each platform's apps use for their own shortcuts.
+ */
+export type Shortcut = string;
+/** Whether this is an Apple platform, where `Mod` is ⌘. False during SSR. */
+export declare function isApplePlatform(): boolean;
+/**
+ * Whether a keydown is this shortcut. Modifiers must match exactly. Digits match by physical key,
+ * since Alt+1 types `¡` on a Mac; letters match by the character typed, falling back to the
+ * physical key on non-Latin layouts, so ⌘K still works with a Cyrillic layout on.
+ */
+export declare function matchesShortcut(e: KeyboardEvent, shortcut: Shortcut, apple?: boolean): boolean;
+/** Whether a keydown's target takes text, where a bare `/` is typing, not a shortcut. */
+export declare function isEditableTarget(target: EventTarget | null): boolean;
+/**
+ * Whether a page-wide shortcut should fire for this keydown: it matches, nothing handled the key
+ * first, no IME is composing, a shortcut without ⌘/Ctrl/Alt isn't being typed into a field, and
+ * no modal dialog other than the one holding `owner` is open.
+ */
+export declare function triggersShortcut(e: KeyboardEvent, shortcut: Shortcut | null | undefined, owner?: Element | null): boolean;
+/** The shortcut for `aria-keyshortcuts`, with `Mod` resolved for this platform. */
+export declare function ariaKeyShortcut(shortcut: Shortcut, apple?: boolean): string;
+/** The shortcut as people read it on this platform: `⌘K` on a Mac, `Ctrl+K` elsewhere. */
+export declare function shortcutLabel(shortcut: Shortcut, apple?: boolean): string;

package/dist/utils/shortcut.js

@@ -0,0 +1,84 @@
+/** Whether this is an Apple platform, where `Mod` is ⌘. False during SSR. */
+export function isApplePlatform() {
+    if (typeof navigator === 'undefined')
+        return false;
+    const platform = navigator.userAgentData?.platform ??
+        navigator.platform;
+    return /mac|iphone|ipad|ipod/i.test(platform ?? '');
+}
+function parse(shortcut, apple) {
+    const parts = shortcut.split('+');
+    const key = parts.pop() ?? '';
+    const modifiers = new Set(parts.map((m) => (m === 'Mod' ? (apple ? 'Meta' : 'Control') : m)));
+    return { key, modifiers };
+}
+/**
+ * Whether a keydown is this shortcut. Modifiers must match exactly. Digits match by physical key,
+ * since Alt+1 types `¡` on a Mac; letters match by the character typed, falling back to the
+ * physical key on non-Latin layouts, so ⌘K still works with a Cyrillic layout on.
+ */
+export function matchesShortcut(e, shortcut, apple = isApplePlatform()) {
+    const { key, modifiers } = parse(shortcut, apple);
+    if (e.metaKey !== modifiers.has('Meta') ||
+        e.ctrlKey !== modifiers.has('Control') ||
+        e.altKey !== modifiers.has('Alt'))
+        return false;
+    const alphanumeric = /^[a-z0-9]$/i.test(key);
+    // Shift is part of typing a symbol like `?`, so it's only checked for letters and digits.
+    if (modifiers.has('Shift') ? !e.shiftKey : alphanumeric && e.shiftKey)
+        return false;
+    if (/^[0-9]$/.test(key))
+        return e.code === `Digit${key}` || e.code === `Numpad${key}`;
+    if (/^[a-z]$/i.test(key)) {
+        return /^[a-z]$/i.test(e.key)
+            ? e.key.toLowerCase() === key.toLowerCase()
+            : e.code === `Key${key.toUpperCase()}`;
+    }
+    return e.key === key;
+}
+/** Whether a keydown's target takes text, where a bare `/` is typing, not a shortcut. */
+export function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable || target instanceof HTMLTextAreaElement)
+        return true;
+    if (target instanceof HTMLSelectElement)
+        return true;
+    return (target instanceof HTMLInputElement &&
+        !/^(button|checkbox|color|file|hidden|image|radio|range|reset|submit)$/.test(target.type));
+}
+/**
+ * Whether a page-wide shortcut should fire for this keydown: it matches, nothing handled the key
+ * first, no IME is composing, a shortcut without ⌘/Ctrl/Alt isn't being typed into a field, and
+ * no modal dialog other than the one holding `owner` is open.
+ */
+export function triggersShortcut(e, shortcut, owner) {
+    if (!shortcut || e.defaultPrevented || e.isComposing || e.repeat)
+        return false;
+    if (!matchesShortcut(e, shortcut))
+        return false;
+    if (!/(^|\+)(Mod|Meta|Control|Alt)\+/.test(shortcut) && isEditableTarget(e.target))
+        return false;
+    const modal = document.querySelector('[aria-modal="true"]');
+    return !modal || (!!owner && modal.contains(owner));
+}
+/** The shortcut for `aria-keyshortcuts`, with `Mod` resolved for this platform. */
+export function ariaKeyShortcut(shortcut, apple = isApplePlatform()) {
+    const { key, modifiers } = parse(shortcut, apple);
+    return [...modifiers, key.length === 1 ? key.toUpperCase() : key].join('+');
+}
+const SYMBOLS = { Meta: '⌘', Control: '⌃', Alt: '⌥', Shift: '⇧' };
+const NAMES = {
+    Meta: 'Win',
+    Control: 'Ctrl',
+    Alt: 'Alt',
+    Shift: 'Shift'
+};
+/** The shortcut as people read it on this platform: `⌘K` on a Mac, `Ctrl+K` elsewhere. */
+export function shortcutLabel(shortcut, apple = isApplePlatform()) {
+    const { key, modifiers } = parse(shortcut, apple);
+    const k = key.length === 1 ? key.toUpperCase() : key;
+    return apple
+        ? [...modifiers].map((m) => SYMBOLS[m]).join('') + k
+        : [...[...modifiers].map((m) => NAMES[m]), k].join('+');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.8.3",
+  "version": "0.9.1",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [