@smwb/ui-solid 1.0.0 → 2.1.0

package/dist/components/inputs/button/button.js

@@ -1,30 +1,35 @@
-import { createComponent as n, use as b, spread as h, mergeProps as l, insert as w, template as $, memo as v } from "solid-js/web";
+import { createComponent as o, use as w, spread as y, mergeProps as m, insert as O, template as P, memo as _ } from "solid-js/web";
 import '../../../assets/styles/less/components/button/button.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { mergeProps as k, splitProps as D, children as z, Show as s } from "solid-js";
-import W from "clsx";
-import { mergeRefs as P } from "../../../primitives/mergeRefs.js";
-import { useButtonGroup as C } from "../buttonGroups/buttonGroupContext.js";
-import { callHandler as B } from "../../../primitives/callHandler.js";
-import { resolveLinkRel as L, resolveLinkTarget as x } from "../../../utils/linkAttrs.js";
-import { Ripple as A } from "../../base/ripple/ripple.js";
-import { Icon as E } from "../../base/icon/icon.js";
-var G = /* @__PURE__ */ $("<a>"), H = /* @__PURE__ */ $("<button>");
-function U(_) {
-  const t = C(), R = k({
+import { mergeProps as L, splitProps as D, children as R, Show as u } from "solid-js";
+import T from "clsx";
+import { mergeRefs as v } from "../../../primitives/mergeRefs.js";
+import { useButtonGroup as k } from "../buttonGroups/buttonGroupContext.js";
+import { callHandler as z } from "../../../primitives/callHandler.js";
+import { resolveLinkRel as B, resolveLinkTarget as E } from "../../../utils/linkAttrs.js";
+import { Ripple as W } from "../../base/ripple/ripple.js";
+import { Icon as Y } from "../../base/icon/icon.js";
+var q = /* @__PURE__ */ P("<a>"), A = /* @__PURE__ */ P("<button>");
+const x = "`iconOnly` has no text, so it needs an `aria-label` (or `aria-labelledby`) to be named.", H = "`iconOnly` is a square for one icon: a `label` is clipped. Drop it and name the button with `aria-label`.", S = "`iconOnly` is a square for one icon: children are clipped. Drop them and name the button with `aria-label`.", G = "`iconOnly` without an `icon` draws an empty square.", N = /* @__PURE__ */ new Set();
+function a(i, r) {
+  N.has(i) || (N.add(i), console.warn(`[smwb] Button: ${r}`));
+}
+function te(i) {
+  const r = k(), $ = L({
     get variant() {
-      return t?.variant ?? "contained";
+      return r?.variant ?? "contained";
     },
     get size() {
-      return t?.size ?? "medium";
+      return r?.size ?? "medium";
     },
     get colorTheme() {
-      return t?.colorTheme ?? "primary";
+      return r?.colorTheme ?? "primary";
     }
-  }, _), [e, a] = D(R, [
+  }, i), [e, l] = D($, [
     "label",
     "variant",
     "icon",
+    "iconOnly",
     "iconProps",
     "href",
     "target",
@@ -42,85 +47,86 @@ function U(_) {
     "color",
     "ref",
     "data-testid"
-  ]), c = () => x(e.target), m = () => e.color ?? t?.color ?? e.colorTheme, i = () => e.disabled ?? t?.disabled, y = () => e.fullWidth ?? t?.fullWidth;
-  let p;
-  const u = () => W("smwb-button", `smwb-${e.variant}`, `smwb-${e.size}`, m() === "primary" ? "smwb-primary" : `smwb-button_color-${m()}`, t && "smwb-button-group__grouped", e.class, {
-    "smwb-disabled": i(),
-    "smwb-full-width": y()
-  }), d = (r) => {
-    B(e.onPointerDown, r), i() || p?.onRipple(r);
-  }, f = z(() => e.icon), T = () => {
-    const r = f();
-    return typeof r == "string" ? n(E, l(() => e.iconProps ?? {}, {
-      name: r
-    })) : r;
-  }, g = () => [n(s, {
+  ]), d = () => E(e.target), p = () => e.color ?? r?.color ?? e.colorTheme, s = () => e.disabled ?? r?.disabled, C = () => e.fullWidth ?? r?.fullWidth;
+  let f;
+  const b = () => T("smwb-button", `smwb-${e.variant}`, `smwb-${e.size}`, p() === "primary" ? "smwb-primary" : `smwb-button_color-${p()}`, r && "smwb-button-group__grouped", e.class, {
+    "smwb-disabled": s(),
+    "smwb-full-width": C(),
+    "smwb-button_icon-only": e.iconOnly
+  }), h = (t) => {
+    z(e.onPointerDown, t), s() || f?.onRipple(t);
+  }, c = R(() => e.icon), I = () => {
+    const t = c();
+    return typeof t == "string" ? o(Y, m(() => e.iconProps ?? {}, {
+      name: t
+    })) : t;
+  }, g = () => [o(u, {
     get when() {
-      return f();
+      return c();
     },
     get children() {
-      return T();
+      return I();
     }
-  }), v(() => v(() => !!e.label)() ? e.label : e.children), n(s, {
+  }), _(() => _(() => !!e.label)() ? e.label : e.children), o(u, {
     get when() {
       return !e.disableRipple;
     },
     get children() {
-      return n(A, {
-        actionRef: (r) => p = r,
+      return o(W, {
+        actionRef: (t) => f = t,
         get center() {
           return e.rippleCenter;
         }
       });
     }
   })];
-  return n(s, {
+  return e.iconOnly && (!l["aria-label"] && !l["aria-labelledby"] && a("name", x), e.label ? a("label", H) : "children" in e && a("children", S), c() || a("icon", G)), o(u, {
     get when() {
       return e.href;
     },
     get fallback() {
       return (() => {
-        var r = H(), o = P(e.ref);
-        return typeof o == "function" && b(o, r), h(r, l({
+        var t = A(), n = v(e.ref);
+        return typeof n == "function" && w(n, t), y(t, m({
           get "data-testid"() {
             return e["data-testid"] ?? "button";
           }
-        }, a, {
+        }, l, {
           get class() {
-            return u();
+            return b();
           },
-          onPointerDown: d,
+          onPointerDown: h,
           get disabled() {
-            return !!i();
+            return !!s();
           }
-        }), !1, !0), w(r, g), r;
+        }), !1, !0), O(t, g), t;
       })();
     },
     get children() {
-      var r = G(), o = P(e.ref);
-      return typeof o == "function" && b(o, r), h(r, l({
+      var t = q(), n = v(e.ref);
+      return typeof n == "function" && w(n, t), y(t, m({
         get "data-testid"() {
           return e["data-testid"] ?? "button-link";
         }
-      }, a, {
+      }, l, {
         get class() {
-          return u();
+          return b();
         },
         get href() {
           return e.href;
         },
         get target() {
-          return c();
+          return d();
         },
         get rel() {
-          return L(e.rel, c());
+          return B(e.rel, d());
         },
-        onPointerDown: d
-      }), !1, !0), w(r, g), r;
+        onPointerDown: h
+      }), !1, !0), O(t, g), t;
     }
   });
 }
 export {
-  U as Button
+  te as Button
 };
 //# sourceMappingURL=button.js.map

package/dist/components/inputs/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon, type IconProps } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { useButtonGroup } from \"../buttonGroups/buttonGroupContext\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /** Button text. */\n  label?: string;\n  /** Visual style of the button. */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  /** Button size. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Icon as an element (e.g. <Icon/>) or a string (icon name / url / base64). */\n  icon?: JSX.Element | string;\n  /** Props forwarded to the <Icon/> when `icon` is a string. */\n  iconProps?: Omit<IconProps, \"name\">;\n  /** @deprecated use `color`. Kept for backward compatibility. */\n  colorTheme?: \"primary\";\n  /** Semantic color, resolved through `--smwb-*Color*` tokens. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** When set, the component renders as an <a>. */\n  href?: string;\n  /**\n   * Where a link (with `href`) opens. By default `\"_blank\"`: a new tab. `null` leaves the `target`\n   * attribute out, so the link opens in place, like an internal one; an empty string does the same, and\n   * any other string is used as is.\n   */\n  target?: string | null | undefined;\n  /**\n   * The `rel` of a link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or\n   * window, and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\n   * if you still want it; an empty string drops the attribute.\n   */\n  rel?: string | undefined;\n  disabled?: boolean;\n  type?: \"button\" | \"submit\" | \"reset\";\n  /** Stretch to the full width of the container. */\n  fullWidth?: boolean;\n  /** Center the ripple effect. */\n  rippleCenter?: boolean;\n  /** Disable the ripple effect. */\n  disableRipple?: boolean;\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Button(props: ParentProps<ButtonProps>): JSX.Element {\n  const group = useButtonGroup();\n  const merged = mergeProps(\n    {\n      get variant(): NonNullable<ButtonProps[\"variant\"]> {\n        return group?.variant ?? \"contained\";\n      },\n      get size(): NonNullable<ButtonProps[\"size\"]> {\n        return group?.size ?? \"medium\";\n      },\n      get colorTheme(): NonNullable<ButtonProps[\"colorTheme\"]> {\n        return group?.colorTheme ?? \"primary\";\n      },\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"variant\",\n    \"icon\",\n    \"iconProps\",\n    \"href\",\n    \"target\",\n    \"rel\",\n    \"class\",\n    \"disabled\",\n    \"children\",\n    \"fullWidth\",\n    \"rippleCenter\",\n    \"disableRipple\",\n    // The button sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"size\",\n    \"colorTheme\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const linkTarget = (): string | undefined => resolveLinkTarget(local.target);\n  const color = (): string => local.color ?? group?.color ?? local.colorTheme;\n  const disabled = (): boolean | undefined => local.disabled ?? group?.disabled;\n  const fullWidth = (): boolean | undefined => local.fullWidth ?? group?.fullWidth;\n  let rippleActions: RippleActionsRef | undefined;\n\n  const classes = (): string =>\n    cn(\n      \"smwb-button\",\n      `smwb-${local.variant}`,\n      `smwb-${local.size}`,\n      color() === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color()}`,\n      group && \"smwb-button-group__grouped\",\n      local.class,\n      {\n        \"smwb-disabled\": disabled(),\n        \"smwb-full-width\": fullWidth(),\n      }\n    );\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!disabled()) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const iconElement = (): JSX.Element => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? <Icon {...(local.iconProps ?? {})} name={resolved} /> : resolved;\n  };\n\n  const content = (): JSX.Element => (\n    <>\n      <Show when={icon()}>{iconElement()}</Show>\n      {local.label ? local.label : local.children}\n      <Show when={!local.disableRipple}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center={local.rippleCenter} />\n      </Show>\n    </>\n  );\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <button\n          data-testid={local[\"data-testid\"] ?? \"button\"}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          class={classes()}\n          onPointerDown={onPointerDown}\n          disabled={!!disabled()}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        data-testid={local[\"data-testid\"] ?? \"button-link\"}\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        href={local.href}\n        target={linkTarget()}\n        rel={resolveLinkRel(local.rel, linkTarget())}\n        onPointerDown={onPointerDown}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Button;\n"],"names":["Button","props","group","useButtonGroup","merged","mergeProps","variant","size","colorTheme","local","rest","splitProps","linkTarget","resolveLinkTarget","target","color","disabled","fullWidth","rippleActions","classes","cn","class","onPointerDown","event","callHandler","onRipple","icon","children","iconElement","resolved","_$createComponent","Icon","_$mergeProps","iconProps","name","content","Show","when","_$memo","label","disableRipple","Ripple","actionRef","actions","center","rippleCenter","href","fallback","_el$2","_tmpl$2","_ref$2","mergeRefs","ref","_$use","_$spread","_$insert","_el$","_tmpl$","_ref$","rel","resolveLinkRel"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon, type IconProps } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { useButtonGroup } from \"../buttonGroups/buttonGroupContext\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /** Button text. */\n  label?: string;\n  /** Visual style of the button. */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  /** Button size. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Icon as an element (e.g. <Icon/>) or a string (icon name / url / base64). */\n  icon?: JSX.Element | string;\n  /**\n   * Icon-only button: a square of its size's control height (`--smui-control-h-sm/md/lg`), with no\n   * `min-width` and no padding. Works for every `variant` and for a link (`href`). It has no text, so its\n   * name comes from `aria-label` (or `aria-labelledby`); without one the component warns in the console.\n   * Apart from `fullWidth`: a square does not stretch.\n   */\n  iconOnly?: boolean;\n  /** Props forwarded to the <Icon/> when `icon` is a string. */\n  iconProps?: Omit<IconProps, \"name\">;\n  /** @deprecated use `color`. Kept for backward compatibility. */\n  colorTheme?: \"primary\";\n  /** Semantic color, resolved through `--smwb-*Color*` tokens. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** When set, the component renders as an <a>. */\n  href?: string;\n  /**\n   * Where a link (with `href`) opens. By default `\"_blank\"`: a new tab. `null` leaves the `target`\n   * attribute out, so the link opens in place, like an internal one; an empty string does the same, and\n   * any other string is used as is.\n   */\n  target?: string | null | undefined;\n  /**\n   * The `rel` of a link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or\n   * window, and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\n   * if you still want it; an empty string drops the attribute.\n   */\n  rel?: string | undefined;\n  disabled?: boolean;\n  type?: \"button\" | \"submit\" | \"reset\";\n  /** Stretch to the full width of the container. */\n  fullWidth?: boolean;\n  /** Center the ripple effect. */\n  rippleCenter?: boolean;\n  /** Disable the ripple effect. */\n  disableRipple?: boolean;\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nconst ICON_ONLY_NAME = \"`iconOnly` has no text, so it needs an `aria-label` (or `aria-labelledby`) to be named.\";\nconst ICON_ONLY_LABEL =\n  \"`iconOnly` is a square for one icon: a `label` is clipped. Drop it and name the button with `aria-label`.\";\nconst ICON_ONLY_CHILDREN =\n  \"`iconOnly` is a square for one icon: children are clipped. Drop them and name the button with `aria-label`.\";\nconst ICON_ONLY_ICON = \"`iconOnly` without an `icon` draws an empty square.\";\n\nconst warnedIconOnly = new Set<string>();\n\n// Warns unconditionally, once per kind of mistake, like the rest of ui-solid (icon.tsx).\nfunction warnIconOnly(kind: \"name\" | \"label\" | \"children\" | \"icon\", message: string): void {\n  if (warnedIconOnly.has(kind)) return;\n  warnedIconOnly.add(kind);\n  console.warn(`[smwb] Button: ${message}`);\n}\n\nexport function Button(props: ParentProps<ButtonProps>): JSX.Element {\n  const group = useButtonGroup();\n  const merged = mergeProps(\n    {\n      get variant(): NonNullable<ButtonProps[\"variant\"]> {\n        return group?.variant ?? \"contained\";\n      },\n      get size(): NonNullable<ButtonProps[\"size\"]> {\n        return group?.size ?? \"medium\";\n      },\n      get colorTheme(): NonNullable<ButtonProps[\"colorTheme\"]> {\n        return group?.colorTheme ?? \"primary\";\n      },\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"variant\",\n    \"icon\",\n    \"iconOnly\",\n    \"iconProps\",\n    \"href\",\n    \"target\",\n    \"rel\",\n    \"class\",\n    \"disabled\",\n    \"children\",\n    \"fullWidth\",\n    \"rippleCenter\",\n    \"disableRipple\",\n    // The button sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"size\",\n    \"colorTheme\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const linkTarget = (): string | undefined => resolveLinkTarget(local.target);\n  const color = (): string => local.color ?? group?.color ?? local.colorTheme;\n  const disabled = (): boolean | undefined => local.disabled ?? group?.disabled;\n  const fullWidth = (): boolean | undefined => local.fullWidth ?? group?.fullWidth;\n  let rippleActions: RippleActionsRef | undefined;\n\n  const classes = (): string =>\n    cn(\n      \"smwb-button\",\n      `smwb-${local.variant}`,\n      `smwb-${local.size}`,\n      color() === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color()}`,\n      group && \"smwb-button-group__grouped\",\n      local.class,\n      {\n        \"smwb-disabled\": disabled(),\n        \"smwb-full-width\": fullWidth(),\n        \"smwb-button_icon-only\": local.iconOnly,\n      }\n    );\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!disabled()) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const iconElement = (): JSX.Element => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? <Icon {...(local.iconProps ?? {})} name={resolved} /> : resolved;\n  };\n\n  const content = (): JSX.Element => (\n    <>\n      <Show when={icon()}>{iconElement()}</Show>\n      {local.label ? local.label : local.children}\n      <Show when={!local.disableRipple}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center={local.rippleCenter} />\n      </Show>\n    </>\n  );\n\n  // Checked once, here: `children` is only looked up by key, because reading it would create its nodes.\n  if (local.iconOnly) {\n    if (!rest[\"aria-label\"] && !rest[\"aria-labelledby\"]) {\n      warnIconOnly(\"name\", ICON_ONLY_NAME);\n    }\n    if (local.label) {\n      warnIconOnly(\"label\", ICON_ONLY_LABEL);\n    } else if (\"children\" in local) {\n      warnIconOnly(\"children\", ICON_ONLY_CHILDREN);\n    }\n    if (!icon()) {\n      warnIconOnly(\"icon\", ICON_ONLY_ICON);\n    }\n  }\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <button\n          data-testid={local[\"data-testid\"] ?? \"button\"}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          class={classes()}\n          onPointerDown={onPointerDown}\n          disabled={!!disabled()}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        data-testid={local[\"data-testid\"] ?? \"button-link\"}\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        href={local.href}\n        target={linkTarget()}\n        rel={resolveLinkRel(local.rel, linkTarget())}\n        onPointerDown={onPointerDown}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Button;\n"],"names":["ICON_ONLY_NAME","ICON_ONLY_LABEL","ICON_ONLY_CHILDREN","ICON_ONLY_ICON","warnedIconOnly","Set","warnIconOnly","kind","message","has","add","console","warn","Button","props","group","useButtonGroup","merged","mergeProps","variant","size","colorTheme","local","rest","splitProps","linkTarget","resolveLinkTarget","target","color","disabled","fullWidth","rippleActions","classes","cn","class","iconOnly","onPointerDown","event","callHandler","onRipple","icon","children","iconElement","resolved","_$createComponent","Icon","_$mergeProps","iconProps","name","content","Show","when","_$memo","label","disableRipple","Ripple","actionRef","actions","center","rippleCenter","href","fallback","_el$2","_tmpl$2","_ref$2","mergeRefs","ref","_$use","_$spread","_$insert","_el$","_tmpl$","_ref$","rel","resolveLinkRel"],"mappings":"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"}

package/dist/components/inputs/toggle/toggle.d.ts

@@ -19,6 +19,12 @@ export interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputEleme
     onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;
     helperText?: JSX.Element;
     error?: boolean;
+    /**
+     * A compact look for a status row or a toolbar: the label shares the line with the switch ("top", the default,
+     * counts as "left"), no line is kept for helper text unless `helperText` is set, and the row is the theme's small
+     * control height, at most 28px. The default look is unchanged.
+     */
+    compact?: boolean;
     ref?: Ref<HTMLInputElement>;
 }
 export declare function Toggle(props: ToggleProps): JSX.Element;

package/dist/components/inputs/toggle/toggle.js

@@ -1,28 +1,28 @@
-import { createComponent as g, insert as m, setAttribute as b, use as k, spread as v, mergeProps as x, effect as C, className as p, template as h } from "solid-js/web";
+import { createComponent as m, insert as g, setAttribute as b, use as k, spread as x, mergeProps as v, effect as C, className as p, memo as $, template as h } from "solid-js/web";
 import '../../../assets/styles/less/components/toggle/toggle.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { mergeProps as $, splitProps as T, Show as P } from "solid-js";
+import { mergeProps as T, splitProps as P, Show as O } from "solid-js";
 import u from "clsx";
-import { TextFieldWrapper as O } from "../textField/textFieldWrapper.js";
-import { createHelperText as q } from "../../../primitives/createHelperText.js";
-import { createId as z } from "../../../primitives/createId.js";
-import { mergeRefs as B } from "../../../primitives/mergeRefs.js";
-import { callHandler as H } from "../../../primitives/callHandler.js";
-var I = /* @__PURE__ */ h("<label class=smwb-toggle__label>"), A = /* @__PURE__ */ h("<span><label><input type=checkbox class=smwb-toggle__checkbox role=switch><span class=smwb-toggle__track></span><span class=smwb-toggle__thumb>");
-function K(i) {
-  const f = $({
+import { TextFieldWrapper as q } from "../textField/textFieldWrapper.js";
+import { createHelperText as z } from "../../../primitives/createHelperText.js";
+import { createId as B } from "../../../primitives/createId.js";
+import { mergeRefs as H } from "../../../primitives/mergeRefs.js";
+import { callHandler as I } from "../../../primitives/callHandler.js";
+var A = /* @__PURE__ */ h("<label class=smwb-toggle__label>"), D = /* @__PURE__ */ h("<span><label><input type=checkbox class=smwb-toggle__checkbox role=switch><span class=smwb-toggle__track></span><span class=smwb-toggle__thumb>");
+function L(i) {
+  const f = T({
     size: "medium",
     color: "primary"
-  }, i), [e, _] = T(f, ["disabled", "readOnly", "onClick", "required", "checked", "class", "id", "label", "labelPlacement", "size", "color", "helperText", "error", "onChange", "aria-describedby", "ref"]), s = z(e.id), l = q(() => e.helperText, {
+  }, i), [e, _] = P(f, ["disabled", "readOnly", "onClick", "required", "checked", "class", "id", "label", "labelPlacement", "size", "color", "helperText", "error", "compact", "onChange", "aria-describedby", "ref"]), s = B(e.id), l = z(() => e.helperText, {
     describedBy: () => e["aria-describedby"]
   }), w = (r) => {
-    H(e.onClick, r), e.readOnly && r.preventDefault();
+    I(e.onClick, r), e.readOnly && r.preventDefault();
   }, y = (r) => {
     e.readOnly || e.onChange?.(r, r.currentTarget.checked, i);
   };
-  return g(O, {
+  return m(q, {
     get helperText() {
-      return l.text();
+      return $(() => !!(e.compact && !l.text()))() ? null : l.text();
     },
     get helperTextId() {
       return l.id;
@@ -35,18 +35,18 @@ function K(i) {
     },
     class: "smwb-text-field-checkbox",
     get children() {
-      var r = A(), a = r.firstChild, o = a.firstChild;
-      m(r, g(P, {
+      var r = D(), a = r.firstChild, o = a.firstChild;
+      g(r, m(O, {
         get when() {
           return e.label;
         },
         get children() {
-          var t = I();
-          return b(t, "for", s), m(t, () => e.label), t;
+          var t = A();
+          return b(t, "for", s), g(t, () => e.label), t;
         }
       }), a);
-      var d = B(e.ref);
-      return typeof d == "function" && k(d, o), b(o, "id", s), v(o, x({
+      var c = H(e.ref);
+      return typeof c == "function" && k(c, o), b(o, "id", s), x(o, v({
         get "aria-checked"() {
           return e.checked;
         },
@@ -78,11 +78,11 @@ function K(i) {
         onChange: y,
         onClick: w
       }), !1, !1), C((t) => {
-        var n = u("smwb-toggle__wrapper", e.labelPlacement && `smwb-toggle__wrapper_label-${e.labelPlacement}`), c = u("smwb-toggle", `smwb-toggle_size-${e.size}`, `smwb-toggle_color-${e.color}`, e.class, {
+        var d = u("smwb-toggle__wrapper", e.labelPlacement && `smwb-toggle__wrapper_label-${e.labelPlacement}`, e.compact && "smwb-toggle__wrapper_compact"), n = u("smwb-toggle", `smwb-toggle_size-${e.size}`, `smwb-toggle_color-${e.color}`, e.class, {
           "smwb-disabled": e.disabled,
           "smwb-readonly": e.readOnly
         });
-        return n !== t.e && p(r, t.e = n), c !== t.t && p(a, t.t = c), t;
+        return d !== t.e && p(r, t.e = d), n !== t.t && p(a, t.t = n), t;
       }, {
         e: void 0,
         t: void 0
@@ -91,6 +91,6 @@ function K(i) {
   });
 }
 export {
-  K as Toggle
+  L as Toggle
 };
 //# sourceMappingURL=toggle.js.map

package/dist/components/inputs/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createHelperText } from \"../../../primitives/createHelperText\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  /**\n   * Keeps the switch as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.\n   * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"disabled\",\n    \"readOnly\",\n    \"onClick\",\n    \"required\",\n    \"checked\",\n    \"class\",\n    \"id\",\n    \"label\",\n    \"labelPlacement\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"aria-describedby\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n  const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\n\n  // `readonly` means nothing to a checkbox input: a click on it or on its label, and Space, still\n  // toggle it. Cancel the click; the browser then puts the previous state back.\n  const handleClick: JSX.EventHandler<HTMLInputElement, MouseEvent> = (event) => {\n    callHandler(local.onClick, event);\n    if (local.readOnly) event.preventDefault();\n  };\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={helper.text()}\n      helperTextId={helper.id}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <span class={cn(\"smwb-toggle__wrapper\", local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`)}>\n        <Show when={local.label}>\n          <label for={id} class=\"smwb-toggle__label\">\n            {local.label}\n          </label>\n        </Show>\n        <label\n          class={cn(\"smwb-toggle\", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            class=\"smwb-toggle__checkbox\"\n            aria-checked={local.checked}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            aria-describedby={helper.describedBy()}\n            role=\"switch\"\n            checked={local.checked}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            aria-readonly={local.readOnly || undefined}\n            onChange={handleChange}\n            onClick={handleClick}\n          />\n          <span class=\"smwb-toggle__track\" />\n          <span class=\"smwb-toggle__thumb\" />\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Toggle;\n"],"names":["Toggle","props","merged","mergeProps","size","color","local","args","splitProps","id","createId","helper","createHelperText","helperText","describedBy","handleClick","event","callHandler","onClick","readOnly","preventDefault","handleChange","onChange","currentTarget","checked","_$createComponent","TextFieldWrapper","text","helperTextId","disabled","error","children","_el$","_tmpl$2","_el$3","firstChild","_el$4","_$insert","Show","when","label","_el$2","_tmpl$","_$setAttribute","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","undefined","required","readonly","_$effect","_p$","_v$","cn","labelPlacement","_v$2","class","e","_$className","t"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createHelperText } from \"../../../primitives/createHelperText\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  /**\n   * Keeps the switch as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.\n   * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  /**\n   * A compact look for a status row or a toolbar: the label shares the line with the switch (\"top\", the default,\n   * counts as \"left\"), no line is kept for helper text unless `helperText` is set, and the row is the theme's small\n   * control height, at most 28px. The default look is unchanged.\n   */\n  compact?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"disabled\",\n    \"readOnly\",\n    \"onClick\",\n    \"required\",\n    \"checked\",\n    \"class\",\n    \"id\",\n    \"label\",\n    \"labelPlacement\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"compact\",\n    \"onChange\",\n    \"aria-describedby\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n  const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\n\n  // `readonly` means nothing to a checkbox input: a click on it or on its label, and Space, still\n  // toggle it. Cancel the click; the browser then puts the previous state back.\n  const handleClick: JSX.EventHandler<HTMLInputElement, MouseEvent> = (event) => {\n    callHandler(local.onClick, event);\n    if (local.readOnly) event.preventDefault();\n  };\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.compact && !helper.text() ? null : helper.text()}\n      helperTextId={helper.id}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <span\n        class={cn(\n          \"smwb-toggle__wrapper\",\n          local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`,\n          local.compact && \"smwb-toggle__wrapper_compact\"\n        )}\n      >\n        <Show when={local.label}>\n          <label for={id} class=\"smwb-toggle__label\">\n            {local.label}\n          </label>\n        </Show>\n        <label\n          class={cn(\"smwb-toggle\", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            class=\"smwb-toggle__checkbox\"\n            aria-checked={local.checked}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            aria-describedby={helper.describedBy()}\n            role=\"switch\"\n            checked={local.checked}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            aria-readonly={local.readOnly || undefined}\n            onChange={handleChange}\n            onClick={handleClick}\n          />\n          <span class=\"smwb-toggle__track\" />\n          <span class=\"smwb-toggle__thumb\" />\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Toggle;\n"],"names":["Toggle","props","merged","mergeProps","size","color","local","args","splitProps","id","createId","helper","createHelperText","helperText","describedBy","handleClick","event","callHandler","onClick","readOnly","preventDefault","handleChange","onChange","currentTarget","checked","_$createComponent","TextFieldWrapper","_$memo","compact","text","helperTextId","disabled","error","children","_el$","_tmpl$2","_el$3","firstChild","_el$4","_$insert","Show","when","label","_el$2","_tmpl$","_$setAttribute","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","undefined","required","readonly","_$effect","_p$","_v$","cn","labelPlacement","_v$2","class","e","_$className","t"],"mappings":"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"}

package/dist/components/layout/appLayout/appLayout.d.ts

@@ -23,7 +23,12 @@ export interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
     collapseToggleAriaLabel?: string;
     /** Sidebar collapsed width. */
     sidebarCollapsedWidth?: number | string;
-    /** Keep the header pinned while content scrolls. */
+    /**
+     * Keep the header pinned while content scrolls. A pinned header's height is published as `--smui-sheet-offset-top`
+     * on the document element, so a `Sheet` opens below it and leaves it visible and clickable (a `Sheet` with its own
+     * `offsetTop` ignores it). The height is taken from the top of the window, so the layout is assumed to start
+     * there; with several layouts the most recent one wins.
+     */
     stickyHeader?: boolean;
     /** Test id of the root `<div>`; `app-layout` unless given. */
     "data-testid"?: string | undefined;

package/dist/components/layout/appLayout/appLayout.js

@@ -1,80 +1,87 @@
-import { use as L, spread as P, mergeProps as x, insert as t, createComponent as o, setAttribute as c, effect as H, template as s, delegateEvents as I } from "solid-js/web";
+import { use as S, spread as L, mergeProps as P, insert as l, createComponent as o, setAttribute as u, effect as x, template as s, delegateEvents as I } from "solid-js/web";
 import '../../../assets/styles/less/components/appLayout/appLayout.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                             */
-import { mergeProps as z, splitProps as E, children as u, Show as p } from "solid-js";
-import R from "clsx";
-import { createControllableState as V } from "../../../primitives/createControllableState.js";
-import { createId as j } from "../../../primitives/createId.js";
-import { mergeRefs as q } from "../../../primitives/mergeRefs.js";
-import { mergeStyle as B } from "../../../primitives/mergeStyle.js";
-import { Icon as D } from "../../base/icon/icon.js";
-var F = /* @__PURE__ */ s("<div class=smwb-app-layout__header>"), G = /* @__PURE__ */ s("<div class=smwb-app-layout__collapse>"), J = /* @__PURE__ */ s("<aside class=smwb-app-layout__sidebar>"), K = /* @__PURE__ */ s("<div class=smwb-app-layout__footer>"), M = /* @__PURE__ */ s("<div><div class=smwb-app-layout__body><div class=smwb-app-layout__content>"), N = /* @__PURE__ */ s("<button type=button class=smwb-app-layout__collapse-btn>");
-const S = (i) => typeof i == "number" ? `${i}px` : i;
-function re(i) {
-  const k = z({
+import { mergeProps as E, splitProps as z, children as m, Show as n, createEffect as O, onCleanup as R } from "solid-js";
+import V from "clsx";
+import { createControllableState as j } from "../../../primitives/createControllableState.js";
+import { createId as q } from "../../../primitives/createId.js";
+import { mergeRefs as B } from "../../../primitives/mergeRefs.js";
+import { mergeStyle as D } from "../../../primitives/mergeStyle.js";
+import { publishHeaderOffset as F } from "../../../primitives/publishHeaderOffset.js";
+import { Icon as G } from "../../base/icon/icon.js";
+var J = /* @__PURE__ */ s("<div class=smwb-app-layout__header>"), K = /* @__PURE__ */ s("<div class=smwb-app-layout__collapse>"), M = /* @__PURE__ */ s("<aside class=smwb-app-layout__sidebar>"), N = /* @__PURE__ */ s("<div class=smwb-app-layout__footer>"), Q = /* @__PURE__ */ s("<div><div class=smwb-app-layout__body><div class=smwb-app-layout__content>"), U = /* @__PURE__ */ s("<button type=button class=smwb-app-layout__collapse-btn>");
+const k = (i) => typeof i == "number" ? `${i}px` : i;
+function de(i) {
+  const T = E({
     sidebarWidth: 260,
     defaultSidebarCollapsed: !1,
     collapsible: !1,
     collapseToggleAriaLabel: "Toggle navigation",
     sidebarCollapsedWidth: 72,
     stickyHeader: !0
-  }, i), [e, T] = E(k, ["header", "sidebar", "footer", "sidebarWidth", "sidebarCollapsed", "defaultSidebarCollapsed", "onSidebarCollapsedChange", "collapsible", "collapseToggle", "collapseToggleAriaLabel", "sidebarCollapsedWidth", "stickyHeader", "class", "style", "children", "ref", "data-testid"]), [d, W] = V({
+  }, i), [e, W] = z(T, ["header", "sidebar", "footer", "sidebarWidth", "sidebarCollapsed", "defaultSidebarCollapsed", "onSidebarCollapsedChange", "collapsible", "collapseToggle", "collapseToggleAriaLabel", "sidebarCollapsedWidth", "stickyHeader", "class", "style", "children", "ref", "data-testid"]), [d, A] = j({
     value: () => e.sidebarCollapsed,
     defaultValue: e.defaultSidebarCollapsed,
     onChange: (a) => e.onSidebarCollapsedChange?.(a)
-  }), g = j(), f = u(() => e.header), h = u(() => e.sidebar), _ = u(() => e.footer), y = u(() => e.collapsible ? e.collapseToggle : void 0), A = () => B({
-    "--smui-app-sidebar-w": d() ? S(e.sidebarCollapsedWidth) : S(e.sidebarWidth)
+  }), f = q(), h = m(() => e.header), _ = m(() => e.sidebar), y = m(() => e.footer), v = m(() => e.collapsible ? e.collapseToggle : void 0), H = () => D({
+    "--smui-app-sidebar-w": d() ? k(e.sidebarCollapsedWidth) : k(e.sidebarWidth)
   }, e.style);
   return (() => {
-    var a = M(), b = a.firstChild, m = b.firstChild, v = q(e.ref);
-    return typeof v == "function" && L(v, a), P(a, x(T, {
+    var a = Q(), b = a.firstChild, g = b.firstChild, C = B(e.ref);
+    return typeof C == "function" && S(C, a), L(a, P(W, {
       get "data-testid"() {
         return e["data-testid"] ?? "app-layout";
       },
       get class() {
-        return R("smwb-app-layout", {
+        return V("smwb-app-layout", {
           "smwb-app-layout_sticky-header": e.stickyHeader,
           "smwb-app-layout_collapsed": d()
         }, e.class);
       },
       get style() {
-        return A();
+        return H();
       }
-    }), !1, !0), t(a, o(p, {
+    }), !1, !0), l(a, o(n, {
       get when() {
-        return f();
+        return h();
       },
       get children() {
-        var l = F();
-        return t(l, f), l;
+        var t = J();
+        return S((c) => (
+          // Created with the header, so it ends with it. A header that scrolls away leaves no fixed edge for a
+          // sheet to start under.
+          O(() => {
+            e.stickyHeader && R(F(c));
+          })
+        ), t), l(t, h), t;
       }
-    }), b), t(b, o(p, {
+    }), b), l(b, o(n, {
       get when() {
-        return h();
+        return _();
       },
       get children() {
-        var l = J();
-        return c(l, "id", g), t(l, o(p, {
+        var t = M();
+        return u(t, "id", f), l(t, o(n, {
           get when() {
             return e.collapsible;
           },
           get children() {
-            var C = G();
-            return t(C, o(p, {
+            var c = K();
+            return l(c, o(n, {
               get when() {
-                return y();
+                return v();
               },
               get fallback() {
                 return (() => {
-                  var r = N();
-                  return r.$$click = () => W(!d()), c(r, "aria-controls", g), t(r, o(D, {
+                  var r = U();
+                  return r.$$click = () => A(!d()), u(r, "aria-controls", f), l(r, o(G, {
                     get name() {
                       return d() ? "chevron_right" : "chevron_left";
                     },
                     size: 20
-                  })), H((n) => {
+                  })), x((p) => {
                     var w = e.collapseToggleAriaLabel, $ = !d();
-                    return w !== n.e && c(r, "aria-label", n.e = w), $ !== n.t && c(r, "aria-expanded", n.t = $), n;
+                    return w !== p.e && u(r, "aria-label", p.e = w), $ !== p.t && u(r, "aria-expanded", p.t = $), p;
                   }, {
                     e: void 0,
                     t: void 0
@@ -82,25 +89,25 @@ function re(i) {
                 })();
               },
               get children() {
-                return y();
+                return v();
               }
-            })), C;
+            })), c;
           }
-        }), null), t(l, h, null), l;
+        }), null), l(t, _, null), t;
       }
-    }), m), t(m, () => e.children, null), t(m, o(p, {
+    }), g), l(g, () => e.children, null), l(g, o(n, {
       get when() {
-        return _();
+        return y();
       },
       get children() {
-        var l = K();
-        return t(l, _), l;
+        var t = N();
+        return l(t, y), t;
       }
     }), null), a;
   })();
 }
 I(["click"]);
 export {
-  re as AppLayout
+  de as AppLayout
 };
 //# sourceMappingURL=appLayout.js.map