@pg-labs-incubator/cobweb 0.0.0-stage → 0.0.1

package/target/esbuild/text/text.css

@@ -0,0 +1 @@
+@layer cw-style{.cw-Text{contain:content;pointer-events:none;touch-action:none;user-select:none}._cw-Text-body,._cw-Text-body-large{-cw-typescale:--cw-Typescale-body-large}._cw-Text-body-medium{-cw-typescale:--cw-Typescale-body-medium}._cw-Text-body-small{-cw-typescale:--cw-Typescale-body-small}._cw-Text-body-large-emphasized{-cw-typescale:--cw-Typescale-body-large-emphasized}._cw-Text-body-medium-emphasized{-cw-typescale:--cw-Typescale-body-medium-emphasized}._cw-Text-body-small-emphasized{-cw-typescale:--cw-Typescale-body-small-emphasized}._cw-Text-display,._cw-Text-display-large{-cw-typescale:--cw-Typescale-display-large}._cw-Text-display-medium{-cw-typescale:--cw-Typescale-display-medium}._cw-Text-display-small{-cw-typescale:--cw-Typescale-display-small}._cw-Text-display-large-emphasized{-cw-typescale:--cw-Typescale-display-large-emphasized}._cw-Text-display-medium-emphasized{-cw-typescale:--cw-Typescale-display-medium-emphasized}._cw-Text-display-small-emphasized{-cw-typescale:--cw-Typescale-display-small-emphasized}._cw-Text-headline,._cw-Text-headline-large{-cw-typescale:--cw-Typescale-headline-large}._cw-Text-headline-medium{-cw-typescale:--cw-Typescale-headline-medium}._cw-Text-headline-small{-cw-typescale:--cw-Typescale-headline-small}._cw-Text-headline-large-emphasized{-cw-typescale:--cw-Typescale-headline-large-emphasized}._cw-Text-headline-medium-emphasized{-cw-typescale:--cw-Typescale-headline-medium-emphasized}._cw-Text-headline-small-emphasized{-cw-typescale:--cw-Typescale-headline-small-emphasized}._cw-Text-label,._cw-Text-label-large{-cw-typescale:--cw-Typescale-label-large}._cw-Text-label-medium{-cw-typescale:--cw-Typescale-label-medium}._cw-Text-label-small{-cw-typescale:--cw-Typescale-label-small}._cw-Text-label-large-emphasized{-cw-typescale:--cw-Typescale-label-large-emphasized}._cw-Text-label-medium-emphasized{-cw-typescale:--cw-Typescale-label-medium-emphasized}._cw-Text-label-small-emphasized{-cw-typescale:--cw-Typescale-label-small-emphasized}._cw-Text-title,._cw-Text-title-large{-cw-typescale:--cw-Typescale-title-large}._cw-Text-title-medium{-cw-typescale:--cw-Typescale-title-medium}._cw-Text-title-small{-cw-typescale:--cw-Typescale-title-small}._cw-Text-title-large-emphasized{-cw-typescale:--cw-Typescale-title-large-emphasized}._cw-Text-title-medium-emphasized{-cw-typescale:--cw-Typescale-title-medium-emphasized}._cw-Text-title-small-emphasized{-cw-typescale:--cw-Typescale-title-small-emphasized}}

package/target/esbuild/text/text.jsx

@@ -0,0 +1,3 @@
+import{defineDomComponent as a}from"..";import"./text.css";function s(e){return`_cw-Text-${e??"body-large"}`}const i=a(()=>(e,t)=><span{...e}classList={{...e.classList,[s(t.scale)]:!0,"cw-Text":!0}}>
+		{t.value??""}
+	</span>,e=>class extends e{constructor(t){super(t,{styleElementIsFunction:!0})}applyComponentProps(){const[t,o]=super.readProp("scale");o&&super.setClass("scale",s(t));const[p,r]=super.readProp("value");r&&(super.styleElement.textContent=p??"")}render(){return<span class="cw-Text"/>}});export{i as Text};

package/target/esbuild/text/typography.css

@@ -0,0 +1 @@
+@layer cw-style{._cw-Typography-auto{--_CW-TYPOGRAPHY-EXPLICIT_CATEGORY: initial}._cw-Typography-small{--_CW-TYPOGRAPHY-EXPLICIT_CATEGORY: 0}._cw-Typography-medium{--_CW-TYPOGRAPHY-EXPLICIT_CATEGORY: 1}._cw-Typography-large{--_CW-TYPOGRAPHY-EXPLICIT_CATEGORY: 2}._cw-Typography-extraLarge{--_CW-TYPOGRAPHY-EXPLICIT_CATEGORY: 3}:where([lang]){--_CW-TYPOGRAPHY-SCRIPT_CATEGORY: initial}:where([lang*=-Cyrl i],[lang*=-Grek i],[lang*=-Hebr i],[lang*=-Latn i]:not(:lang(vi))){--_CW-TYPOGRAPHY-SCRIPT_CATEGORY: 0}:where([lang*=-Arab i],[lang*=-Beng i],[lang*=-Deva i],[lang*=-Ethi i],[lang*=-Gujr i],[lang*=-Guru i],[lang*=-Hang i],[lang*=-Hani i],[lang*=-Hans i],[lang*=-Hant i],[lang*=-Hira i],[lang*=-Hrkt i],[lang*=-Jpan i],[lang*=-Kana i],[lang*=-Khmr i],[lang*=-Knda i],[lang*=-Kore i],[lang*=-Laoo i],[lang*=-Mlym i],[lang*=-Orya i],[lang*=-Sinh i],[lang*=-Taml i],[lang*=-Thai i],[lang*=-Tibt i]){--_CW-TYPOGRAPHY-SCRIPT_CATEGORY: 1}:where([lang*=-Mymr i],[lang*=-Telu i]){--_CW-TYPOGRAPHY-SCRIPT_CATEGORY: 2}:where(.cw-Typography,.cw-Typography [lang]):lang(am,ar,as,bho,bn,bo,brx,ckb,doi,dz,fa,gu,hi,ja,km,kn,ko,kok,ks,lo,mai,ml,mni,mr,ne,or,pa,prs,ps,sa,sd,si,ta,th,ti,ug,ur,vi,yue,zh){--_CW-TYPOGRAPHY-LANGUAGE_CATEGORY: 1}:where(.cw-Typography,.cw-Typography [lang]):lang(my,te){--_CW-TYPOGRAPHY-LANGUAGE_CATEGORY: 2}:where(.cw-Typography,.cw-Typography [lang]){--_CW-TYPOGRAPHY-CATEGORY: var( --_CW-TYPOGRAPHY-EXPLICIT_CATEGORY, var(--_CW-TYPOGRAPHY-SCRIPT_CATEGORY, var(--_CW-TYPOGRAPHY-LANGUAGE_CATEGORY)) );--_CW-TYPOGRAPHY-LANGUAGE_CATEGORY: 0;--_CW-TYPOGRAPHY-W0: clamp(0, 1 - var(--_CW-TYPOGRAPHY-CATEGORY), 1);--_CW-TYPOGRAPHY-W1: clamp( 0, 1 - max(var(--_CW-TYPOGRAPHY-CATEGORY) - 1, 1 - var(--_CW-TYPOGRAPHY-CATEGORY)), 1 );--_CW-TYPOGRAPHY-W2: clamp( 0, 1 - max(var(--_CW-TYPOGRAPHY-CATEGORY) - 2, 2 - var(--_CW-TYPOGRAPHY-CATEGORY)), 1 );--_CW-TYPOGRAPHY-W3: clamp(0, var(--_CW-TYPOGRAPHY-CATEGORY) - 2, 1);--cw-LineHeight-body-large: calc( cw-var(--cw-LineHeight-body-large, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--body-large) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--body-large) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--body-large) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-body-medium: calc( cw-var(--cw-LineHeight-body-medium, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--body-medium) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--body-medium) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--body-medium) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-body-small: calc( cw-var(--cw-LineHeight-body-small, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--body-small) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--body-small) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--body-small) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-display-large: calc( cw-var(--cw-LineHeight-display-large, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--display-large) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--display-large) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--display-large) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-display-medium: calc( cw-var(--cw-LineHeight-display-medium, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--display-medium) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--display-medium) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--display-medium) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-display-small: calc( cw-var(--cw-LineHeight-display-small, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--display-small) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--display-small) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--display-small) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-headline-large: calc( cw-var(--cw-LineHeight-headline-large, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--headline-large) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--headline-large) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--headline-large) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-headline-medium: calc( cw-var(--cw-LineHeight-headline-medium, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--headline-medium) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--headline-medium) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--headline-medium) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-headline-small: calc( cw-var(--cw-LineHeight-headline-small, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--headline-small) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--headline-small) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--headline-small) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-label-large: calc( cw-var(--cw-LineHeight-label-large, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--label-large) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--label-large) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--label-large) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-label-medium: calc( cw-var(--cw-LineHeight-label-medium, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--label-medium) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--label-medium) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--label-medium) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-label-small: calc( cw-var(--cw-LineHeight-label-small, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--label-small) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--label-small) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--label-small) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-title-large: calc( cw-var(--cw-LineHeight-title-large, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--title-large) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--title-large) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--title-large) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-title-medium: calc( cw-var(--cw-LineHeight-title-medium, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--title-medium) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--title-medium) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--title-medium) * var(--_CW-TYPOGRAPHY-W3) );--cw-LineHeight-title-small: calc( cw-var(--cw-LineHeight-title-small, default) * var(--_CW-TYPOGRAPHY-W0) + cw-var(--cw-LineHeight-theme-medium--title-small) * var(--_CW-TYPOGRAPHY-W1) + cw-var(--cw-LineHeight-theme-large--title-small) * var(--_CW-TYPOGRAPHY-W2) + cw-var(--cw-LineHeight-theme-extraLarge--title-small) * var(--_CW-TYPOGRAPHY-W3) )}}

package/target/esbuild/text/typography.jsx

@@ -0,0 +1 @@
+import{insert as p}from"solid-js/web";import{defineDomComponent as s}from"..";import"./typography.css";function r(o){return`_cw-Typography-${o??"auto"}`}const h=s(()=>(o,e)=><div{...o}classList={{...o.classList,[r(e.height)]:!0,"cw-Typography":!0}}/>,o=>class extends o{constructor(e){super(e,{styleElementIsFunction:!0})}applyComponentProps(){const[e,t]=super.readProp("height");t&&super.setClass("height",r(e))}render(e){const t=<div class="cw-Typography"/>;return p(t,e),t}});export{h as Typography};

package/target/esbuild/util/box-side.jsx

@@ -0,0 +1 @@
+import{isServer as a}from"solid-js/web";const e=0,r=1,o=2,i=3;function B(l){return l===i||l===r?0:1}function d(l,x){const n=a?null:l.ownerDocument.defaultView;if(n===null)return[e,r,o,i];const s=n.getComputedStyle(l,x??null),c=s.getPropertyValue("writing-mode"),t=s.getPropertyValue("direction")==="rtl";switch(c){case"sideways-rl":case"tb":case"tb-rl":case"vertical-rl":return[r,t?e:o,i,t?o:e];case"tb-lr":case"vertical-lr":return[i,t?e:o,r,t?o:e];case"sideways-lr":return[i,t?o:e,r,t?e:o];case"horizontal-tb":default:return[e,t?i:r,o,t?r:i]}}export{o as BoxBottom,i as BoxLeft,r as BoxRight,e as BoxTop,B as axisOfBoxSide,d as logicalBoxSidesOf};

package/target/esbuild/util/debug.jsx

@@ -0,0 +1 @@
+import{DEV as e}from"solid-js";function r(n,o){if(e&&(typeof n=="function"&&(n=n()),!n))throw new Error(o===void 0?"assertion failed":`assertion failed: ${o}`)}function t(n,...o){e&&console.log(n,...o)}export{r as assertDebug,t as printDebug};

package/target/esbuild/util/dom.jsx

@@ -0,0 +1 @@
+const i=new Map([["contenteditable",["true","false"]],["draggable",["true","false"]],["spellcheck",["true","false"]],["translate",["yes","no"]]]);function o(e,t){return t==null?null:typeof t!="boolean"||e.startsWith("aria-")?t.toString():i.get(e)?.[t?0:1]??(t?"":null)}function s(e,t,n){const r=n==null||typeof n=="boolean"||typeof n=="number"||typeof n=="string"?o(t,n):void 0;r===null?e.removeAttribute(t):r!==void 0&&e.setAttribute(t,r)}export{o as attributeValueOf,s as setAttribute};

package/target/esbuild/util/event.jsx

@@ -0,0 +1 @@
+import{isServer as d}from"solid-js/web";import{printDebug as l}from"./debug";const i=["stopPropagation","stopImmediatePropagation"],a=new WeakMap,u=!d&&(()=>{let t=!1;const e={get passive(){return t=!0,!1}},o=()=>{};try{try{window.addEventListener("test",o,e)}finally{window.removeEventListener("test",o,e)}return l(`passive event listeners are${t?"":" not"} supported`),t}catch(n){return l("passive event listeners are not supported",n),!1}})();function h(t,e){return u?t:t.capture??!1}function c(t){for(const e of t.composedPath())if(e.nodeType===Node.DOCUMENT_NODE)return e;return null}function f(t,e){const o=i.map(n=>Object.getOwnPropertyDescriptor(t,n));for(const n of i){const r=t[n];Object.defineProperty(t,n,{configurable:!0,writable:!0,value(){r.call(this),e()}})}return()=>i.forEach((n,r)=>{const s=o[r];s===void 0?Reflect.deleteProperty(t,n):Object.defineProperty(t,n,s)})}class p{#i;#e;#t;#n;#o;#r;#a;#l;#s;constructor(e){const o=e.bubbles&&!e.cancelBubble?c(e):null,n=()=>this.#d();this.#i=e,this.#e=[],this.#t=o,this.#n=o?.defaultView??null,this.#o=r=>{r===e&&e.cancelBubble&&n()},this.#r=r=>{r===e&&n()},this.#a=o===null?null:f(e,()=>queueMicrotask(n)),this.#l=o!==null&&e.isTrusted?setTimeout(n,0):void 0,this.#s=!1,this.#t?.addEventListener(e.type,this.#o),this.#n?.addEventListener(e.type,this.#r),(o===null||!e.isTrusted)&&queueMicrotask(n)}request(e,o){this.#e.push({action:e,preventDefault:o})}#d(){const e=this.#i,o=e.eventPhase!==Event.NONE;let n=e.defaultPrevented;if(!this.#s){this.#s=!0,a.delete(e),this.#t?.removeEventListener(e.type,this.#o),this.#n?.removeEventListener(e.type,this.#r),this.#a?.(),clearTimeout(this.#l);for(const{action:r,preventDefault:s}of this.#e){if(n)return;s&&(n=!0,o&&e.preventDefault()),queueMicrotask(r)}}}}function y(t,e,o,n=!0){let r=a.get(t);t.defaultPrevented||(r===void 0&&(r=new p(t),a.set(t,r)),r.request(o,n))}function m(t,e){const o=t.relatedTarget;return o?.nodeType===Node.ELEMENT_NODE&&e.contains(o)}export{u as HAS_PASSIVE_EVENT_LISTENERS,y as deferAfterDelegatedCancellation,h as eventListenerOptionsOf,m as isLeaveWithin};

package/target/esbuild/util/index.jsx

@@ -0,0 +1 @@
+import{BoxBottom as t,BoxLeft as r,BoxRight as c,BoxTop as i,axisOfBoxSide as x,logicalBoxSidesOf as f}from"./box-side";import{assertDebug as p,printDebug as s}from"./debug";import{attributeValueOf as h,setAttribute as m}from"./dom";import{HAS_PASSIVE_EVENT_LISTENERS as B,deferAfterDelegatedCancellation as k,eventListenerOptionsOf as l}from"./event";import{checkArgument as d,checkArray as g,checkBoolean as b,checkBrowser as A,checkNumber as O,checkObject as E,checkServer as D,checkState as L,checkString as V,checkValueDefined as v}from"./preconditions";import{consumeProps as P,isPropReactive as R}from"./reactive";export{t as BoxBottom,r as BoxLeft,c as BoxRight,i as BoxTop,B as HAS_PASSIVE_EVENT_LISTENERS,p as assertDebug,h as attributeValueOf,x as axisOfBoxSide,d as checkArgument,g as checkArray,b as checkBoolean,A as checkBrowser,O as checkNumber,E as checkObject,D as checkServer,L as checkState,V as checkString,v as checkValueDefined,P as consumeProps,k as deferAfterDelegatedCancellation,l as eventListenerOptionsOf,R as isPropReactive,f as logicalBoxSidesOf,s as printDebug,m as setAttribute};

package/target/esbuild/util/preconditions.jsx

@@ -0,0 +1 @@
+import{isServer as t}from"solid-js/web";function i(n,e){if(!n)throw new Error(e===void 0?"invalid state":`invalid state: ${e}`)}function a(){i(!t,"expected browser environment")}function c(){i(t,"expected server environment")}function u(n,e){if(!n)throw new Error(e===void 0?"invalid argument":`invalid argument: ${e}`)}function l(n,e){if(n==null)throw new ReferenceError(`${e??"value"} is 'null' or 'undefined'`)}function r(n,e,o){if(typeof e!==n)throw new TypeError(`${o??"value"} is not a ${n}`)}function f(n,e){r("boolean",n,e)}function v(n,e){r("number",n,e)}function d(n,e){r("string",n,e)}function w(n,e){r("object",n,e)}function k(n,e){if(!Array.isArray(n))throw new TypeError(`${e??"value"} is not an array`)}export{u as checkArgument,k as checkArray,f as checkBoolean,a as checkBrowser,v as checkNumber,w as checkObject,c as checkServer,i as checkState,d as checkString,l as checkValueDefined};

package/target/esbuild/util/reactive.jsx

@@ -0,0 +1 @@
+import{$PROXY as i,untrack as c}from"solid-js";function u(e,t){return i in e||Object.getOwnPropertyDescriptor(e,t)?.get!==void 0}function d(e,t,P){const r={};if(!(i in e))for(const n of t){const o=Object.getOwnPropertyDescriptor(e,n);o?.get===void 0&&(r[n]=o?.value)}return P!==void 0&&P.length>0&&c(()=>{for(const n of P)r[n]=e[n]}),r}export{d as consumeProps,u as isPropReactive};

package/target/tsc/action/action.css.d.ts

@@ -0,0 +1,3 @@
+// SPDX-License-Identifier: MPL-2.0
+
+export {};

package/target/tsc/action/base.d.ts

@@ -0,0 +1,211 @@
+import type { JSX } from "solid-js";
+import type { DomProps, FunctionElement } from "..";
+import type { InteractableProps } from "../state";
+import { InteractableController } from "../state/controller";
+import "./action.css";
+/**
+ * Native button element properties shared by action controls.
+ *
+ * The `disabled`, `tabIndex`, and `type` properties are local component properties, applied to the
+ * native button by the component controller. Other native attributes remain available through the
+ * namespaced `attr:` properties supplied by {@link DomProps}.
+ */
+export type ActionButtonElementProps = DomProps<HTMLButtonElement, Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "tabindex" | "type">> & {
+    /**
+     * Button is disabled and cannot be focused or activated.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Native button submission behavior.
+     *
+     * @defaultValue `"button"`
+     */
+    type?: "button" | "reset" | "submit" | undefined;
+    /**
+     * Sequential focus index. A disabled button is removed from the sequential focus order.
+     */
+    tabIndex?: number | undefined;
+};
+/**
+ * Link properties of action controls which navigate.
+ *
+ * An action which navigates must be a link: it is then announced as a link, can be opened in a new
+ * tab or window, shows its destination, and is followed without script. A control with an `href`
+ * therefore renders a native link in place of its native button. Common buttons accept these
+ * properties.
+ */
+export type ActionLinkProps = {
+    /**
+     * Link destination.
+     *
+     * When specified, the control renders a native link; otherwise, it renders a native button.
+     * Changing this between a destination and `undefined` replaces the rendered element.
+     */
+    href?: string | undefined;
+};
+/**
+ * Action button visual variants.
+ */
+export type ActionButtonVariant = "elevated" | "filled" | "filled-tonal" | "outlined" | "text";
+/**
+ * Action button sizes, from extra small (32px) to extra large (136px).
+ */
+export type ActionButtonSize = "lg" | "md" | "sm" | "xl" | "xs";
+/**
+ * Toggle state properties of action controls.
+ *
+ * Toggles expose their state through `aria-pressed`. The state is controlled when `checked` is
+ * supplied, and uncontrolled otherwise.
+ */
+export type ActionToggleProps = {
+    /**
+     * Current controlled toggle state.
+     *
+     * Supplying this property, including `undefined`, selects controlled mode at construction.
+     * Update it from {@link ActionToggleProps.onChange} to accept a requested state.
+     */
+    checked?: boolean | undefined;
+    /**
+     * Initial toggle state when {@link ActionToggleProps.checked} is omitted.
+     *
+     * @defaultValue `false`
+     * @remarks
+     * Read once at construction. Toggle state does not participate in native form reset.
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * Toggle state cannot be changed by activation.
+     *
+     * A read-only toggle remains focusable, with a focus indicator, and is exposed with
+     * `aria-disabled="true"`. Its activation is cancelled.
+     *
+     * @defaultValue `false`
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Request the next toggle state after an uncancelled click finishes propagation.
+     *
+     * Runs for controlled and uncontrolled toggles, before uncontrolled state is committed. Cancel
+     * the click in `onClick`, `event:click`, or an ancestor handler to prevent the request. The
+     * change callback itself does not provide a cancellation mechanism.
+     *
+     * @see {@link ActionChangeHandler}
+     */
+    onChange?: ActionChangeHandler | undefined;
+};
+/**
+ * Properties of every native action control.
+ *
+ * This is the property type of icon buttons and of floating action buttons. An
+ * {@link ActionButtonController} accepts these properties, with a `ref` of any function element,
+ * and the {@link ActionLinkProps} of a control which can render a link. Common buttons expose the
+ * toggle properties only through {@link ./button#ToggleButton}, which supplies `toggle`.
+ */
+export type BaseActionButtonProps = ActionButtonElementProps & ActionToggleProps & {
+    /**
+     * Enable toggle behavior and the `aria-pressed` state.
+     *
+     * @defaultValue `false`
+     */
+    toggle?: boolean | undefined;
+};
+/**
+ * Action toggle change callback.
+ *
+ * The controller and event follow the next state, so a callback which only needs the boolean
+ * state can omit the other parameters. See {@link ActionToggleProps.onChange} for ordering.
+ *
+ * @param checked - requested toggle state
+ * @param controller - action controller receiving activation
+ * @param event - originating click event
+ */
+export type ActionChangeHandler = (checked: boolean, controller: ActionButtonController<BaseActionButtonProps>, event: Event) => void;
+/**
+ * Client controller for native action buttons.
+ *
+ * The native button, or the native link rendered in its place for an
+ * {@link ActionLinkProps.href | `href`}, is both the style and function element. The controller
+ * applies the native `disabled`, `href`, `tabindex`, and `type` attributes, the toggle state
+ * (`aria-pressed`, `aria-disabled` for read-only toggles), and the state classes of the
+ * component, all keyed by the base CSS class the controller is constructed with:
+ *
+ * | Class                        | Applied when                    |
+ * | ---------------------------- | ------------------------------- |
+ * | `<base>-disabled`            | the button is disabled          |
+ * | `<base>-toggle`              | the button is a toggle          |
+ * | `<base>-checked`             | the toggle is checked           |
+ * | `<base>-{hover,focus,press}` | an interaction state is entered |
+ *
+ * Disabled buttons enter no interaction state. Read-only toggles enter only the focus state, so
+ * that keyboard focus remains visible. A link has no `type`, and cannot be disabled natively: a
+ * disabled link keeps its `href`, as a disabled tab or navigation destination does, is exposed with
+ * `aria-disabled="true"`, and its activation by a click or <kbd>Enter</kbd> is cancelled. An
+ * authored `attr:aria-pressed` or `attr:aria-disabled` replaces the respective managed attribute.
+ *
+ * @typeParam P - component properties type, whose `ref` the bound omits, since its type is the type
+ * of the function element
+ */
+export declare abstract class ActionButtonController<P extends Omit<BaseActionButtonProps, "ref"> & ActionLinkProps> extends InteractableController<P> {
+    #private;
+    /**
+     * Construct a new `ActionButtonController`.
+     *
+     * @param props - component properties
+     * @param baseClassName - base CSS class of the component's state and interaction classes
+     */
+    constructor(props: InteractableProps<P>, baseClassName: string);
+    /**
+     * Test whether the button is disabled.
+     *
+     * @returns `true` if, and only if, the button is disabled
+     */
+    isDisabled(): boolean;
+    /**
+     * Test whether the button is a toggle.
+     *
+     * @returns `true` if, and only if, the button is a toggle
+     */
+    isToggle(): boolean;
+    /**
+     * Test whether the button is a checked toggle.
+     *
+     * @returns `true` if, and only if, the button is a toggle and its toggle state is checked
+     */
+    isChecked(): boolean;
+    /**
+     * Compose a state CSS class of this controller.
+     *
+     * @param name - state suffix
+     * @returns base CSS class joined with `name`
+     */
+    protected actionClass(name: string): string;
+    /**
+     * Apply native, toggle, and interaction state properties.
+     *
+     * The `disabled`, `aria-disabled`, and `type` attributes depend on whether the function element
+     * is a link, and are applied again whenever `href` changes. The element which then replaces the
+     * function element receives the attributes applied so far, so that they may be applied before
+     * or after the replacement.
+     */
+    protected applyComponentProps(): void;
+    /**
+     * Move the listeners cancelling the activation of a disabled link to a new function element
+     * which is a native link.
+     *
+     * @param curr - new function element, or `null` when absent
+     * @see {@link ../dom/client#DomController.onFunctionElementChanged}
+     */
+    protected onFunctionElementChanged(curr: FunctionElement<P> | null): void;
+    /**
+     * Handle an interaction event, and request a new toggle state after a click.
+     *
+     * Events received by a disabled button are ignored. A click on a read-only toggle is cancelled.
+     * Otherwise a click on a toggle requests the next state once the click has finished propagating
+     * and was not cancelled; an uncontrolled toggle then commits that state.
+     *
+     * @param event - interaction event received
+     */
+    protected onEvent(event: Event): void;
+}

package/target/tsc/action/button.d.ts

@@ -0,0 +1,126 @@
+import type { JSX } from "solid-js";
+import type { DomProps } from "..";
+import type { InteractableComponent, InteractableProps } from "../state";
+import type { ActionButtonElementProps, ActionButtonSize, ActionButtonVariant, ActionLinkProps, ActionToggleProps } from "./base";
+/**
+ * Common button properties.
+ *
+ * A common button with an {@link ./base#ActionLinkProps.href | `href`} renders a native link, and
+ * a native button otherwise. The `disabled`, `href`, `tabIndex`, and `type` properties are local
+ * component properties, applied to the native element by the component controller. Other native
+ * attributes of either element remain available through the namespaced `attr:` properties
+ * supplied by {@link DomProps}, such as `attr:target`, `attr:rel`, `attr:download`,
+ * `attr:hreflang`, and `attr:referrerpolicy` of a link.
+ */
+export type ButtonProps = DomProps<HTMLAnchorElement | HTMLButtonElement, Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & JSX.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "disabled" | "href" | "tabindex" | "type">> & ActionLinkProps & {
+    /**
+     * Button is disabled and cannot be activated.
+     *
+     * A disabled button cannot be focused. A link cannot be disabled natively: a disabled link
+     * keeps its `href`, as a disabled tab or navigation destination does, but is exposed with
+     * `aria-disabled="true"`, is removed from the sequential focus order, takes no pointer events,
+     * and is not followed.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Native button submission behavior, which a link does not have: a link has no `type`.
+     *
+     * @defaultValue `"button"`
+     */
+    type?: "button" | "reset" | "submit" | undefined;
+    /**
+     * Sequential focus index. A disabled button or link is removed from the sequential focus order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Button visual variant.
+     *
+     * @defaultValue `"filled"`
+     */
+    variant?: ActionButtonVariant | undefined;
+    /**
+     * Button size. Inside a button group or split button, the container's size applies instead.
+     *
+     * @defaultValue `"md"`
+     */
+    size?: ActionButtonSize | undefined;
+    /**
+     * Round or square resting shape. Inside a button group, the group's shape applies instead.
+     *
+     * @defaultValue `"round"`
+     */
+    shape?: "round" | "square" | undefined;
+    /**
+     * Icon displayed before the label.
+     */
+    leadingIcon?: JSX.Element;
+    /**
+     * Icon displayed after the label.
+     */
+    trailingIcon?: JSX.Element;
+};
+/**
+ * Toggle button visual variants. Material 3 defines no text toggle button.
+ */
+export type ToggleButtonVariant = Exclude<ActionButtonVariant, "text">;
+/**
+ * Toggle button properties.
+ *
+ * A toggle button is always a native button: its selected state is not a destination, so it has
+ * neither an `href` nor the native attributes of a link.
+ */
+export type ToggleButtonProps = ActionButtonElementProps & ActionToggleProps & Pick<ButtonProps, "leadingIcon" | "shape" | "size" | "trailingIcon"> & {
+    /**
+     * Toggle button visual variant.
+     *
+     * @defaultValue `"filled"`
+     */
+    variant?: ToggleButtonVariant | undefined;
+};
+/**
+ * Material 3 common button.
+ *
+ * Common buttons are native buttons with an optional leading and trailing icon around a label.
+ * They come in five sizes and five variants, and morph their corners while pressed.
+ *
+ * A common button with an `href` is a native link instead, as an action which navigates must be.
+ * The link has the classes, interaction states, and appearance of the button; see
+ * {@link ButtonProps} for its attributes and its disabled state.
+ *
+ * # Design
+ *
+ * The [cw-Button](./button.yaml) attribute sizes the button and the [cw-Action](./action.yaml)
+ * attribute colors it; each variant is a `cw-Action` theme.
+ *
+ * # Elements
+ *
+ * | Class                          | Element                                      |
+ * | ------------------------------ | -------------------------------------------- |
+ * | `cw-Button`                    | native button, or native link with an `href` |
+ * | `cw-ActionButton-leadingIcon`  | leading icon slot                            |
+ * | `cw-ActionButton-label`        | label slot                                   |
+ * | `cw-ActionButton-trailingIcon` | trailing icon slot                           |
+ *
+ * Empty slots are not displayed. The button applies `cw-Button-disabled` while disabled and the
+ * `cw-Button-{hover,focus,press}` interaction classes.
+ *
+ * @param props - component properties
+ * @returns rendered component elements
+ */
+export declare const Button: InteractableComponent<ButtonProps>;
+/**
+ * Material 3 toggle button.
+ *
+ * Toggle buttons are common buttons with a selected state, exposed through `aria-pressed`.
+ * Supplying `checked` makes the state controlled; omitting it keeps an internal state initialized
+ * from `defaultChecked`. A round toggle becomes square when selected and a square toggle round,
+ * with the fast spatial spring; colors follow the unselected and selected roles of its variant.
+ * The toggle applies `cw-Button-toggle`, and `cw-Button-checked` while selected. A toggle button
+ * is never a link: its selected state is not a destination, so it accepts no `href`.
+ *
+ * @param props - component properties
+ * @returns rendered component elements
+ */
+export declare function ToggleButton(props: InteractableProps<ToggleButtonProps>): JSX.Element;

package/target/tsc/action/fab-menu-context.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Menu linkage shared by a floating-action-button menu with its trigger.
+ */
+export interface FABMenuTriggerContextValue {
+    /**
+     * Id of the menu items region the trigger controls.
+     */
+    readonly itemsId: string;
+    /**
+     * Menu is open, when the trigger factory runs.
+     *
+     * @remarks
+     * This is **not** reactive. The menu itself keeps the linkage of the trigger control current.
+     */
+    readonly open: boolean;
+}

package/target/tsc/action/fab-menu.d.ts

@@ -0,0 +1,112 @@
+import type { JSX } from "solid-js";
+import type { DomComponent, DomProps } from "..";
+import type { InteractableProps } from "../state";
+import type { ActionToggleProps } from "./base";
+import type { FABProps } from "./fab";
+import type { FABMenuTriggerContextValue } from "./fab-menu-context";
+import { FAB } from "./fab";
+import "./action.css";
+/**
+ * Render function of a floating-action-button menu trigger.
+ *
+ * @param context - menu linkage
+ * @returns focusable menu trigger
+ */
+export type FABMenuTriggerFactory = (context: FABMenuTriggerContextValue) => JSX.Element;
+/**
+ * Floating-action-button menu properties.
+ */
+export type FABMenuProps = DomProps<HTMLDivElement, JSX.HTMLAttributes<HTMLDivElement>> & {
+    /**
+     * Current controlled open state.
+     *
+     * Supplying this property, including `undefined`, selects controlled mode at construction.
+     * Update it from {@link FABMenuProps.onOpenChange} to accept a requested state.
+     */
+    open?: boolean | undefined;
+    /**
+     * Initial open state when {@link FABMenuProps.open} is omitted.
+     *
+     * @defaultValue `false`
+     * @remarks
+     * Read once at construction.
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Request a new open state, after trigger activation, item activation, Escape, ArrowDown on the
+     * trigger, or a pointer press outside the menu.
+     *
+     * Runs for controlled and uncontrolled menus, after uncontrolled state is applied.
+     *
+     * @param open - requested open state
+     */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Menu trigger factory, evaluated with the menu linkage in scope.
+     *
+     * The factory must return exactly one focusable control, normally a {@link FABMenuTrigger};
+     * text, several controls, and controls removed from the sequential focus order receive no menu
+     * linkage. The factory runs again when a signal it reads changes, replacing the trigger.
+     */
+    trigger: FABMenuTriggerFactory;
+};
+/**
+ * Floating-action-button menu item properties.
+ */
+export type FABMenuItemProps = Omit<FABProps, keyof ActionToggleProps | "expanded" | "extended" | "lowered" | "size" | "toggle">;
+/**
+ * Floating-action-button menu trigger properties.
+ */
+export type FABMenuTriggerProps = FABProps;
+/**
+ * Material 3 floating-action-button menu.
+ *
+ * A FAB menu opens a column of menu items above its trigger, normally a {@link FABMenuTrigger}.
+ * The trigger factory renders the trigger; the menu links its control to the items with
+ * `aria-controls` and `aria-expanded`, unless the author changes those attributes. Activating the
+ * trigger toggles the menu. ArrowDown on the trigger opens it and focuses the top item; Escape, an
+ * activated item, or a pointer press outside the menu closes it. Focus returns to the trigger when
+ * it was lost or rested within the menu, except after an outside press.
+ *
+ * Opening, the trigger FAB morphs into the close button and items reveal from their end edge,
+ * staggered from the item nearest the trigger, as in Compose; closing reverses the motion from the
+ * top item. A closed menu's items are inert.
+ *
+ * # Elements
+ *
+ * | Class                | Element                                    |
+ * | -------------------- | ------------------------------------------ |
+ * | `cw-FABMenu`         | menu root; `_cw-FABMenu-open` while open   |
+ * | `cw-FABMenu-trigger` | trigger slot                               |
+ * | `cw-FABMenu-items`   | items region, above the trigger's end edge |
+ *
+ * # Design
+ *
+ * The `fabMenu` and `closeButton` roles of [cw-Button](./button.yaml) space the menu and size the
+ * close button, and its `fabMenuItem` theme sizes {@link FABMenuItem}s.
+ *
+ * @param props - component properties
+ * @returns rendered component elements
+ */
+export declare const FABMenu: DomComponent<FABMenuProps>;
+/**
+ * Floating-action-button menu item.
+ *
+ * Items are extended floating action buttons styled as fully round menu items: 56px tall, with a
+ * leading icon and a title label, in the color of their variant (normally a container color).
+ * Each item is as wide as its icon and label, at most the width of the viewport less 16px on each
+ * side; a longer label wraps, and its item grows taller (`FloatingActionButtonMenu`). Activating
+ * an item closes its menu.
+ *
+ * @param props - component properties
+ * @returns rendered component elements
+ */
+export declare function FABMenuItem(props: InteractableProps<FABMenuItemProps>): JSX.Element;
+/**
+ * Floating-action-button menu trigger.
+ *
+ * This is a {@link FAB}; inside the trigger slot of an open {@link FABMenu} it morphs into the
+ * close button, with the selected colors of its variant. Swap its icon for a close icon from the
+ * menu's open state.
+ */
+export declare const FABMenuTrigger: typeof FAB;

package/target/tsc/action/fab.d.ts

@@ -0,0 +1,98 @@
+import type { JSX } from "solid-js";
+import type { InteractableComponent } from "../state";
+import type { BaseActionButtonProps } from "./base";
+/**
+ * Floating-action-button color variants.
+ *
+ * | Variant                            | Container              | Content                |
+ * | ---------------------------------- | ---------------------- | ---------------------- |
+ * | `primary`, `primary-container`     | primary container      | on primary container   |
+ * | `secondary`, `secondary-container` | secondary container    | on secondary container |
+ * | `tertiary`, `tertiary-container`   | tertiary container     | on tertiary container  |
+ * | `primary-filled`                   | primary                | on primary             |
+ * | `secondary-filled`                 | secondary              | on secondary           |
+ * | `tertiary-filled`                  | tertiary               | on tertiary            |
+ * | `surface`                          | surface container high | primary                |
+ */
+export type FABVariant = "primary" | "primary-container" | "primary-filled" | "secondary" | "secondary-container" | "secondary-filled" | "surface" | "tertiary" | "tertiary-container" | "tertiary-filled";
+/**
+ * Floating-action-button sizes beside the baseline 56px FAB. Material 3 Expressive deprecates the
+ * small FAB.
+ */
+export type FABSize = "large" | "medium" | "small";
+/**
+ * Floating-action-button properties.
+ */
+export type FABProps = BaseActionButtonProps & {
+    /**
+     * Floating-action-button color variant.
+     *
+     * @defaultValue `"primary"`
+     */
+    variant?: FABVariant | undefined;
+    /**
+     * Floating-action-button size, or `undefined` for the baseline FAB. An extended small FAB is
+     * 56px tall.
+     */
+    size?: FABSize | undefined;
+    /**
+     * Render an extended FAB, which shows its label beside the icon.
+     *
+     * A FAB which is not extended shows only its icon; its label remains its accessible name.
+     *
+     * @defaultValue `false`
+     */
+    extended?: boolean | undefined;
+    /**
+     * Extended FAB shows its label. Collapsing an extended FAB animates it to the icon-only FAB of
+     * the same height, keeping the label as the accessible name.
+     *
+     * @defaultValue `true`
+     */
+    expanded?: boolean | undefined;
+    /**
+     * Use the lowered elevation, for a FAB on a surface which does not need emphasis.
+     *
+     * @defaultValue `false`
+     */
+    lowered?: boolean | undefined;
+    /**
+     * Icon content.
+     */
+    leadingIcon?: JSX.Element;
+};
+/**
+ * Material 3 floating action button (FAB).
+ *
+ * FABs are native buttons for the primary action of a screen. They come in the baseline, medium,
+ * and large sizes (and the deprecated small size), in container and filled colors, and as extended
+ * FABs which show a label beside the icon. An extended FAB collapses to the icon-only FAB of the
+ * same height when `expanded` is `false`, animating its width with a spatial spring and its label
+ * opacity with an effects spring, as Compose does for each size.
+ *
+ * A toggle FAB (`toggle`), Compose's `ToggleFloatingActionButton`, morphs while selected into the
+ * fully round 56px close button of a FAB menu, with the selected colors, at the top-end corner of
+ * its unchanged layout box; a {@link ./fab-menu#FABMenuTrigger} morphs likewise while its menu is
+ * open. The state is exposed through `aria-pressed`, with the controlled and uncontrolled contract
+ * of {@link ./button#ToggleButton}.
+ *
+ * # Design
+ *
+ * The [cw-Button](./button.yaml) attribute sizes the FAB through its `fab*` themes, and the
+ * [cw-Action](./action.yaml) attribute colors it and sets its elevation.
+ *
+ * # Elements
+ *
+ * | Class          | Element                                   |
+ * | -------------- | ----------------------------------------- |
+ * | `cw-FAB`       | native button                             |
+ * | `cw-FAB-icon`  | icon slot                                 |
+ * | `cw-FAB-label` | label slot, shown only by an expanded FAB |
+ *
+ * The button applies `cw-FAB-disabled` while disabled and the `cw-FAB-{hover,focus,press}`
+ * interaction classes.
+ *
+ * @param props - component properties
+ * @returns rendered component elements
+ */
+export declare const FAB: InteractableComponent<FABProps>;