@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/Switch.tsx

@@ -1,60 +1,60 @@
-// A switch (m3.material.io/components/switch, .switch in ../styles/ui.css): its name (`label`) and a line under the
-// name (`supporting`), and after them the track with its handle, all of it one <label>, so a click anywhere switches
-// it; the switch is a native <input type="checkbox" role="switch">, so Space switches it and screen readers say
-// "on"/"off". `icons`: the theme's icons in the handle, 'both' (a check when it is on, a cross when it is off) or
-// 'selected' (only the check); none without it. `checked`: on from the start, or, with `onChange` (the editor), whether
-// it is on now; `disabled`: it cannot be changed. `states`: what it is on and off ("Til", "Fra"), shown before the
-// track (.switch-state; the theme's addition to M3's switch). `hideLabel`: only screen readers say its name (a switch at
-// the end of a row that names it). Other attributes (`name`, `value`, data-…) go on the <input>, and `className` on the
-// label. An Astro component gives an element the same classes with switchClass.
-import type { ReactNode } from 'react';
-import { Svg } from '@morphemecms/cms/src/icon';
-
-export type SwitchIcons = 'both' | 'selected';
-
-/** A switch's classes: with icons in its handle, `switch-icons`. */
-export const switchClass = (icons?: SwitchIcons) => (icons ? 'switch switch-icons' : 'switch');
-
-export default function Switch({
-  label,
-  hideLabel,
-  supporting,
-  checked,
-  states,
-  icons,
-  className,
-  ...rest
-}: {
-  label: string;
-  hideLabel?: boolean;
-  supporting?: ReactNode;
-  checked?: boolean;
-  states?: [string, string];
-  icons?: SwitchIcons;
-  className?: string;
-} & Record<string, unknown>) {
-  // Changed by the editor (onChange): on as it says; else on from the start, then by the visitor.
-  const on = rest.onChange ? { checked: Boolean(checked) } : { defaultChecked: checked };
-  return (
-    <label className={[switchClass(icons), className].filter(Boolean).join(' ')}>
-      {!hideLabel && (
-        <span className="switch-text">
-          <span className="switch-label">{label}</span>
-          {supporting && <span className="switch-supporting">{supporting}</span>}
-        </span>
-      )}
-      {states && (
-        <span className="switch-state" aria-hidden="true">
-          {states[checked ? 0 : 1]}
-        </span>
-      )}
-      <span className="switch-track">
-        <input type="checkbox" role="switch" className="switch-input" aria-label={hideLabel ? label : undefined} {...on} {...rest} />
-        <span className="switch-handle">
-          {icons && <Svg name="check" size={16} className="switch-icon switch-icon-on" />}
-          {icons === 'both' && <Svg name="x" size={16} className="switch-icon switch-icon-off" />}
-        </span>
-      </span>
-    </label>
-  );
-}
+// A switch (m3.material.io/components/switch, .switch in ../styles/ui.css): its name (`label`) and a line under the
+// name (`supporting`), and after them the track with its handle, all of it one <label>, so a click anywhere switches
+// it; the switch is a native <input type="checkbox" role="switch">, so Space switches it and screen readers say
+// "on"/"off". `icons`: the theme's icons in the handle, 'both' (a check when it is on, a cross when it is off) or
+// 'selected' (only the check); none without it. `checked`: on from the start, or, with `onChange` (the editor), whether
+// it is on now; `disabled`: it cannot be changed. `states`: what it is on and off ("Til", "Fra"), shown before the
+// track (.switch-state; the theme's addition to M3's switch). `hideLabel`: only screen readers say its name (a switch at
+// the end of a row that names it). Other attributes (`name`, `value`, data-…) go on the <input>, and `className` on the
+// label. An Astro component gives an element the same classes with switchClass.
+import type { ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+
+export type SwitchIcons = 'both' | 'selected';
+
+/** A switch's classes: with icons in its handle, `switch-icons`. */
+export const switchClass = (icons?: SwitchIcons) => (icons ? 'switch switch-icons' : 'switch');
+
+export default function Switch({
+  label,
+  hideLabel,
+  supporting,
+  checked,
+  states,
+  icons,
+  className,
+  ...rest
+}: {
+  label: string;
+  hideLabel?: boolean;
+  supporting?: ReactNode;
+  checked?: boolean;
+  states?: [string, string];
+  icons?: SwitchIcons;
+  className?: string;
+} & Record<string, unknown>) {
+  // Changed by the editor (onChange): on as it says; else on from the start, then by the visitor.
+  const on = rest.onChange ? { checked: Boolean(checked) } : { defaultChecked: checked };
+  return (
+    <label className={[switchClass(icons), className].filter(Boolean).join(' ')}>
+      {!hideLabel && (
+        <span className="switch-text">
+          <span className="switch-label">{label}</span>
+          {supporting && <span className="switch-supporting">{supporting}</span>}
+        </span>
+      )}
+      {states && (
+        <span className="switch-state" aria-hidden="true">
+          {states[checked ? 0 : 1]}
+        </span>
+      )}
+      <span className="switch-track">
+        <input type="checkbox" role="switch" className="switch-input" aria-label={hideLabel ? label : undefined} {...on} {...rest} />
+        <span className="switch-handle">
+          {icons && <Svg name="check" size={16} className="switch-icon switch-icon-on" />}
+          {icons === 'both' && <Svg name="x" size={16} className="switch-icon switch-icon-off" />}
+        </span>
+      </span>
+    </label>
+  );
+}

package/theme/ui/Tabs.tsx

@@ -1,114 +1,114 @@
-// Tabs (m3.material.io/components/tabs, .tabs and .tab in ../styles/ui.css): a row of tabs (Tabs), the open one
-// `selected`. Their kind (`kind`) is Material's: `primary` (the main views under the top app bar: each tab's icon over
-// its label, or beside it with `inline`, and the indicator under the label) or `secondary` (views within a part of the
-// page: the label, evt. with its icon beside it, and the indicator under the whole tab), each with the divider under the
-// row; without a kind only the label, the open one's in its own colour (components/MobileNav.astro, the bar of
-// "Mobilmenu"). The row is scrollable (the default: swiped sideways when the tabs do not fit) or fixed (`scrollable`
-// false: the tabs share the width). A tab (Tab) has its label (`children`), evt. its icon (`icon`, its name in the
-// theme's icons, or in the editor an icon already made: the tabs of a screen) and a badge (`badge`: true for a dot, else the number it shows; the theme's Badge). With `href` it is a
-// link to a page (Link: on the site; in the editor only drawn; the open one aria-current); without it, it is a tab of a
-// tab list (`label` on Tabs, its name: a role="tablist"), a <button role="tab"> that shows its panel (`controls`, the
-// panel's id; the open one aria-selected), which tabs.script.ts does on the site. How it looks is the theme's. An Astro
-// component gives its elements the classes with tabsClass, tabsClasses and tabClass.
-import type { ReactNode } from 'react';
-import { Glyph, type IconRef } from '@morphemecms/cms/src/icon';
-import { Link } from '@morphemecms/cms/src/standard/view';
-import Badge from '@theme/ui/Badge';
-
-export type TabsKind = 'primary' | 'secondary';
-
-/** The kinds, in Material's order. */
-export const tabsKinds: TabsKind[] = ['primary', 'secondary'];
-
-/** The row's class, and a tab's. */
-export const tabsClass = 'tabs';
-export const tabClass = 'tab';
-
-/** The row's classes with its kind, fixed or scrollable, and with the primary tabs' icons beside their labels
- * (`inline`). */
-export const tabsClasses = (kind?: TabsKind, scrollable = true, inline = false) =>
-  [tabsClass, kind && `tabs-${kind}`, !scrollable && 'tabs-fixed', inline && 'tabs-inline'].filter(Boolean).join(' ');
-
-export function Tabs({
-  kind,
-  scrollable = true,
-  inline,
-  label,
-  className,
-  children,
-  ...rest
-}: {
-  kind?: TabsKind;
-  scrollable?: boolean;
-  inline?: boolean;
-  label?: string;
-  className?: string;
-  children: ReactNode;
-} & Record<string, unknown>) {
-  return (
-    <ul
-      className={[tabsClasses(kind, scrollable, inline), className].filter(Boolean).join(' ')}
-      role={label ? 'tablist' : undefined}
-      aria-label={label}
-      {...rest}
-    >
-      {children}
-    </ul>
-  );
-}
-
-/** A tab: a link to a page (`href`) or a tab of a tab list (`controls`), `selected` when it is the open one, with its
- * label, evt. its icon and a badge. */
-export function Tab({
-  href,
-  controls,
-  selected,
-  icon,
-  badge,
-  children,
-  ...rest
-}: {
-  href?: string;
-  controls?: string;
-  selected?: boolean;
-  icon?: IconRef;
-  badge?: true | number;
-  children: ReactNode;
-} & Record<string, unknown>) {
-  const mark = badge !== undefined && <Badge count={badge === true ? undefined : badge} className="tab-badge" />;
-  const content = (
-    <span className="tab-content">
-      {icon && (
-        <span className="tab-icon">
-          <Glyph icon={icon} size={24} />
-          {mark}
-        </span>
-      )}
-      <span className="tab-label">
-        {children}
-        {!icon && mark}
-      </span>
-    </span>
-  );
-  return href === undefined ? (
-    <li role="presentation">
-      <button
-        type="button"
-        role="tab"
-        className={tabClass}
-        aria-selected={!!selected}
-        aria-controls={controls}
-        tabIndex={selected ? 0 : -1}
-        {...rest}
-      >
-        {content}
-      </button>
-    </li>
-  ) : (
-    <li>
-      <Link href={href} className={tabClass} aria-current={selected ? 'page' : undefined} {...rest}>
-        {content}
-      </Link>
-    </li>
-  );
-}
+// Tabs (m3.material.io/components/tabs, .tabs and .tab in ../styles/ui.css): a row of tabs (Tabs), the open one
+// `selected`. Their kind (`kind`) is Material's: `primary` (the main views under the top app bar: each tab's icon over
+// its label, or beside it with `inline`, and the indicator under the label) or `secondary` (views within a part of the
+// page: the label, evt. with its icon beside it, and the indicator under the whole tab), each with the divider under the
+// row; without a kind only the label, the open one's in its own colour (components/MobileNav.astro, the bar of
+// "Mobilmenu"). The row is scrollable (the default: swiped sideways when the tabs do not fit) or fixed (`scrollable`
+// false: the tabs share the width). A tab (Tab) has its label (`children`), evt. its icon (`icon`, its name in the
+// theme's icons, or in the editor an icon already made: the tabs of a screen) and a badge (`badge`: true for a dot, else the number it shows; the theme's Badge). With `href` it is a
+// link to a page (Link: on the site; in the editor only drawn; the open one aria-current); without it, it is a tab of a
+// tab list (`label` on Tabs, its name: a role="tablist"), a <button role="tab"> that shows its panel (`controls`, the
+// panel's id; the open one aria-selected), which tabs.script.ts does on the site. How it looks is the theme's. An Astro
+// component gives its elements the classes with tabsClass, tabsClasses and tabClass.
+import type { ReactNode } from 'react';
+import { Glyph, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import Badge from '@theme/ui/Badge';
+
+export type TabsKind = 'primary' | 'secondary';
+
+/** The kinds, in Material's order. */
+export const tabsKinds: TabsKind[] = ['primary', 'secondary'];
+
+/** The row's class, and a tab's. */
+export const tabsClass = 'tabs';
+export const tabClass = 'tab';
+
+/** The row's classes with its kind, fixed or scrollable, and with the primary tabs' icons beside their labels
+ * (`inline`). */
+export const tabsClasses = (kind?: TabsKind, scrollable = true, inline = false) =>
+  [tabsClass, kind && `tabs-${kind}`, !scrollable && 'tabs-fixed', inline && 'tabs-inline'].filter(Boolean).join(' ');
+
+export function Tabs({
+  kind,
+  scrollable = true,
+  inline,
+  label,
+  className,
+  children,
+  ...rest
+}: {
+  kind?: TabsKind;
+  scrollable?: boolean;
+  inline?: boolean;
+  label?: string;
+  className?: string;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  return (
+    <ul
+      className={[tabsClasses(kind, scrollable, inline), className].filter(Boolean).join(' ')}
+      role={label ? 'tablist' : undefined}
+      aria-label={label}
+      {...rest}
+    >
+      {children}
+    </ul>
+  );
+}
+
+/** A tab: a link to a page (`href`) or a tab of a tab list (`controls`), `selected` when it is the open one, with its
+ * label, evt. its icon and a badge. */
+export function Tab({
+  href,
+  controls,
+  selected,
+  icon,
+  badge,
+  children,
+  ...rest
+}: {
+  href?: string;
+  controls?: string;
+  selected?: boolean;
+  icon?: IconRef;
+  badge?: true | number;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const mark = badge !== undefined && <Badge count={badge === true ? undefined : badge} className="tab-badge" />;
+  const content = (
+    <span className="tab-content">
+      {icon && (
+        <span className="tab-icon">
+          <Glyph icon={icon} size={24} />
+          {mark}
+        </span>
+      )}
+      <span className="tab-label">
+        {children}
+        {!icon && mark}
+      </span>
+    </span>
+  );
+  return href === undefined ? (
+    <li role="presentation">
+      <button
+        type="button"
+        role="tab"
+        className={tabClass}
+        aria-selected={!!selected}
+        aria-controls={controls}
+        tabIndex={selected ? 0 : -1}
+        {...rest}
+      >
+        {content}
+      </button>
+    </li>
+  ) : (
+    <li>
+      <Link href={href} className={tabClass} aria-current={selected ? 'page' : undefined} {...rest}>
+        {content}
+      </Link>
+    </li>
+  );
+}