@iyulab/desktop-patterns 0.9.0 → 0.10.1

package/README.md

@@ -115,7 +115,10 @@ nav.items = [
   },
 ]
 nav.pinnedItems = [{ id: 'settings', icon: '⚙', label: 'Settings' }]   // places kept at the foot of the rail
-nav.bottomItems = [{ id: 'sign-out', icon: '⎋', label: 'Sign out' }]  // actions, not places
+nav.bottomItems = [
+  { id: 'dense', icon: '▤', label: 'Dense mode', pressed: false },    // a toggle: aria-pressed, owned by you
+  { id: 'sign-out', icon: '⎋', label: 'Sign out' },                    // actions, not places
+]
 nav.setAttribute('nav-label', 'Main')                                 // names the navigation landmark
 ```
 
@@ -136,6 +139,11 @@ nav.setAttribute('nav-label', 'Main')                                 // names t
   settings or help page shown there is marked as the current page.
 - **Bottom items are actions**: each click fires `dp-sidebar-action` (`itemId`) — every time, so a failed action can
   be retried — and never moves `aria-current`. (In 0.2.x they fired `dp-sidebar-select` and took the active mark.)
+- **Toggle actions**: a bottom action with `pressed` (`{ id, icon, label, pressed: true | false }`) is a setting it
+  turns on and off. The button carries `aria-pressed`, and an on toggle gets a quiet ground and an accent icon
+  (`--dp-sidebar-pressed-bg`, `--dp-sidebar-pressed-icon-color`) that still shows in the collapsed rail. Name it after
+  the setting ("Dense mode"), not the click ("Turn dense mode on"). The sidebar does not flip it — change the value
+  on `dp-sidebar-action` and set `bottomItems` again.
 
 Every component takes its user-facing text as a plain attribute/property or slot — there is no
 built-in i18n layer. See each component's Storybook story (`npm run storybook`) for its full API.

package/dist/components/sidebar/dp-sidebar.d.ts

@@ -12,6 +12,19 @@ export interface SidebarItem {
     label: string;
     href?: string;
 }
+/**
+ * One bottom action. With `pressed` it is a toggle — a setting the action turns on and off (a dense
+ * or touch mode, a theme): the button carries `aria-pressed` and, when on, a quiet ground and an accent
+ * icon. Its `label` then names the setting, not what a click would do. The sidebar does not flip it;
+ * the consumer owns the state, changes it on `dp-sidebar-action`, and passes the new value back.
+ */
+export interface SidebarAction {
+    id: string;
+    /** Text fallback for the `icon-<id>` slot. */
+    icon: string;
+    label: string;
+    pressed?: boolean;
+}
 /** A named set of items under one disclosure. */
 export interface SidebarGroup {
     id: string;
@@ -68,7 +81,7 @@ export declare class DpSidebar extends LitElement {
      */
     pinnedItems: SidebarItem[];
     /** Actions, not places — see `DpSidebarActionEvent`. A place belongs in `pinnedItems`. */
-    bottomItems: SidebarItem[];
+    bottomItems: SidebarAction[];
     activeId: string;
     header: string;
     /** Accessible name of the navigation landmark. Unset leaves it unnamed. */

package/dist/sidebar.js

@@ -146,6 +146,17 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
     .item[aria-current='page']:hover {
       background: var(--dc-selection-bg, var(--dc-color-surface-hover, #ececed));
     }
+    /* A toggle that is on. Not a place, so not the rail marker or the current-page colour of the label:
+       a quiet ground (--dp-sidebar-pressed-bg) and the accent on the icon, so it still reads in the
+       collapsed rail, where only the icon shows. Declared after :hover so hovering keeps the ground. */
+    .item[aria-pressed='true'],
+    .item[aria-pressed='true']:hover {
+      background: var(--dp-sidebar-pressed-bg, var(--dc-selection-bg, var(--dc-color-surface-hover, #ececed)));
+      color: var(--dc-color-text, #1d1d1f);
+    }
+    .item[aria-pressed='true'] .icon {
+      color: var(--dp-sidebar-pressed-icon-color, var(--dc-color-accent-text, var(--dc-color-accent, #2563eb)));
+    }
     .item:focus-visible {
       outline: 2px solid var(--dc-color-accent, #2563eb);
       outline-offset: -2px;
@@ -162,6 +173,12 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
     .group-toggle[aria-expanded='false'] .caret {
       transform: rotate(-90deg);
     }
+    /* The turn is decoration: with reduced motion the caret takes its new angle at once. */
+    @media (prefers-reduced-motion: reduce) {
+      .caret {
+        transition: none;
+      }
+    }
     .footer {
       border-top: 1px solid var(--dc-color-border, #e2e2e4);
     }
@@ -228,6 +245,7 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
       <button
         class="item"
         title=${this.collapsed ? e.label : i}
+        aria-pressed=${e.pressed === void 0 ? i : e.pressed ? "true" : "false"}
         @click=${() => this.dispatchEvent(new d(e.id))}
       >
         ${this.#r(e.id, e.icon)} ${this.collapsed ? i : r`<span class="label">${e.label}</span>`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "type": "module",
   "license": "MIT",
   "repository": {