npm - @rcarls/rc-fab - Versions diffs - 0.2.0 → 0.3.0 - Mend

@rcarls/rc-fab 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md +69 -12
package/dist/custom-elements.json +101 -60
package/dist/rc-fab-CKowGgDZ.js +215 -0
package/dist/rc-fab-CKowGgDZ.js.map +1 -0
package/dist/rc-fab-define.js +1 -1
package/dist/rc-fab.js +1 -1
package/dist/types/packages/rc-fab/src/rc-fab.d.ts +71 -29
package/package.json +9 -9
package/dist/demo.css +0 -85
package/dist/demo.js +0 -40
package/dist/rc-fab-Cd1-mEO-.js +0 -120
package/dist/rc-fab-Cd1-mEO-.js.map +0 -1

package/README.md CHANGED Viewed

@@ -1,8 +1,16 @@
 # `@rcarls/rc-fab`
-A floating action button with regular icon-only and extended icon-and-label
-variants. The component uses a native shadow-DOM `<button>` and provides no
-positioning behavior; consumers own where the action floats in their layout.
+Sticky floating action button modeled after the [Material 3 Floating action button](https://m3.material.io/components/floating-action-button/overview), wrapping a consumer-supplied button with scroll-aware visibility.
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-fab](https://richardcarls.github.io/rc-webcomponents/components/rc-fab).
+Use this for "back to top", sticky CTAs, chat launchers, and of course as FABs in your
+Material Design website or PWA.
+Place a native `<button>` as the direct child. The button's own accessible name (text
+content or `aria-label`) becomes the FAB's accessible name.
+Icons go inside the button alongside or instead of visible text.
 ## Installation
@@ -17,21 +25,70 @@ import '@rcarls/rc-fab/define';
 ## Usage
 ```html
-<rc-fab label="New recipe">
-  <span slot="icon" aria-hidden="true">+</span>
+<!-- Back to top (scroll-triggered) -->
+<rc-fab scroll-reveal>
+  <button type="button" aria-label="Back to top"
+          onclick="scrollTo({ top: 0, behavior: 'smooth' })">
+    <span aria-hidden="true">↑</span>
+  </button>
 </rc-fab>
-<rc-fab variant="extended" label="New recipe">
-  <span slot="icon" aria-hidden="true">+</span>
+<!-- Always-visible action -->
+<rc-fab>
+  <button type="button" aria-label="Create">
+    <span class="material-symbols-outlined" aria-hidden="true">add</span>
+  </button>
+</rc-fab>
+<!-- Extended FAB (icon + visible label) -->
+<rc-fab>
+  <button type="button">
+    <span class="material-symbols-outlined" aria-hidden="true">edit</span>
+    Compose
+  </button>
 </rc-fab>
 ```
-`label` is required for an accessible name. It is visually hidden in the
-regular variant and visible in the extended variant.
+## Key attributes and CSS custom properties
+| Attribute / property | Description |
+| --- | --- |
+| `position` | Viewport corner: `bottom-end` (default), `bottom-start`, `top-end`, `top-start` |
+| `scroll-reveal` | Reveal the FAB only after scrolling past `--rc-fab-scroll-threshold` |
+| CSS custom property | Default | Description |
+| --- | --- | --- |
+| `--rc-fab-position` | `fixed` | CSS position value. Use `absolute` for layout-relative placement |
+| `--rc-fab-scroll-threshold` | `300px` | Scroll distance before the FAB appears (requires `scroll-reveal`) |
+| `--rc-fab-scroll-timeline` | `scroll(root block)` | Override scroll target for the CSS animation path (e.g. `scroll(nearest block)`) |
+| `--rc-fab-radius` | `9999px` | Border-radius. Default is pill-shaped. Use `50%` for a circle or `1rem` for Material rounded-square |
+| `--rc-fab-size` | `3.5rem` | Height and minimum width |
+| `--rc-fab-bg` | `ButtonFace` | Button background colour |
+| `--rc-fab-color` | `ButtonText` | Button foreground colour |
+| `--rc-fab-shadow` | `none` | Elevation shadow |
+| `--rc-fab-inset-block` | `1.5rem` | Distance from the block-axis edge |
+| `--rc-fab-inset-inline` | `1.5rem` | Distance from the inline-axis edge |
+## Scroll-reveal behaviour
+`scroll-reveal` uses CSS scroll-driven animations (`animation-timeline: scroll()`).
+In browsers that do not yet support this API, a passive scroll listener provides
+equivalent behaviour.
+The `[scroll-below-threshold]` attribute is toggled on the host and CSS transitions
+handle the show/hide. The FAB is always visible in any remaining edge cases.
+When the button receives `focus-visible` while below the threshold the animation is
+overridden and the FAB is shown fully.
 ## Accessibility
-- The inner control is a native `<button type="button">`.
-- `disabled` maps to the native button's disabled state.
+- The button's `aria-label` or text content is its accessible name.
 - Decorative icon content should use `aria-hidden="true"`.
-- The component does not create a landmark or choose a page position.
+- The component does not choose a semantic landmark role or page position.
+- With `scroll-reveal`, the FAB is removed from the accessibility tree and tab
+  order while hidden, matching the expectation that invisible controls are
+  unreachable.
+- The `50%` point in the reveal animation lifts `visibility: hidden` early so
+  keyboard users can reach the button as it starts fading in.

package/dist/custom-elements.json CHANGED Viewed

@@ -46,13 +46,33 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A Material Design 3 Floating Action Button.\n\nUse `variant=\"regular\"` (default) for an icon-only FAB, or\n`variant=\"extended\"` to show an icon alongside the `label`.\n\nPlace the button icon in the `icon` slot:\n```html\n<rc-fab label=\"New recipe\">\n  <iconify-icon slot=\"icon\" icon=\"mdi-plus\"></iconify-icon>\n</rc-fab>\n```",
+          "description": "Sticky floating action button modeled after the Material 3 Floating action button,\nwrapping a consumer-supplied button with scroll-aware visibility.\n\nAdapted from the Material Design FAB component, use this for \"back to top\",\nsticky CTAs, chat launchers, and of course as FABs in your Material Design PWA.\n\nPlace a native `<button>` as the direct child. The button's own accessible\nname (text content or `aria-label`) becomes the FAB's accessible name.\n\nIcons go inside the button alongside or instead of visible text.",
           "name": "RCFab",
           "cssProperties": [
+            {
+              "description": "CSS position value. Override to `absolute` for layout-relative placement or `sticky` for scroll-snapping.",
+              "name": "--rc-fab-position",
+              "default": "fixed"
+            },
+            {
+              "description": "Distance from the block-axis edge.",
+              "name": "--rc-fab-inset-block",
+              "default": "1.5rem"
+            },
+            {
+              "description": "Distance from the inline-axis edge.",
+              "name": "--rc-fab-inset-inline",
+              "default": "1.5rem"
+            },
+            {
+              "description": "Stacking order.",
+              "name": "--rc-fab-z-index",
+              "default": "10"
+            },
             {
               "description": "Button background colour.",
               "name": "--rc-fab-bg",
-              "default": "Canvas"
+              "default": "ButtonFace"
             },
             {
               "description": "Hover background colour.",
@@ -60,59 +80,62 @@
               "default": "var(--rc-fab-bg)"
             },
             {
-              "description": "Foreground (icon + label) colour.",
+              "description": "Button foreground colour.",
               "name": "--rc-fab-color",
-              "default": "CanvasText"
+              "default": "ButtonText"
             },
             {
-              "description": "Height and minimum width of the button.",
+              "description": "Height and minimum width.",
               "name": "--rc-fab-size",
               "default": "3.5rem"
             },
             {
-              "description": "Border-radius of the button.",
+              "description": "Border-radius. Default is pill-shaped. Override to `50%` for a circle (icon-only), `1rem` for Material rounded-square, etc.",
               "name": "--rc-fab-radius",
-              "default": "1rem"
+              "default": "9999px"
             },
             {
-              "description": "Box shadow at rest.",
-              "name": "--rc-fab-shadow"
+              "description": "Elevation shadow.",
+              "name": "--rc-fab-shadow",
+              "default": "none"
             },
             {
-              "description": "Box shadow on hover.",
-              "name": "--rc-fab-shadow-hover"
+              "description": "Hover shadow.",
+              "name": "--rc-fab-shadow-hover",
+              "default": "var(--rc-fab-shadow)"
             },
             {
-              "description": "Box shadow while pressed.",
-              "name": "--rc-fab-shadow-active"
+              "description": "Pressed shadow.",
+              "name": "--rc-fab-shadow-active",
+              "default": "none"
             },
             {
-              "description": "Inline padding (extended variant).",
+              "description": "Inline padding.",
               "name": "--rc-fab-padding-inline",
               "default": "1rem"
             },
             {
-              "description": "Gap between icon and label (extended variant).",
+              "description": "Gap between icon and label text.",
               "name": "--rc-fab-gap",
               "default": "0.5rem"
             },
             {
-              "description": "Font-size applied to the slotted icon.",
-              "name": "--rc-fab-icon-size",
-              "default": "1.5rem"
+              "description": "Font family for label text.",
+              "name": "--rc-fab-font-family",
+              "default": "inherit"
             },
             {
-              "description": "Label font size (extended variant).",
+              "description": "Font size for label text.",
               "name": "--rc-fab-font-size",
               "default": "0.875rem"
             },
             {
-              "description": "Label font weight.",
+              "description": "Font weight for label text.",
               "name": "--rc-fab-font-weight",
               "default": "500"
             },
             {
-              "description": "Label letter spacing.",
+              "description": "Letter spacing for label text.",
               "name": "--rc-fab-letter-spacing",
               "default": "0.00625em"
             },
@@ -127,84 +150,102 @@
               "default": "2px"
             },
             {
-              "description": "Transition speed for hover/active.",
+              "description": "Opacity applied when the button is disabled.",
+              "name": "--rc-fab-disabled-opacity",
+              "default": "0.38"
+            },
+            {
+              "description": "Transition speed for hover and active states.",
               "name": "--rc-fab-transition-duration",
               "default": "200ms"
-            }
-          ],
-          "cssParts": [
+            },
+            {
+              "description": "Scroll distance at which the FAB becomes fully visible. Requires the `scroll-reveal` attribute. The JS fallback reads this value once on connect; px units only.",
+              "name": "--rc-fab-scroll-threshold",
+              "default": "300px"
+            },
             {
-              "description": "The inner `<button>` element.",
-              "name": "button"
+              "description": "The `animation-timeline` value used for scroll-reveal. Override to target a different scroller, e.g. `scroll(nearest block)` for embedded contexts. CSS path only; the JS fallback discovers the nearest scrollable ancestor automatically.",
+              "name": "--rc-fab-scroll-timeline",
+              "default": "scroll(root block)"
             }
           ],
           "slots": [
             {
-              "description": "The icon element displayed inside the button.",
-              "name": "icon"
+              "description": "The native `<button>` element. The button's own accessible name (text content or `aria-label`) serves as the FAB's accessible name.",
+              "name": "default"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "_scrollCtrl",
               "type": {
-                "text": "'regular' | 'extended'"
+                "text": "ScrollObserverController | undefined"
               },
-              "default": "'regular'",
-              "description": "Display variant. `regular` shows only the icon; `extended` adds the label.",
-              "attribute": "variant",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "position",
               "type": {
-                "text": "string"
+                "text": "'bottom-end' | 'bottom-start' | 'top-end' | 'top-start'"
               },
-              "default": "''",
-              "description": "Visible label text shown in the `extended` variant and used as `aria-label` for `regular`.",
-              "attribute": "label"
+              "default": "'bottom-end'",
+              "description": "Viewport corner where the FAB is anchored. Uses logical inline/block directions.",
+              "attribute": "position",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "scrollReveal",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the button.",
-              "attribute": "disabled",
+              "description": "Reveal the FAB only after the page scrolls past `--rc-fab-scroll-threshold` (default 300 px). Uses CSS scroll-driven animations; falls back to a passive scroll listener in unsupported browsers.",
+              "attribute": "scroll-reveal",
               "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_syncScrollFallback",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_getThreshold",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              }
             }
           ],
           "attributes": [
             {
-              "name": "variant",
-              "type": {
-                "text": "'regular' | 'extended'"
-              },
-              "default": "'regular'",
-              "description": "Display variant. `regular` shows only the icon; `extended` adds the label.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "label",
+              "name": "position",
               "type": {
-                "text": "string"
+                "text": "'bottom-end' | 'bottom-start' | 'top-end' | 'top-start'"
               },
-              "default": "''",
-              "description": "Visible label text shown in the `extended` variant and used as `aria-label` for `regular`.",
-              "fieldName": "label"
+              "default": "'bottom-end'",
+              "description": "Viewport corner where the FAB is anchored. Uses logical inline/block directions.",
+              "fieldName": "position"
             },
             {
-              "name": "disabled",
+              "name": "scroll-reveal",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the button.",
-              "fieldName": "disabled"
+              "description": "Reveal the FAB only after the page scrolls past `--rc-fab-scroll-threshold` (default 300 px). Uses CSS scroll-driven animations; falls back to a passive scroll listener in unsupported browsers.",
+              "fieldName": "scrollReveal"
             }
           ],
           "superclass": {

package/dist/rc-fab-CKowGgDZ.js ADDED Viewed

@@ -0,0 +1,215 @@
+import { css as b, LitElement as d, html as h } from "lit";
+import { property as n } from "lit/decorators.js";
+import { NativeChildController as v, ScrollObserverController as f, findNearestScrollAncestor as p } from "@rcarls/rc-common";
+const m = b`
+  :host {
+    position: var(--rc-fab-position, fixed);
+    inset-block-end: var(--rc-fab-inset-block, 1.5rem);
+    inset-inline-end: var(--rc-fab-inset-inline, 1.5rem);
+    z-index: var(--rc-fab-z-index, 10);
+    display: inline-flex;
+  }
+  :host([hidden]) {
+    display: none;
+  }
+  :host([position='bottom-start']) {
+    inset-inline-end: unset;
+    inset-inline-start: var(--rc-fab-inset-inline, 1.5rem);
+  }
+  :host([position='top-end']) {
+    inset-block-end: unset;
+    inset-block-start: var(--rc-fab-inset-block, 1.5rem);
+  }
+  :host([position='top-start']) {
+    inset-block-end: unset;
+    inset-block-start: var(--rc-fab-inset-block, 1.5rem);
+    inset-inline-end: unset;
+    inset-inline-start: var(--rc-fab-inset-inline, 1.5rem);
+  }
+  ::slotted(button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-fab-gap, 0.5rem);
+    min-width: var(--rc-fab-size, 3.5rem);
+    height: var(--rc-fab-size, 3.5rem);
+    padding-block: 0;
+    padding-inline: var(--rc-fab-padding-inline, 1rem);
+    background: var(--rc-fab-bg, ButtonFace);
+    color: var(--rc-fab-color, ButtonText);
+    border: none;
+    border-radius: var(--rc-fab-radius, 9999px);
+    box-shadow: var(--rc-fab-shadow, var(--rc-shadow-level2, none));
+    font-family: var(--rc-fab-font-family, var(--rc-font-family, inherit));
+    font-size: var(--rc-fab-font-size, var(--rc-font-size, 0.875rem));
+    font-weight: var(--rc-fab-font-weight, 500);
+    letter-spacing: var(--rc-fab-letter-spacing, 0.00625em);
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      background var(--rc-fab-transition-duration, var(--rc-motion-duration, 200ms)) ease,
+      box-shadow var(--rc-fab-transition-duration, var(--rc-motion-duration, 200ms)) ease,
+      transform var(--rc-fab-transition-duration, var(--rc-motion-duration, 200ms)) ease;
+  }
+  :host(:has(button:hover)) ::slotted(button) {
+    background: var(--rc-fab-bg-hover, var(--rc-fab-bg, ButtonFace));
+    box-shadow: var(--rc-fab-shadow-hover, var(--rc-fab-shadow, var(--rc-shadow-level3, none)));
+  }
+  :host(:has(button:active)) ::slotted(button) {
+    box-shadow: var(--rc-fab-shadow-active, none);
+    transform: scale(0.96);
+  }
+  :host(:has(button:focus-visible)) ::slotted(button) {
+    outline: var(--rc-fab-focus-ring, var(--rc-focus-ring, 2px solid currentColor));
+    outline-offset: var(--rc-fab-focus-ring-offset, var(--rc-focus-ring-offset, 2px));
+  }
+  :host(:has(button:disabled)) ::slotted(button) {
+    opacity: var(--rc-fab-disabled-opacity, var(--rc-disabled-opacity, 0.38));
+    pointer-events: none;
+    box-shadow: none;
+  }
+  @keyframes rc-fab-scroll-reveal {
+    from {
+      opacity: 0;
+      visibility: hidden;
+    }
+    50% {
+      visibility: visible;
+    }
+    to {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+  @supports (animation-timeline: scroll()) {
+    :host([scroll-reveal]) {
+      /*
+       * Override for embedded/demo contexts where root does not scroll:
+       *   style="--rc-fab-scroll-timeline: scroll(nearest block)"
+       */
+      --rc-fab-scroll-timeline: scroll(root block);
+      animation-name: rc-fab-scroll-reveal;
+      animation-duration: 1ms; /* required; scroll position drives progress, not time */
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+      animation-timeline: var(--rc-fab-scroll-timeline);
+      animation-range: calc(var(--rc-fab-scroll-threshold, 300px) - 100px)
+        var(--rc-fab-scroll-threshold, 300px);
+    }
+    /* Keyboard escape hatch: always visible when the button has focus */
+    :host([scroll-reveal]):has(button:focus-visible) {
+      animation: none;
+      opacity: 1;
+      visibility: visible;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([scroll-reveal]) {
+        animation-range: var(--rc-fab-scroll-threshold, 300px) var(--rc-fab-scroll-threshold, 300px);
+      }
+    }
+  }
+  /*
+   * JS fallback for browsers without scroll-driven animation support.
+   * [scroll-below-threshold] is toggled by ScrollObserverController;
+   * transitions replicate the CSS animation's show/hide behavior.
+   */
+  @supports not (animation-timeline: scroll()) {
+    /* visible state: visibility snaps immediately, opacity fades in */
+    :host([scroll-reveal]) {
+      transition:
+        opacity 200ms linear,
+        visibility 0s linear;
+    }
+    /* hidden state: opacity fades first, visibility snaps off after delay */
+    :host([scroll-reveal][scroll-below-threshold]) {
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity 200ms linear,
+        visibility 0s linear 200ms;
+    }
+    /* Keyboard escape hatch */
+    :host([scroll-reveal][scroll-below-threshold]):has(button:focus-visible) {
+      opacity: 1;
+      visibility: visible;
+      transition: none;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([scroll-reveal]),
+      :host([scroll-reveal][scroll-below-threshold]) {
+        transition: none;
+      }
+    }
+  }
+`;
+var u = Object.defineProperty, c = (a, t, r, y) => {
+  for (var e = void 0, i = a.length - 1, l; i >= 0; i--)
+    (l = a[i]) && (e = l(t, r, e) || e);
+  return e && u(t, r, e), e;
+};
+const s = class s extends d {
+  constructor() {
+    super(), this.position = "bottom-end", this.scrollReveal = !1, new v(this, {
+      selector: ":scope > button",
+      observe: !0,
+      onMissing: () => {
+      }
+    });
+  }
+  updated(t) {
+    super.updated(t), (t.has("scrollReveal") || this.scrollReveal && !this._scrollCtrl) && this._syncScrollFallback();
+  }
+  _syncScrollFallback() {
+    if (this._scrollCtrl && (this._scrollCtrl.setOptions({ disabled: !0 }), this.removeController(this._scrollCtrl), this._scrollCtrl = void 0, this.removeAttribute("scroll-below-threshold")), !this.scrollReveal || CSS.supports("animation-timeline: scroll()")) return;
+    const t = this._getThreshold();
+    this._scrollCtrl = new f(this, {
+      target: () => p(this),
+      threshold: t,
+      onScroll: (r) => {
+        this.toggleAttribute("scroll-below-threshold", r < t);
+      }
+    });
+  }
+  _getThreshold() {
+    const t = getComputedStyle(this).getPropertyValue("--rc-fab-scroll-threshold").trim(), r = parseFloat(t);
+    return Number.isFinite(r) ? r : 300;
+  }
+  render() {
+    return h`<slot></slot>`;
+  }
+};
+s.styles = m;
+let o = s;
+c([
+  n({ type: String, reflect: !0 })
+], o.prototype, "position");
+c([
+  n({ type: Boolean, attribute: "scroll-reveal", reflect: !0 })
+], o.prototype, "scrollReveal");
+export {
+  o as R
+};
+//# sourceMappingURL=rc-fab-CKowGgDZ.js.map

package/dist/rc-fab-CKowGgDZ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"rc-fab-CKowGgDZ.js","sources":["../src/rc-fab.styles.ts","../src/rc-fab.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const fabStyles = css`\n :host {\n position: var(--rc-fab-position, fixed);\n inset-block-end: var(--rc-fab-inset-block, 1.5rem);\n inset-inline-end: var(--rc-fab-inset-inline, 1.5rem);\n z-index: var(--rc-fab-z-index, 10);\n display: inline-flex;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n :host([position='bottom-start']) {\n inset-inline-end: unset;\n inset-inline-start: var(--rc-fab-inset-inline, 1.5rem);\n }\n\n :host([position='top-end']) {\n inset-block-end: unset;\n inset-block-start: var(--rc-fab-inset-block, 1.5rem);\n }\n\n :host([position='top-start']) {\n inset-block-end: unset;\n inset-block-start: var(--rc-fab-inset-block, 1.5rem);\n inset-inline-end: unset;\n inset-inline-start: var(--rc-fab-inset-inline, 1.5rem);\n }\n\n ::slotted(button) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--rc-fab-gap, 0.5rem);\n\n min-width: var(--rc-fab-size, 3.5rem);\n height: var(--rc-fab-size, 3.5rem);\n padding-block: 0;\n padding-inline: var(--rc-fab-padding-inline, 1rem);\n\n background: var(--rc-fab-bg, ButtonFace);\n color: var(--rc-fab-color, ButtonText);\n\n border: none;\n border-radius: var(--rc-fab-radius, 9999px);\n box-shadow: var(--rc-fab-shadow, var(--rc-shadow-level2, none));\n\n font-family: var(--rc-fab-font-family, var(--rc-font-family, inherit));\n font-size: var(--rc-fab-font-size, var(--rc-font-size, 0.875rem));\n font-weight: var(--rc-fab-font-weight, 500);\n letter-spacing: var(--rc-fab-letter-spacing, 0.00625em);\n white-space: nowrap;\n\n cursor: pointer;\n transition:\n background var(--rc-fab-transition-duration, var(--rc-motion-duration, 200ms)) ease,\n box-shadow var(--rc-fab-transition-duration, var(--rc-motion-duration, 200ms)) ease,\n transform var(--rc-fab-transition-duration, var(--rc-motion-duration, 200ms)) ease;\n }\n\n :host(:has(button:hover)) ::slotted(button) {\n background: var(--rc-fab-bg-hover, var(--rc-fab-bg, ButtonFace));\n box-shadow: var(--rc-fab-shadow-hover, var(--rc-fab-shadow, var(--rc-shadow-level3, none)));\n }\n\n :host(:has(button:active)) ::slotted(button) {\n box-shadow: var(--rc-fab-shadow-active, none);\n transform: scale(0.96);\n }\n\n :host(:has(button:focus-visible)) ::slotted(button) {\n outline: var(--rc-fab-focus-ring, var(--rc-focus-ring, 2px solid currentColor));\n outline-offset: var(--rc-fab-focus-ring-offset, var(--rc-focus-ring-offset, 2px));\n }\n\n :host(:has(button:disabled)) ::slotted(button) {\n opacity: var(--rc-fab-disabled-opacity, var(--rc-disabled-opacity, 0.38));\n pointer-events: none;\n box-shadow: none;\n }\n\n @keyframes rc-fab-scroll-reveal {\n from {\n opacity: 0;\n visibility: hidden;\n }\n 50% {\n visibility: visible;\n }\n to {\n opacity: 1;\n visibility: visible;\n }\n }\n\n @supports (animation-timeline: scroll()) {\n :host([scroll-reveal]) {\n /*\n * Override for embedded/demo contexts where root does not scroll:\n * style=\"--rc-fab-scroll-timeline: scroll(nearest block)\"\n */\n --rc-fab-scroll-timeline: scroll(root block);\n\n animation-name: rc-fab-scroll-reveal;\n animation-duration: 1ms; /* required; scroll position drives progress, not time */\n animation-timing-function: linear;\n animation-fill-mode: both;\n animation-timeline: var(--rc-fab-scroll-timeline);\n animation-range: calc(var(--rc-fab-scroll-threshold, 300px) - 100px)\n var(--rc-fab-scroll-threshold, 300px);\n }\n\n /* Keyboard escape hatch: always visible when the button has focus */\n :host([scroll-reveal]):has(button:focus-visible) {\n animation: none;\n opacity: 1;\n visibility: visible;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([scroll-reveal]) {\n animation-range: var(--rc-fab-scroll-threshold, 300px) var(--rc-fab-scroll-threshold, 300px);\n }\n }\n }\n\n /*\n * JS fallback for browsers without scroll-driven animation support.\n * [scroll-below-threshold] is toggled by ScrollObserverController;\n * transitions replicate the CSS animation's show/hide behavior.\n */\n @supports not (animation-timeline: scroll()) {\n /* visible state: visibility snaps immediately, opacity fades in */\n :host([scroll-reveal]) {\n transition:\n opacity 200ms linear,\n visibility 0s linear;\n }\n\n /* hidden state: opacity fades first, visibility snaps off after delay */\n :host([scroll-reveal][scroll-below-threshold]) {\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 200ms linear,\n visibility 0s linear 200ms;\n }\n\n /* Keyboard escape hatch */\n :host([scroll-reveal][scroll-below-threshold]):has(button:focus-visible) {\n opacity: 1;\n visibility: visible;\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([scroll-reveal]),\n :host([scroll-reveal][scroll-below-threshold]) {\n transition: none;\n }\n }\n }\n`;\n\nexport default fabStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport {\n NativeChildController,\n ScrollObserverController,\n findNearestScrollAncestor,\n warnMissingDirectChild,\n} from '@rcarls/rc-common';\n\nimport fabStyles from './rc-fab.styles.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-fab': RCFab;\n }\n}\n\n/**\n * Sticky floating action button modeled after the Material 3 Floating action button,\n * wrapping a consumer-supplied button with scroll-aware visibility.\n *\n * Adapted from the Material Design FAB component, use this for \"back to top\",\n * sticky CTAs, chat launchers, and of course as FABs in your Material Design PWA.\n *\n * Place a native `<button>` as the direct child. The button's own accessible\n * name (text content or `aria-label`) becomes the FAB's accessible name.\n *\n * Icons go inside the button alongside or instead of visible text.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-fab rc-fab docs}\n * @see {@link https://m3.material.io/components/floating-action-button/overview Material 3 Floating action button}\n *\n * @example Back to top (scroll-triggered)\n * ```html\n * <rc-fab scroll-reveal>\n * <button type=\"button\" aria-label=\"Back to top\" onclick=\"scrollTo({top:0,behavior:'smooth'})\">\n * <span aria-hidden=\"true\">↑</span>\n * </button>\n * </rc-fab>\n * ```\n *\n * @example Icon-only FAB (always visible)\n * ```html\n * <rc-fab>\n * <button type=\"button\" aria-label=\"Create\">\n * <span class=\"material-symbols-outlined\" aria-hidden=\"true\">add</span>\n * </button>\n * </rc-fab>\n * ```\n *\n * @example Extended FAB (icon + visible label)\n * ```html\n * <rc-fab>\n * <button type=\"button\">\n * <span class=\"material-symbols-outlined\" aria-hidden=\"true\">edit</span>\n * Compose\n * </button>\n * </rc-fab>\n * ```\n *\n * @slot default - The native `<button>` element. The button's own accessible\n * name (text content or `aria-label`) serves as the FAB's accessible name.\n *\n * @cssprop [--rc-fab-position=fixed] - CSS position value. Override to `absolute` for layout-relative placement or `sticky` for scroll-snapping.\n * @cssprop [--rc-fab-inset-block=1.5rem] - Distance from the block-axis edge.\n * @cssprop [--rc-fab-inset-inline=1.5rem] - Distance from the inline-axis edge.\n * @cssprop [--rc-fab-z-index=10] - Stacking order.\n * @cssprop [--rc-fab-bg=ButtonFace] - Button background colour.\n * @cssprop [--rc-fab-bg-hover=var(--rc-fab-bg)] - Hover background colour.\n * @cssprop [--rc-fab-color=ButtonText] - Button foreground colour.\n * @cssprop [--rc-fab-size=3.5rem] - Height and minimum width.\n * @cssprop [--rc-fab-radius=9999px] - Border-radius. Default is pill-shaped. Override to `50%` for a circle (icon-only), `1rem` for Material rounded-square, etc.\n * @cssprop [--rc-fab-shadow=none] - Elevation shadow.\n * @cssprop [--rc-fab-shadow-hover=var(--rc-fab-shadow)] - Hover shadow.\n * @cssprop [--rc-fab-shadow-active=none] - Pressed shadow.\n * @cssprop [--rc-fab-padding-inline=1rem] - Inline padding.\n * @cssprop [--rc-fab-gap=0.5rem] - Gap between icon and label text.\n * @cssprop [--rc-fab-font-family=inherit] - Font family for label text.\n * @cssprop [--rc-fab-font-size=0.875rem] - Font size for label text.\n * @cssprop [--rc-fab-font-weight=500] - Font weight for label text.\n * @cssprop [--rc-fab-letter-spacing=0.00625em] - Letter spacing for label text.\n * @cssprop [--rc-fab-focus-ring=2px solid currentColor] - Focus ring style.\n * @cssprop [--rc-fab-focus-ring-offset=2px] - Focus ring offset.\n * @cssprop [--rc-fab-disabled-opacity=0.38] - Opacity applied when the button is disabled.\n * @cssprop [--rc-fab-transition-duration=200ms] - Transition speed for hover and active states.\n * @cssprop [--rc-fab-scroll-threshold=300px] - Scroll distance at which the FAB becomes fully visible. Requires the `scroll-reveal` attribute. The JS fallback reads this value once on connect; px units only.\n * @cssprop [--rc-fab-scroll-timeline=scroll(root block)] - The `animation-timeline` value used for scroll-reveal. Override to target a different scroller, e.g. `scroll(nearest block)` for embedded contexts. CSS path only; the JS fallback discovers the nearest scrollable ancestor automatically.\n *\n */\nexport class RCFab extends LitElement {\n static override styles = fabStyles;\n\n private _scrollCtrl?: ScrollObserverController;\n\n /** Viewport corner where the FAB is anchored. Uses logical inline/block directions. */\n @property({ type: String, reflect: true })\n position: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start' = 'bottom-end';\n\n /** Reveal the FAB only after the page scrolls past `--rc-fab-scroll-threshold` (default 300 px). Uses CSS scroll-driven animations; falls back to a passive scroll listener in unsupported browsers. */\n @property({ type: Boolean, attribute: 'scroll-reveal', reflect: true })\n scrollReveal = false;\n\n constructor() {\n super();\n\n new NativeChildController<HTMLButtonElement>(this, {\n selector: ':scope > button',\n observe: true,\n onMissing: () => {\n if (import.meta.env.DEV) {\n warnMissingDirectChild(this, {\n selector: ':scope > button',\n message:\n '[rc-fab] No direct child <button> found. Place a native <button> inside <rc-fab>.',\n });\n }\n },\n });\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (changed.has('scrollReveal') || (this.scrollReveal && !this._scrollCtrl)) {\n this._syncScrollFallback();\n }\n }\n\n private _syncScrollFallback(): void {\n if (this._scrollCtrl) {\n this._scrollCtrl.setOptions({ disabled: true });\n this.removeController(this._scrollCtrl);\n this._scrollCtrl = undefined;\n\n this.removeAttribute('scroll-below-threshold');\n }\n\n if (!this.scrollReveal || CSS.supports('animation-timeline: scroll()')) return;\n\n const threshold = this._getThreshold();\n\n this._scrollCtrl = new ScrollObserverController(this, {\n target: () => findNearestScrollAncestor(this),\n threshold,\n onScroll: (scrollTop) => {\n this.toggleAttribute('scroll-below-threshold', scrollTop < threshold);\n },\n });\n }\n\n private _getThreshold(): number {\n const raw = getComputedStyle(this).getPropertyValue('--rc-fab-scroll-threshold').trim();\n const n = parseFloat(raw);\n\n return Number.isFinite(n) ? n : 300;\n }\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n\nexport default RCFab;\n"],"names":["fabStyles","css","_RCFab","LitElement","NativeChildController","changed","threshold","ScrollObserverController","findNearestScrollAncestor","scrollTop","raw","n","html","RCFab","__decorateClass","property"],"mappings":";;;AAEO,MAAMA,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACyFlB,MAAMC,IAAN,MAAMA,UAAcC,EAAW;AAAA,EAapC,cAAc;AACZ,UAAA,GAPF,KAAA,WAAoE,cAIpE,KAAA,eAAe,IAKb,IAAIC,EAAyC,MAAM;AAAA,MACjD,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW,MAAM;AAAA,MAQjB;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEmB,QAAQC,GAA+B;AACxD,UAAM,QAAQA,CAAO,IAEjBA,EAAQ,IAAI,cAAc,KAAM,KAAK,gBAAgB,CAAC,KAAK,gBAC7D,KAAK,oBAAA;AAAA,EAET;AAAA,EAEQ,sBAA4B;AASlC,QARI,KAAK,gBACP,KAAK,YAAY,WAAW,EAAE,UAAU,IAAM,GAC9C,KAAK,iBAAiB,KAAK,WAAW,GACtC,KAAK,cAAc,QAEnB,KAAK,gBAAgB,wBAAwB,IAG3C,CAAC,KAAK,gBAAgB,IAAI,SAAS,8BAA8B,EAAG;AAExE,UAAMC,IAAY,KAAK,cAAA;AAEvB,SAAK,cAAc,IAAIC,EAAyB,MAAM;AAAA,MACpD,QAAQ,MAAMC,EAA0B,IAAI;AAAA,MAC5C,WAAAF;AAAA,MACA,UAAU,CAACG,MAAc;AACvB,aAAK,gBAAgB,0BAA0BA,IAAYH,CAAS;AAAA,MACtE;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEQ,gBAAwB;AAC9B,UAAMI,IAAM,iBAAiB,IAAI,EAAE,iBAAiB,2BAA2B,EAAE,KAAA,GAC3EC,IAAI,WAAWD,CAAG;AAExB,WAAO,OAAO,SAASC,CAAC,IAAIA,IAAI;AAAA,EAClC;AAAA,EAEmB,SAAS;AAC1B,WAAOC;AAAA,EACT;AACF;AAtEEV,EAAgB,SAASF;AADpB,IAAMa,IAANX;AAOLY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BF,EAOX,WAAA,UAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,iBAAiB,SAAS,IAAM;AAAA,GAV3DF,EAWX,WAAA,cAAA;"}

package/dist/rc-fab-define.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-fab-Cd1-mEO-.js";
+import { R as e } from "./rc-fab-CKowGgDZ.js";
 customElements.get("rc-fab") || customElements.define("rc-fab", e);
 export {
   e as RCFab

package/dist/rc-fab.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { R as r } from "./rc-fab-Cd1-mEO-.js";
+import { R as r } from "./rc-fab-CKowGgDZ.js";
 export {
   r as RCFab
 };

package/dist/types/packages/rc-fab/src/rc-fab.d.ts CHANGED Viewed

@@ -1,50 +1,92 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'rc-fab': RCFab;
     }
 }
 /**
- * A Material Design 3 Floating Action Button.
+ * Sticky floating action button modeled after the Material 3 Floating action button,
+ * wrapping a consumer-supplied button with scroll-aware visibility.
  *
- * Use `variant="regular"` (default) for an icon-only FAB, or
- * `variant="extended"` to show an icon alongside the `label`.
+ * Adapted from the Material Design FAB component, use this for "back to top",
+ * sticky CTAs, chat launchers, and of course as FABs in your Material Design PWA.
  *
- * Place the button icon in the `icon` slot:
+ * Place a native `<button>` as the direct child. The button's own accessible
+ * name (text content or `aria-label`) becomes the FAB's accessible name.
+ *
+ * Icons go inside the button alongside or instead of visible text.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-fab rc-fab docs}
+ * @see {@link https://m3.material.io/components/floating-action-button/overview Material 3 Floating action button}
+ *
+ * @example Back to top (scroll-triggered)
+ * ```html
+ * <rc-fab scroll-reveal>
+ *   <button type="button" aria-label="Back to top" onclick="scrollTo({top:0,behavior:'smooth'})">
+ *     <span aria-hidden="true">↑</span>
+ *   </button>
+ * </rc-fab>
+ * ```
+ *
+ * @example Icon-only FAB (always visible)
  * ```html
- * <rc-fab label="New recipe">
- *   <iconify-icon slot="icon" icon="mdi-plus"></iconify-icon>
+ * <rc-fab>
+ *   <button type="button" aria-label="Create">
+ *     <span class="material-symbols-outlined" aria-hidden="true">add</span>
+ *   </button>
  * </rc-fab>
  * ```
  *
- * @slot icon - The icon element displayed inside the button.
- * @csspart button - The inner `<button>` element.
- * @cssprop [--rc-fab-bg=Canvas] - Button background colour.
+ * @example Extended FAB (icon + visible label)
+ * ```html
+ * <rc-fab>
+ *   <button type="button">
+ *     <span class="material-symbols-outlined" aria-hidden="true">edit</span>
+ *     Compose
+ *   </button>
+ * </rc-fab>
+ * ```
+ *
+ * @slot default - The native `<button>` element. The button's own accessible
+ *   name (text content or `aria-label`) serves as the FAB's accessible name.
+ *
+ * @cssprop [--rc-fab-position=fixed] - CSS position value. Override to `absolute` for layout-relative placement or `sticky` for scroll-snapping.
+ * @cssprop [--rc-fab-inset-block=1.5rem] - Distance from the block-axis edge.
+ * @cssprop [--rc-fab-inset-inline=1.5rem] - Distance from the inline-axis edge.
+ * @cssprop [--rc-fab-z-index=10] - Stacking order.
+ * @cssprop [--rc-fab-bg=ButtonFace] - Button background colour.
  * @cssprop [--rc-fab-bg-hover=var(--rc-fab-bg)] - Hover background colour.
- * @cssprop [--rc-fab-color=CanvasText] - Foreground (icon + label) colour.
- * @cssprop [--rc-fab-size=3.5rem] - Height and minimum width of the button.
- * @cssprop [--rc-fab-radius=1rem] - Border-radius of the button.
- * @cssprop [--rc-fab-shadow] - Box shadow at rest.
- * @cssprop [--rc-fab-shadow-hover] - Box shadow on hover.
- * @cssprop [--rc-fab-shadow-active] - Box shadow while pressed.
- * @cssprop [--rc-fab-padding-inline=1rem] - Inline padding (extended variant).
- * @cssprop [--rc-fab-gap=0.5rem] - Gap between icon and label (extended variant).
- * @cssprop [--rc-fab-icon-size=1.5rem] - Font-size applied to the slotted icon.
- * @cssprop [--rc-fab-font-size=0.875rem] - Label font size (extended variant).
- * @cssprop [--rc-fab-font-weight=500] - Label font weight.
- * @cssprop [--rc-fab-letter-spacing=0.00625em] - Label letter spacing.
+ * @cssprop [--rc-fab-color=ButtonText] - Button foreground colour.
+ * @cssprop [--rc-fab-size=3.5rem] - Height and minimum width.
+ * @cssprop [--rc-fab-radius=9999px] - Border-radius. Default is pill-shaped. Override to `50%` for a circle (icon-only), `1rem` for Material rounded-square, etc.
+ * @cssprop [--rc-fab-shadow=none] - Elevation shadow.
+ * @cssprop [--rc-fab-shadow-hover=var(--rc-fab-shadow)] - Hover shadow.
+ * @cssprop [--rc-fab-shadow-active=none] - Pressed shadow.
+ * @cssprop [--rc-fab-padding-inline=1rem] - Inline padding.
+ * @cssprop [--rc-fab-gap=0.5rem] - Gap between icon and label text.
+ * @cssprop [--rc-fab-font-family=inherit] - Font family for label text.
+ * @cssprop [--rc-fab-font-size=0.875rem] - Font size for label text.
+ * @cssprop [--rc-fab-font-weight=500] - Font weight for label text.
+ * @cssprop [--rc-fab-letter-spacing=0.00625em] - Letter spacing for label text.
  * @cssprop [--rc-fab-focus-ring=2px solid currentColor] - Focus ring style.
  * @cssprop [--rc-fab-focus-ring-offset=2px] - Focus ring offset.
- * @cssprop [--rc-fab-transition-duration=200ms] - Transition speed for hover/active.
+ * @cssprop [--rc-fab-disabled-opacity=0.38] - Opacity applied when the button is disabled.
+ * @cssprop [--rc-fab-transition-duration=200ms] - Transition speed for hover and active states.
+ * @cssprop [--rc-fab-scroll-threshold=300px] - Scroll distance at which the FAB becomes fully visible. Requires the `scroll-reveal` attribute. The JS fallback reads this value once on connect; px units only.
+ * @cssprop [--rc-fab-scroll-timeline=scroll(root block)] - The `animation-timeline` value used for scroll-reveal. Override to target a different scroller, e.g. `scroll(nearest block)` for embedded contexts. CSS path only; the JS fallback discovers the nearest scrollable ancestor automatically.
+ *
  */
 export declare class RCFab extends LitElement {
     static styles: import('lit').CSSResult;
-    /** Display variant. `regular` shows only the icon; `extended` adds the label. */
-    variant: 'regular' | 'extended';
-    /** Visible label text shown in the `extended` variant and used as `aria-label` for `regular`. */
-    label: string;
-    /** Disables the button. */
-    disabled: boolean;
+    private _scrollCtrl?;
+    /** Viewport corner where the FAB is anchored. Uses logical inline/block directions. */
+    position: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+    /** Reveal the FAB only after the page scrolls past `--rc-fab-scroll-threshold` (default 300 px). Uses CSS scroll-driven animations; falls back to a passive scroll listener in unsupported browsers. */
+    scrollReveal: boolean;
+    constructor();
+    protected updated(changed: PropertyValues): void;
+    private _syncScrollFallback;
+    private _getThreshold;
     protected render(): import('lit').TemplateResult<1>;
 }
 export default RCFab;

package/package.json CHANGED Viewed

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless floating action button web component built with Lit",
+  "version": "0.3.0",
+  "description": "Sticky floating action button modeled after the Material 3 Floating action button, wrapping a consumer-supplied button with scroll-aware visibility.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-fab"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-fab",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,18 +37,18 @@
   ],
   "customElements": "dist/custom-elements.json",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build && cem analyze",
     "cem:analyze": "cem analyze",
     "preview": "vite preview",
-    "test:browser": "vitest",
-    "test:browser:chrome": "vitest --project=chromium",
-    "test:browser:firefox": "vitest --project=firefox",
-    "yalc:publish": "yalc publish --push"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "dependencies": {
+    "@rcarls/rc-common": "workspace:*"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
-    "@guanghechen/rollup-plugin-copy": "^6.0.9",
     "@vitest/browser-playwright": "4.1.5",
     "lit": "^3.0.0",
     "playwright": "^1.56.0",

package/dist/demo.css DELETED Viewed

@@ -1,85 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-:root {
-  color-scheme: light dark;
-  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
-}
-@supports (color: AccentColor) {
-  :root {
-    --rc-accent: AccentColor;
-  }
-}
-[data-theme="light"] { color-scheme: light; }
-[data-theme="dark"]  { color-scheme: dark;  }
-[data-theme="solarized-light"] {
-  color-scheme: light;
-  --rc-surface: #fdf6e3;
-  --rc-text:    #657b83;
-  --rc-border:  1px solid #93a1a1;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
-}
-[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --rc-surface: #002b36;
-  --rc-text:    #839496;
-  --rc-border:  1px solid #586e75;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
-}
-body {
-  font-family: system-ui, sans-serif;
-  margin: 0;
-}
-.demo-page {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-.demo-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid ButtonBorder;
-}
-.demo-controls .demo-title {
-  flex: 1;
-}
-.demo-controls h1 {
-  margin: 0 0 0.15rem;
-  font-size: 1.5rem;
-}
-.demo-controls a {
-  font-size: 0.8rem;
-}
-.demo-section {
-  margin-bottom: 2rem;
-}
-.demo-section h2 {
-  margin: 0 0 0.5rem;
-}
-.theme-picker {
-  padding: 0.35em 0.75em;
-  font-family: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  border: 1px solid ButtonBorder;
-  border-radius: 4px;
-  background: Canvas;
-  color: CanvasText;
-}

package/dist/demo.js DELETED Viewed

@@ -1,40 +0,0 @@
-const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
-const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
-const stored = localStorage.getItem('rc-demo-theme') ?? '';
-applyTheme(stored);
-function applyTheme(theme) {
-  if (theme) {
-    document.documentElement.dataset.theme = theme;
-  } else {
-    delete document.documentElement.dataset.theme;
-  }
-}
-function currentIndex() {
-  const current = document.documentElement.dataset.theme ?? '';
-  const idx = THEMES.indexOf(current);
-  return idx === -1 ? 0 : idx;
-}
-function updateButtons() {
-  const label = LABELS[currentIndex()];
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.textContent = label;
-  });
-}
-window.cycleTheme = function () {
-  const next = THEMES[(currentIndex() + 1) % THEMES.length];
-  applyTheme(next);
-  localStorage.setItem('rc-demo-theme', next);
-  updateButtons();
-};
-document.addEventListener('DOMContentLoaded', () => {
-  updateButtons();
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.addEventListener('click', window.cycleTheme);
-  });
-});

package/dist/rc-fab-Cd1-mEO-.js DELETED Viewed

@@ -1,120 +0,0 @@
-import { css as d, LitElement as c, html as f } from "lit";
-import { property as t } from "lit/decorators.js";
-const p = d`
-  :host {
-    display: inline-flex;
-  }
-  :host([hidden]) {
-    display: none;
-  }
-  button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--rc-fab-gap, 0.5rem);
-    min-width: var(--rc-fab-size, 3.5rem);
-    height: var(--rc-fab-size, 3.5rem);
-    padding-block: 0;
-    padding-inline: var(--rc-fab-padding-inline, 1rem);
-    background: var(--rc-fab-bg, Canvas);
-    color: var(--rc-fab-color, CanvasText);
-    border: none;
-    border-radius: var(--rc-fab-radius, 1rem);
-    box-shadow: var(--rc-fab-shadow, 0 3px 8px rgb(0 0 0 / 0.3));
-    font-family: var(--rc-fab-font-family, inherit);
-    font-size: var(--rc-fab-font-size, 0.875rem);
-    font-weight: var(--rc-fab-font-weight, 500);
-    letter-spacing: var(--rc-fab-letter-spacing, 0.00625em);
-    white-space: nowrap;
-    cursor: pointer;
-    transition:
-      background var(--rc-fab-transition-duration, 200ms) ease,
-      box-shadow var(--rc-fab-transition-duration, 200ms) ease,
-      transform var(--rc-fab-transition-duration, 200ms) ease;
-    &:hover {
-      background: var(--rc-fab-bg-hover, var(--rc-fab-bg, Canvas));
-      box-shadow: var(--rc-fab-shadow-hover, 0 6px 16px rgb(0 0 0 / 0.3));
-    }
-    &:active {
-      box-shadow: var(--rc-fab-shadow-active, 0 2px 4px rgb(0 0 0 / 0.3));
-      transform: scale(0.96);
-    }
-    &:focus-visible {
-      outline: var(--rc-fab-focus-ring, 2px solid currentColor);
-      outline-offset: var(--rc-fab-focus-ring-offset, 2px);
-    }
-    &:disabled {
-      opacity: 0.38;
-      pointer-events: none;
-      box-shadow: none;
-    }
-  }
-  /* Regular variant: icon-only, square-ish with equal padding */
-  :host([variant='regular']) button {
-    padding-inline: 0;
-  }
-  #label {
-    display: none;
-  }
-  /* Extended variant: icon + label */
-  :host([variant='extended']) #label {
-    display: inline;
-  }
-  slot[name='icon']::slotted(*) {
-    font-size: var(--rc-fab-icon-size, 1.5rem);
-    flex-shrink: 0;
-  }
-`;
-var v = Object.defineProperty, n = (o, s, l, h) => {
-  for (var a = void 0, e = o.length - 1, b; e >= 0; e--)
-    (b = o[e]) && (a = b(s, l, a) || a);
-  return a && v(s, l, a), a;
-};
-const i = class i extends c {
-  constructor() {
-    super(...arguments), this.variant = "regular", this.label = "", this.disabled = !1;
-  }
-  render() {
-    return f`
-      <button
-        part="button"
-        type="button"
-        ?disabled=${this.disabled}
-        aria-label=${this.variant === "regular" ? this.label : ""}
-      >
-        <slot name="icon"></slot>
-        <span id="label">${this.label}</span>
-      </button>
-    `;
-  }
-};
-i.styles = p;
-let r = i;
-n([
-  t({ type: String, reflect: !0 })
-], r.prototype, "variant");
-n([
-  t({ type: String })
-], r.prototype, "label");
-n([
-  t({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
-export {
-  r as R
-};
-//# sourceMappingURL=rc-fab-Cd1-mEO-.js.map

package/dist/rc-fab-Cd1-mEO-.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"rc-fab-Cd1-mEO-.js","sources":["../src/rc-fab.styles.ts","../src/rc-fab.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const fabStyles = css`\n :host {\n display: inline-flex;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--rc-fab-gap, 0.5rem);\n\n min-width: var(--rc-fab-size, 3.5rem);\n height: var(--rc-fab-size, 3.5rem);\n padding-block: 0;\n padding-inline: var(--rc-fab-padding-inline, 1rem);\n\n background: var(--rc-fab-bg, Canvas);\n color: var(--rc-fab-color, CanvasText);\n\n border: none;\n border-radius: var(--rc-fab-radius, 1rem);\n box-shadow: var(--rc-fab-shadow, 0 3px 8px rgb(0 0 0 / 0.3));\n\n font-family: var(--rc-fab-font-family, inherit);\n font-size: var(--rc-fab-font-size, 0.875rem);\n font-weight: var(--rc-fab-font-weight, 500);\n letter-spacing: var(--rc-fab-letter-spacing, 0.00625em);\n white-space: nowrap;\n\n cursor: pointer;\n transition:\n background var(--rc-fab-transition-duration, 200ms) ease,\n box-shadow var(--rc-fab-transition-duration, 200ms) ease,\n transform var(--rc-fab-transition-duration, 200ms) ease;\n\n &:hover {\n background: var(--rc-fab-bg-hover, var(--rc-fab-bg, Canvas));\n box-shadow: var(--rc-fab-shadow-hover, 0 6px 16px rgb(0 0 0 / 0.3));\n }\n\n &:active {\n box-shadow: var(--rc-fab-shadow-active, 0 2px 4px rgb(0 0 0 / 0.3));\n transform: scale(0.96);\n }\n\n &:focus-visible {\n outline: var(--rc-fab-focus-ring, 2px solid currentColor);\n outline-offset: var(--rc-fab-focus-ring-offset, 2px);\n }\n\n &:disabled {\n opacity: 0.38;\n pointer-events: none;\n box-shadow: none;\n }\n }\n\n /* Regular variant: icon-only, square-ish with equal padding */\n :host([variant='regular']) button {\n padding-inline: 0;\n }\n\n #label {\n display: none;\n }\n\n /* Extended variant: icon + label */\n :host([variant='extended']) #label {\n display: inline;\n }\n\n slot[name='icon']::slotted(*) {\n font-size: var(--rc-fab-icon-size, 1.5rem);\n flex-shrink: 0;\n }\n`;\n\nexport default fabStyles;\n","import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport fabStyles from './rc-fab.styles.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-fab': RCFab;\n }\n}\n\n/**\n * A Material Design 3 Floating Action Button.\n *\n * Use `variant=\"regular\"` (default) for an icon-only FAB, or\n * `variant=\"extended\"` to show an icon alongside the `label`.\n *\n * Place the button icon in the `icon` slot:\n * ```html\n * <rc-fab label=\"New recipe\">\n * <iconify-icon slot=\"icon\" icon=\"mdi-plus\"></iconify-icon>\n * </rc-fab>\n * ```\n *\n * @slot icon - The icon element displayed inside the button.\n * @csspart button - The inner `<button>` element.\n * @cssprop [--rc-fab-bg=Canvas] - Button background colour.\n * @cssprop [--rc-fab-bg-hover=var(--rc-fab-bg)] - Hover background colour.\n * @cssprop [--rc-fab-color=CanvasText] - Foreground (icon + label) colour.\n * @cssprop [--rc-fab-size=3.5rem] - Height and minimum width of the button.\n * @cssprop [--rc-fab-radius=1rem] - Border-radius of the button.\n * @cssprop [--rc-fab-shadow] - Box shadow at rest.\n * @cssprop [--rc-fab-shadow-hover] - Box shadow on hover.\n * @cssprop [--rc-fab-shadow-active] - Box shadow while pressed.\n * @cssprop [--rc-fab-padding-inline=1rem] - Inline padding (extended variant).\n * @cssprop [--rc-fab-gap=0.5rem] - Gap between icon and label (extended variant).\n * @cssprop [--rc-fab-icon-size=1.5rem] - Font-size applied to the slotted icon.\n * @cssprop [--rc-fab-font-size=0.875rem] - Label font size (extended variant).\n * @cssprop [--rc-fab-font-weight=500] - Label font weight.\n * @cssprop [--rc-fab-letter-spacing=0.00625em] - Label letter spacing.\n * @cssprop [--rc-fab-focus-ring=2px solid currentColor] - Focus ring style.\n * @cssprop [--rc-fab-focus-ring-offset=2px] - Focus ring offset.\n * @cssprop [--rc-fab-transition-duration=200ms] - Transition speed for hover/active.\n */\nexport class RCFab extends LitElement {\n static override styles = fabStyles;\n\n /** Display variant. `regular` shows only the icon; `extended` adds the label. */\n @property({ type: String, reflect: true })\n variant: 'regular' | 'extended' = 'regular';\n\n /** Visible label text shown in the `extended` variant and used as `aria-label` for `regular`. */\n @property({ type: String })\n label = '';\n\n /** Disables the button. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n protected override render() {\n return html`\n <button\n part=\"button\"\n type=\"button\"\n ?disabled=${this.disabled}\n aria-label=${this.variant === 'regular' ? this.label : ''}\n >\n <slot name=\"icon\"></slot>\n <span id=\"label\">${this.label}</span>\n </button>\n `;\n }\n}\n\nexport default RCFab;\n"],"names":["fabStyles","css","_RCFab","LitElement","html","RCFab","__decorateClass","property"],"mappings":";;AAEO,MAAMA,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC0ClB,MAAMC,IAAN,MAAMA,UAAcC,EAAW;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,UAAkC,WAIlC,KAAA,QAAQ,IAIR,KAAA,WAAW;AAAA,EAAA;AAAA,EAEQ,SAAS;AAC1B,WAAOC;AAAA;AAAA;AAAA;AAAA,oBAIS,KAAK,QAAQ;AAAA,qBACZ,KAAK,YAAY,YAAY,KAAK,QAAQ,EAAE;AAAA;AAAA;AAAA,2BAGtC,KAAK,KAAK;AAAA;AAAA;AAAA,EAGnC;AACF;AA3BEF,EAAgB,SAASF;AADpB,IAAMK,IAANH;AAKLI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BF,EAKX,WAAA,SAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARfF,EASX,WAAA,OAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BF,EAaX,WAAA,UAAA;"}