@happyvertical/smrt-ui 0.51.38 → 0.52.0

package/dist/components/ui/Dropdown.svelte

@@ -18,6 +18,14 @@ export interface Props {
   label?: string;
   /** Custom trigger content. */
   trigger?: Snippet;
+  /** Accessible name of the trigger button when it shows only an icon (`aria-label`); omit to use its visible content (an icon trigger then falls back to `label`). */
+  triggerLabel?: string;
+  /**
+   * Trigger look: `button` (bordered, the default) or `icon`, a borderless 44px
+   * round icon button (a "more" or row-actions menu) that takes the surrounding
+   * text colour.
+   */
+  variant?: 'button' | 'icon';
   /** Menu items. */
   items: MenuItem[];
   /** Menu placement relative to the trigger. */
@@ -31,6 +39,8 @@ export interface Props {
 const {
   label,
   trigger,
+  triggerLabel,
+  variant = 'button',
   items,
   placement = 'bottom-start',
   onselect,
@@ -39,6 +49,16 @@ const {
 
 const instanceId = $props.id();
 const menuId = `smrt-menu-${instanceId}`;
+
+// An icon trigger shows no text, so without triggerLabel or label the button
+// has no accessible name.
+$effect(() => {
+  if (variant === 'icon' && !triggerLabel && !label) {
+    console.warn(
+      '[Dropdown] variant="icon" needs triggerLabel (or label): the trigger button has no accessible name.',
+    );
+  }
+});
 let open = $state(false);
 let wrapEl = $state<HTMLElement | null>(null);
 let triggerEl = $state<HTMLButtonElement | null>(null);
@@ -132,6 +152,8 @@ $effect(() => {
     bind:this={triggerEl}
     type="button"
     class="dropdown__trigger"
+    class:dropdown__trigger--icon={variant === 'icon'}
+    aria-label={triggerLabel ?? (variant === 'icon' ? label : undefined)}
     aria-haspopup="menu"
     aria-expanded={open}
     aria-controls={open ? menuId : undefined}
@@ -160,7 +182,10 @@ $effect(() => {
           tabindex={-1}
           onclick={() => selectItem(item)}
         >
-          {item.label}
+          {#if item.icon}
+            <span class="dropdown__item-icon" aria-hidden="true">{@render item.icon()}</span>
+          {/if}
+          <span class="dropdown__item-label">{item.label}</span>
         </button>
       {/each}
     </div>
@@ -187,6 +212,24 @@ $effect(() => {
     outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
+  /* Icon trigger: a 44px round "more" button in the surrounding text colour. */
+  .dropdown__trigger--icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--smrt-radius-full, 999px);
+    background: transparent;
+    color: inherit;
+  }
+  .dropdown__trigger--icon:hover:not(:disabled),
+  .dropdown__trigger--icon[aria-expanded='true'] {
+    background: color-mix(in srgb, currentColor 10%, transparent);
+  }
   .dropdown__trigger:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -226,6 +269,12 @@ $effect(() => {
 
   .dropdown__item {
     appearance: none;
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    /* A touch target: menu rows are at least 44px tall. */
+    min-block-size: 2.75rem;
+    box-sizing: border-box;
     font: inherit;
     text-align: left;
     cursor: pointer;
@@ -236,6 +285,11 @@ $effect(() => {
     color: var(--smrt-color-on-surface);
     white-space: nowrap;
   }
+  .dropdown__item-icon {
+    display: inline-flex;
+    flex: none;
+    color: var(--smrt-color-on-surface-variant);
+  }
   .dropdown__item:hover:not(:disabled) {
     background: var(--smrt-color-surface-container-high);
   }

package/dist/components/ui/Dropdown.svelte.d.ts

@@ -14,6 +14,14 @@ export interface Props {
     label?: string;
     /** Custom trigger content. */
     trigger?: Snippet;
+    /** Accessible name of the trigger button when it shows only an icon (`aria-label`); omit to use its visible content (an icon trigger then falls back to `label`). */
+    triggerLabel?: string;
+    /**
+     * Trigger look: `button` (bordered, the default) or `icon`, a borderless 44px
+     * round icon button (a "more" or row-actions menu) that takes the surrounding
+     * text colour.
+     */
+    variant?: 'button' | 'icon';
     /** Menu items. */
     items: MenuItem[];
     /** Menu placement relative to the trigger. */

package/dist/components/ui/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Dropdown.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGvE,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Dropdown.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGvE,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qKAAqK;IACrK,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+ID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/ui/IconToggle.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+/**
+ * IconToggle — an icon-only toggle button for dense filter and view-switcher
+ * rows. The icon is the `children` snippet (any icon set); `label` is both the
+ * accessible name and the tooltip text. `pressed` is reflected with
+ * `aria-pressed`, so a row of them is a one-of-many (or a many) toggle group;
+ * the owner decides what pressing means (this component keeps no state). An
+ * optional `count` shows as a small badge and is part of the accessible name
+ * and tooltip. The hit area is at least 44px square.
+ */
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { TooltipPlacement } from '../../types-generic';
+import Tooltip from './Tooltip.svelte';
+
+export interface Props
+  extends Omit<
+    HTMLButtonAttributes,
+    'class' | 'children' | 'aria-label' | 'aria-pressed' | 'title'
+  > {
+  /** Accessible name and tooltip text (what the button does or filters). */
+  label: string;
+  /** Whether the toggle is on (`aria-pressed`). */
+  pressed?: boolean;
+  /** Optional count badge; included in the accessible name and tooltip. */
+  count?: number;
+  /** A CSS colour (a token such as `var(--status-draft)` or a value) shown when the toggle is pressed. */
+  tone?: string;
+  /** The icon. Decorative: it is hidden from assistive technology. */
+  children: Snippet;
+  /** Where the tooltip opens. */
+  tooltipPlacement?: TooltipPlacement;
+  /** Additional CSS class names. */
+  class?: string;
+}
+
+const {
+  label,
+  pressed = false,
+  count,
+  tone,
+  children,
+  tooltipPlacement = 'top',
+  disabled = false,
+  type = 'button',
+  class: className = '',
+  ...rest
+}: Props = $props();
+
+const name = $derived(count === undefined ? label : `${label} (${count})`);
+</script>
+
+<Tooltip text={name} placement={tooltipPlacement}>
+  <button
+    {...rest}
+    {type}
+    {disabled}
+    class="icon-toggle {className}"
+    class:pressed
+    class:toned={tone !== undefined}
+    style:--icon-toggle-tone={tone}
+    aria-pressed={pressed}
+    aria-label={name}
+  >
+    <span class="icon" aria-hidden="true">{@render children()}</span>
+    {#if count !== undefined}<span class="count" aria-hidden="true">{count}</span>{/if}
+  </button>
+</Tooltip>
+
+<style>
+  .icon-toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    padding: 0;
+    border: 1px solid var(--smrt-color-outline-variant, var(--smrt-color-outline));
+    border-radius: var(--smrt-radius-full, 999px);
+    background: var(--smrt-color-surface-container, var(--smrt-color-surface));
+    color: var(--smrt-color-on-surface);
+    font: inherit;
+    cursor: pointer;
+  }
+  .icon-toggle:hover:not(:disabled) {
+    background: var(--smrt-color-surface-container-high, var(--smrt-color-surface-container));
+  }
+  /* Pressed is not told by colour alone (WCAG 1.4.1): it also draws a 2px ring
+     in its text colour, where unpressed has a 1px outline. */
+  .icon-toggle.pressed {
+    border-color: transparent;
+    background: var(--smrt-color-primary-container, var(--smrt-color-secondary-container));
+    color: var(--smrt-color-on-primary-container, var(--smrt-color-on-secondary-container));
+    box-shadow: inset 0 0 0 2px currentColor;
+  }
+  /* A toned toggle is neutral until pressed, then wears its tone. */
+  .icon-toggle.toned {
+    color: var(--smrt-color-on-surface-variant, var(--smrt-color-on-surface));
+  }
+  .icon-toggle.toned.pressed {
+    background: color-mix(in srgb, var(--icon-toggle-tone) 16%, var(--smrt-color-surface));
+    color: var(--icon-toggle-tone);
+    box-shadow: inset 0 0 0 2px var(--icon-toggle-tone);
+  }
+  .icon-toggle:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
+  .icon-toggle:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .icon {
+    display: inline-flex;
+  }
+  .count {
+    position: absolute;
+    z-index: 2;
+    top: -0.3rem;
+    right: -0.3rem;
+    box-sizing: border-box;
+    min-width: 1.15rem;
+    padding: 0 0.3rem;
+    border-radius: var(--smrt-radius-full, 999px);
+    /* Outlined, not filled: a surface-coloured face (so the button's edge does
+       not show through where the badge overlaps it), a 1px theme outline and
+       neutral text, readable on light and dark themes alike. */
+    border: 1px solid var(--smrt-color-outline);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface-variant);
+    font-size: 0.68rem;
+    font-weight: 700;
+    line-height: 1.15rem;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+</style>

package/dist/components/ui/IconToggle.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * IconToggle — an icon-only toggle button for dense filter and view-switcher
+ * rows. The icon is the `children` snippet (any icon set); `label` is both the
+ * accessible name and the tooltip text. `pressed` is reflected with
+ * `aria-pressed`, so a row of them is a one-of-many (or a many) toggle group;
+ * the owner decides what pressing means (this component keeps no state). An
+ * optional `count` shows as a small badge and is part of the accessible name
+ * and tooltip. The hit area is at least 44px square.
+ */
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { TooltipPlacement } from '../../types-generic';
+export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'children' | 'aria-label' | 'aria-pressed' | 'title'> {
+    /** Accessible name and tooltip text (what the button does or filters). */
+    label: string;
+    /** Whether the toggle is on (`aria-pressed`). */
+    pressed?: boolean;
+    /** Optional count badge; included in the accessible name and tooltip. */
+    count?: number;
+    /** A CSS colour (a token such as `var(--status-draft)` or a value) shown when the toggle is pressed. */
+    tone?: string;
+    /** The icon. Decorative: it is hidden from assistive technology. */
+    children: Snippet;
+    /** Where the tooltip opens. */
+    tooltipPlacement?: TooltipPlacement;
+    /** Additional CSS class names. */
+    class?: string;
+}
+declare const IconToggle: import("svelte").Component<Props, {}, "">;
+type IconToggle = ReturnType<typeof IconToggle>;
+export default IconToggle;
+//# sourceMappingURL=IconToggle.svelte.d.ts.map

package/dist/components/ui/IconToggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/IconToggle.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI5D,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,oBAAoB,EACpB,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,OAAO,CAC/D;IACD,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wGAAwG;IACxG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoCD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/ui/IconToggleGroup.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+/**
+ * IconToggleGroup — joins a row of `IconToggle`s into one labelled group: a
+ * single segmented strip with shared edges and rounded ends, exposed to
+ * assistive technology as `role="group"` named by `label` ("Filter by type").
+ * It adds no behaviour; each toggle keeps its own `pressed` state and
+ * `onclick`, so it works for one-of-many and many-of-many alike. Put one group
+ * per kind of filter and lay the groups out yourself.
+ */
+import type { Snippet } from 'svelte';
+
+export interface Props {
+  /** Names the group for assistive technology (what these toggles filter). */
+  label: string;
+  /** The `IconToggle`s. */
+  children: Snippet;
+  /** Additional CSS class names. */
+  class?: string;
+}
+
+const { label, children, class: className = '' }: Props = $props();
+</script>
+
+<div class="icon-toggle-group {className}" role="group" aria-label={label}>
+  {@render children()}
+</div>
+
+<style>
+  .icon-toggle-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+    isolation: isolate;
+  }
+  /* Shared edges: one border between neighbours, square inside, round ends.
+     Each toggle sits in tooltip wrappers, so the rules reach it by descendant. */
+  .icon-toggle-group :global(.icon-toggle) {
+    border-radius: 0;
+  }
+  .icon-toggle-group > :global(* + *) {
+    margin-inline-start: -1px;
+  }
+  .icon-toggle-group > :global(:first-child .icon-toggle) {
+    border-start-start-radius: var(--smrt-radius-full, 999px);
+    border-end-start-radius: var(--smrt-radius-full, 999px);
+  }
+  .icon-toggle-group > :global(:last-child .icon-toggle) {
+    border-start-end-radius: var(--smrt-radius-full, 999px);
+    border-end-end-radius: var(--smrt-radius-full, 999px);
+  }
+  /* The pressed one sits above its neighbours so its tint is not clipped by them. */
+  .icon-toggle-group :global(.icon-toggle.pressed),
+  .icon-toggle-group :global(.icon-toggle:focus-visible) {
+    z-index: 1;
+  }
+</style>

package/dist/components/ui/IconToggleGroup.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * IconToggleGroup — joins a row of `IconToggle`s into one labelled group: a
+ * single segmented strip with shared edges and rounded ends, exposed to
+ * assistive technology as `role="group"` named by `label` ("Filter by type").
+ * It adds no behaviour; each toggle keeps its own `pressed` state and
+ * `onclick`, so it works for one-of-many and many-of-many alike. Put one group
+ * per kind of filter and lay the groups out yourself.
+ */
+import type { Snippet } from 'svelte';
+export interface Props {
+    /** Names the group for assistive technology (what these toggles filter). */
+    label: string;
+    /** The `IconToggle`s. */
+    children: Snippet;
+    /** Additional CSS class names. */
+    class?: string;
+}
+declare const IconToggleGroup: import("svelte").Component<Props, {}, "">;
+type IconToggleGroup = ReturnType<typeof IconToggleGroup>;
+export default IconToggleGroup;
+//# sourceMappingURL=IconToggleGroup.svelte.d.ts.map

package/dist/components/ui/IconToggleGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconToggleGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/IconToggleGroup.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,WAAW,KAAK;IACpB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiBD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/ui/Pagination.svelte

@@ -240,7 +240,7 @@ const isLastPage = $derived(currentPage === totalPages);
 
   .page-link.current {
     background: var(--smrt-color-primary, #005ac1);
-    color: white;
+    color: var(--smrt-color-on-primary, white);
     cursor: default;
   }
 

package/dist/components/ui/Popover.svelte

@@ -6,6 +6,14 @@ export interface Props {
   label: string;
   /** Content rendered inside the trigger button in place of the label text. */
   trigger?: Snippet;
+  /** Accessible name of the trigger button when it shows only an icon (`aria-label`); omit to use its visible content (an icon trigger then falls back to `label`). */
+  triggerLabel?: string;
+  /**
+   * Trigger look: `button` (bordered, the default) or `icon`, a borderless
+   * 44px round icon button that takes the surrounding text colour (set the
+   * colour on the popover's `class`).
+   */
+  variant?: 'button' | 'icon';
   /** The popover content. */
   children?: Snippet;
   /** Whether the popover is visible. */
@@ -25,6 +33,8 @@ export interface Props {
 let {
   label,
   trigger,
+  triggerLabel,
+  variant = 'button',
   children,
   open = $bindable(false),
   disabled = false,
@@ -74,7 +84,9 @@ $effect(() => {
     bind:this={triggerEl}
     type="button"
     class="popover__trigger"
+    class:popover__trigger--icon={variant === 'icon'}
     aria-haspopup="dialog"
+    aria-label={triggerLabel ?? (variant === 'icon' ? label : undefined)}
     aria-expanded={open}
     aria-controls={open ? panelId : undefined}
     {disabled}
@@ -103,7 +115,11 @@ $effect(() => {
   .popover__trigger { appearance: none; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); font: inherit; cursor: pointer; }
   .popover__trigger:focus-visible, .popover__panel:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   .popover__trigger:disabled { opacity: .5; cursor: not-allowed; }
-  .popover__panel { position: absolute; z-index: var(--smrt-z-index-popover, 1000); min-width: 16rem; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large); background: var(--smrt-color-surface-container); color: var(--smrt-color-on-surface); box-shadow: var(--smrt-elevation-3); }
+  /* Icon trigger: a 44px round glyph in the surrounding colour. Hover and open nudge the glyph; focus keeps the standard primary ring (a soft ring in the glyph's colour fell under 3:1 on ordinary surfaces). */
+  .popover__trigger--icon { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: none; border-radius: var(--smrt-radius-full, 999px); background: transparent; color: inherit; }
+  .popover__trigger--icon:hover:not(:disabled), .popover__trigger--icon[aria-expanded='true'] { background: transparent; color: color-mix(in srgb, currentColor 80%, var(--smrt-color-on-surface)); }
+  .popover__trigger--icon:focus-visible { background: transparent; }
+  .popover__panel { position: absolute; z-index: var(--smrt-z-index-popover, 1000); box-sizing: border-box; inline-size: var(--smrt-popover-panel-width, auto); min-width: min(16rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: var(--smrt-popover-panel-padding, var(--smrt-spacing-4)); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large); background: var(--smrt-color-surface-container); color: var(--smrt-color-on-surface); box-shadow: var(--smrt-elevation-3); }
   .popover__panel--bottom-start { top: calc(100% + var(--smrt-spacing-1)); left: 0; }
   .popover__panel--bottom-end { top: calc(100% + var(--smrt-spacing-1)); right: 0; }
   .popover__panel--top-start { bottom: calc(100% + var(--smrt-spacing-1)); left: 0; }

package/dist/components/ui/Popover.svelte.d.ts

@@ -4,6 +4,14 @@ export interface Props {
     label: string;
     /** Content rendered inside the trigger button in place of the label text. */
     trigger?: Snippet;
+    /** Accessible name of the trigger button when it shows only an icon (`aria-label`); omit to use its visible content (an icon trigger then falls back to `label`). */
+    triggerLabel?: string;
+    /**
+     * Trigger look: `button` (bordered, the default) or `icon`, a borderless
+     * 44px round icon button that takes the surrounding text colour (set the
+     * colour on the popover's `class`).
+     */
+    variant?: 'button' | 'icon';
     /** The popover content. */
     children?: Snippet;
     /** Whether the popover is visible. */

package/dist/components/ui/Popover.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Popover.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,OAAO,EAAQ,MAAM,QAAQ,CAAC;AAG5C,MAAM,WAAW,KAAK;IACpB,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,sDAAsD;IACtD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmED,QAAA,MAAM,OAAO,+CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Popover.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,OAAO,EAAQ,MAAM,QAAQ,CAAC;AAG5C,MAAM,WAAW,KAAK;IACpB,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qKAAqK;IACrK,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,sDAAsD;IACtD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED,QAAA,MAAM,OAAO,+CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/ui/__tests__/IconToggle.test.js

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import IconToggle from '../IconToggle.svelte';
+const icon = createRawSnippet(() => ({
+    render: () => '<svg viewBox="0 0 24 24" width="18" height="18"></svg>',
+}));
+describe('IconToggle', () => {
+    it('is a labelled toggle button reflecting pressed', () => {
+        render(IconToggle, {
+            props: { label: 'Grid', pressed: true, children: icon },
+        });
+        const button = screen.getByRole('button', { name: 'Grid' });
+        expect(button).toHaveAttribute('aria-pressed', 'true');
+        expect(button).toHaveAttribute('type', 'button');
+    });
+    it('shows a count badge that is part of the name and the tooltip', () => {
+        render(IconToggle, {
+            props: { label: 'Draft', count: 12, children: icon },
+        });
+        const button = screen.getByRole('button', { name: 'Draft (12)' });
+        expect(button).toHaveAttribute('aria-pressed', 'false');
+        expect(screen.getByRole('tooltip')).toHaveTextContent('Draft (12)');
+        expect(button.querySelector('.count')).toHaveTextContent('12');
+    });
+    it('keeps no state of its own: it calls onclick and the owner decides', async () => {
+        const onclick = vi.fn();
+        render(IconToggle, {
+            props: { label: 'Cards', pressed: false, onclick, children: icon },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Cards' }));
+        expect(onclick).toHaveBeenCalledTimes(1);
+        expect(screen.getByRole('button', { name: 'Cards' })).toHaveAttribute('aria-pressed', 'false');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(IconToggle, {
+            props: { label: 'Grid', count: 3, children: icon },
+        });
+        await expectNoA11yViolations(container);
+    });
+});
+describe('IconToggle tone', () => {
+    it('carries its tone as a custom property and a toned class', () => {
+        render(IconToggle, {
+            props: { label: 'Draft', tone: 'var(--status-draft)', children: icon },
+        });
+        const button = screen.getByRole('button', { name: 'Draft' });
+        expect(button).toHaveClass('toned');
+        expect(button.style.getPropertyValue('--icon-toggle-tone')).toBe('var(--status-draft)');
+    });
+    it('has no tone styling unless asked', () => {
+        render(IconToggle, { props: { label: 'Grid', children: icon } });
+        const button = screen.getByRole('button', { name: 'Grid' });
+        expect(button).not.toHaveClass('toned');
+        expect(button.style.getPropertyValue('--icon-toggle-tone')).toBe('');
+    });
+});

package/dist/components/ui/__tests__/IconToggleGroup.test.js

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import IconToggleGroup from '../IconToggleGroup.svelte';
+const buttons = createRawSnippet(() => ({
+    render: () => '<span><button type="button" aria-pressed="true" aria-label="Draft (2)">D</button><button type="button" aria-pressed="false" aria-label="Review (0)">R</button></span>',
+}));
+describe('IconToggleGroup', () => {
+    it('is a named group around its toggles', () => {
+        render(IconToggleGroup, {
+            props: { label: 'Filter by status', children: buttons },
+        });
+        const group = screen.getByRole('group', { name: 'Filter by status' });
+        expect(group.querySelectorAll('button')).toHaveLength(2);
+    });
+    it('adds no state: the toggles keep their own pressed value', () => {
+        render(IconToggleGroup, {
+            props: { label: 'Filter by status', children: buttons },
+        });
+        expect(screen.getByRole('button', { name: 'Draft (2)' })).toHaveAttribute('aria-pressed', 'true');
+        expect(screen.getByRole('button', { name: 'Review (0)' })).toHaveAttribute('aria-pressed', 'false');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(IconToggleGroup, {
+            props: { label: 'Filter by status', children: buttons },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/ui/__tests__/Popover.test.js

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Popover from '../Popover.svelte';
+const icon = createRawSnippet(() => ({
+    render: () => '<svg viewBox="0 0 24 24" width="18" height="18"></svg>',
+}));
+const body = createRawSnippet(() => ({
+    render: () => '<p>No main picture</p>',
+}));
+describe('Popover', () => {
+    it('names an icon-only trigger with triggerLabel and opens its panel', async () => {
+        render(Popover, {
+            props: {
+                label: 'Issues',
+                triggerLabel: '3 issues',
+                trigger: icon,
+                children: body,
+            },
+        });
+        const trigger = screen.getByRole('button', { name: '3 issues' });
+        expect(trigger).toHaveAttribute('aria-expanded', 'false');
+        await userEvent.click(trigger);
+        expect(trigger).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByRole('dialog', { name: 'Issues' })).toHaveTextContent('No main picture');
+    });
+    it('is named by its visible content when there is no triggerLabel', () => {
+        render(Popover, { props: { label: 'Filters', children: body } });
+        expect(screen.getByRole('button', { name: 'Filters' })).not.toHaveAttribute('aria-label');
+    });
+    it('is axe-clean with an icon-only trigger', async () => {
+        const { container } = render(Popover, {
+            props: {
+                label: 'Issues',
+                triggerLabel: '3 issues',
+                trigger: icon,
+                children: body,
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});