@rcarls/rc-fab 0.1.0

package/README.md

@@ -0,0 +1,37 @@
+# `@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.
+
+## Installation
+
+```sh
+npm install @rcarls/rc-fab
+```
+
+```js
+import '@rcarls/rc-fab/define';
+```
+
+## Usage
+
+```html
+<rc-fab label="New recipe">
+  <span slot="icon" aria-hidden="true">+</span>
+</rc-fab>
+
+<rc-fab variant="extended" label="New recipe">
+  <span slot="icon" aria-hidden="true">+</span>
+</rc-fab>
+```
+
+`label` is required for an accessible name. It is visually hidden in the
+regular variant and visible in the extended variant.
+
+## Accessibility
+
+- The inner control is a native `<button type="button">`.
+- `disabled` maps to the native button's disabled state.
+- Decorative icon content should use `aria-hidden="true"`.
+- The component does not create a landmark or choose a page position.

package/dist/custom-elements.json

@@ -0,0 +1,238 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-fab",
+          "declaration": {
+            "name": "RCFab",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-fab.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-fab.ts",
+      "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```",
+          "name": "RCFab",
+          "cssProperties": [
+            {
+              "description": "Button background colour.",
+              "name": "--rc-fab-bg",
+              "default": "Canvas"
+            },
+            {
+              "description": "Hover background colour.",
+              "name": "--rc-fab-bg-hover",
+              "default": "var(--rc-fab-bg)"
+            },
+            {
+              "description": "Foreground (icon + label) colour.",
+              "name": "--rc-fab-color",
+              "default": "CanvasText"
+            },
+            {
+              "description": "Height and minimum width of the button.",
+              "name": "--rc-fab-size",
+              "default": "3.5rem"
+            },
+            {
+              "description": "Border-radius of the button.",
+              "name": "--rc-fab-radius",
+              "default": "1rem"
+            },
+            {
+              "description": "Box shadow at rest.",
+              "name": "--rc-fab-shadow"
+            },
+            {
+              "description": "Box shadow on hover.",
+              "name": "--rc-fab-shadow-hover"
+            },
+            {
+              "description": "Box shadow while pressed.",
+              "name": "--rc-fab-shadow-active"
+            },
+            {
+              "description": "Inline padding (extended variant).",
+              "name": "--rc-fab-padding-inline",
+              "default": "1rem"
+            },
+            {
+              "description": "Gap between icon and label (extended variant).",
+              "name": "--rc-fab-gap",
+              "default": "0.5rem"
+            },
+            {
+              "description": "Font-size applied to the slotted icon.",
+              "name": "--rc-fab-icon-size",
+              "default": "1.5rem"
+            },
+            {
+              "description": "Label font size (extended variant).",
+              "name": "--rc-fab-font-size",
+              "default": "0.875rem"
+            },
+            {
+              "description": "Label font weight.",
+              "name": "--rc-fab-font-weight",
+              "default": "500"
+            },
+            {
+              "description": "Label letter spacing.",
+              "name": "--rc-fab-letter-spacing",
+              "default": "0.00625em"
+            },
+            {
+              "description": "Focus ring style.",
+              "name": "--rc-fab-focus-ring",
+              "default": "2px solid currentColor"
+            },
+            {
+              "description": "Focus ring offset.",
+              "name": "--rc-fab-focus-ring-offset",
+              "default": "2px"
+            },
+            {
+              "description": "Transition speed for hover/active.",
+              "name": "--rc-fab-transition-duration",
+              "default": "200ms"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The inner `<button>` element.",
+              "name": "button"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The icon element displayed inside the button.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'regular' | 'extended'"
+              },
+              "default": "'regular'",
+              "description": "Display variant. `regular` shows only the icon; `extended` adds the label.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Visible label text shown in the `extended` variant and used as `aria-label` for `regular`.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the button.",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "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",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Visible label text shown in the `extended` variant and used as `aria-label` for `regular`.",
+              "fieldName": "label"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the button.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-fab",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCFab",
+          "declaration": {
+            "name": "RCFab",
+            "module": "src/rc-fab.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCFab",
+            "module": "src/rc-fab.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,120 @@
+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

@@ -0,0 +1 @@
+{"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;"}

package/dist/rc-fab-define.js

@@ -0,0 +1,6 @@
+import { R as e } from "./rc-fab-Cd1-mEO-.js";
+customElements.get("rc-fab") || customElements.define("rc-fab", e);
+export {
+  e as RCFab
+};
+//# sourceMappingURL=rc-fab-define.js.map

package/dist/rc-fab-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-fab-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCFab } from './index.js';\n\ncustomElements.get('rc-fab') || customElements.define('rc-fab', RCFab);\n\nexport * from './index.js';\n"],"names":["RCFab"],"mappings":";AAEA,eAAe,IAAI,QAAQ,KAAK,eAAe,OAAO,UAAUA,CAAK;"}

package/dist/rc-fab.js

@@ -0,0 +1,5 @@
+import { R as r } from "./rc-fab-Cd1-mEO-.js";
+export {
+  r as RCFab
+};
+//# sourceMappingURL=rc-fab.js.map

package/dist/rc-fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-fab.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1 @@
+export * from './index.js';

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

@@ -0,0 +1 @@
+export * from './rc-fab.js';

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

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-fab': RCFab;
+    }
+}
+/**
+ * A Material Design 3 Floating Action Button.
+ *
+ * Use `variant="regular"` (default) for an icon-only FAB, or
+ * `variant="extended"` to show an icon alongside the `label`.
+ *
+ * Place the button icon in the `icon` slot:
+ * ```html
+ * <rc-fab label="New recipe">
+ *   <iconify-icon slot="icon" icon="mdi-plus"></iconify-icon>
+ * </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.
+ * @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-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.
+ */
+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;
+    protected render(): import('lit').TemplateResult<1>;
+}
+export default RCFab;

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

@@ -0,0 +1,2 @@
+export declare const fabStyles: import('lit').CSSResult;
+export default fabStyles;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@rcarls/rc-fab",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless floating action button web component built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-fab"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-fab.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-fab/src/index.d.ts",
+        "default": "./dist/rc-fab.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-fab/src/define.d.ts",
+        "default": "./dist/rc-fab-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-fab/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-fab-define.js"
+  ],
+  "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"
+  },
+  "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",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}