{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "toggle-setting-list",
  "title": "Toggle Setting List",
  "type": "registry:block",
  "description": "List of toggle-able settings in a SectionCard. Spell rows out inline with ToggleSettingRow — each row is a controlled switch taking `checked` + `onCheckedChange`.",
  "categories": [
    "layout",
    "dashboard"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/toggle-setting-list/toggle-setting-list.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n// Side-effect import: registers <uip-section-card> for standalone use\n// (consumers who install only this block still get a working card).\nimport '../../components/section-card/section-card'\n\n/**\n * <uip-toggle-setting-list> — the registry ToggleSettingList block as a web component.\n *\n * Class strings are React's ToggleSettingList verbatim. React's `title`\n * becomes `heading` (`title` is taken by HTMLElement); `headerIcon`\n * becomes the `header-icon` slot (forwarded to SectionCard's\n * `header-action` slot); `children` becomes the default slot (the rows,\n * rendered inside React's `-my-4 divide-y` list). Rows are\n * <uip-toggle-setting-row> elements (same file, same install unit).\n */\nexport class UipToggleSettingList extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    heading: {},\n    description: {},\n  }\n\n  heading = 'Notifications'\n  description?: string\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'toggle-setting-list')\n  }\n\n  render() {\n    return html`\n      <uip-section-card data-slot=\"toggle-setting-list\" heading=${this.heading} description=${this.description ?? nothing}>\n        <span slot=\"header-action\"><slot name=\"header-icon\"></slot></span>\n        <ul class=\"-my-4 divide-y\"><slot></slot></ul>\n      </uip-section-card>\n    `\n  }\n}\n\n/**\n * <uip-toggle-setting-row> — React's ToggleSettingRow: one controlled switch\n * row. Class strings are React's verbatim (the hand-rolled\n * `role=\"switch\"` button, not the Switch primitive). `checked` is the live\n * state; `onCheckedChange` becomes the `checked-change` CustomEvent (detail:\n * boolean, bubbles, composed).\n */\nexport class UipToggleSettingRow extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    label: {},\n    desc: {},\n    checked: { type: Boolean },\n  }\n\n  label = ''\n  desc?: string\n  checked = false\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'toggle-setting-row')\n  }\n\n  private toggle() {\n    this.checked = !this.checked\n    this.dispatchEvent(new CustomEvent<boolean>('checked-change', { detail: this.checked, bubbles: true, composed: true }))\n  }\n\n  render() {\n    return html`\n      <li class=\"flex items-center justify-between gap-4 py-4 first:pt-0\">\n        <div>\n          <p class=\"text-sm font-medium\">${this.label}</p>\n          ${this.desc ? html`<p class=\"text-muted-foreground text-xs\">${this.desc}</p>` : nothing}\n        </div>\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-label=${this.label}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          class=${cn(\n            'focus-visible:ring-ring relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none focus-visible:ring-2',\n            this.checked ? 'bg-primary' : 'bg-muted-foreground/30',\n          )}\n          @click=${this.toggle}\n        >\n          <span\n            class=${cn(\n              'bg-background inline-block size-4 translate-y-0.5 rounded-full shadow transition-transform',\n              this.checked ? 'translate-x-[18px]' : 'translate-x-0.5',\n            )}\n          ></span>\n        </button>\n      </li>\n    `\n  }\n}\n\ncustomElements.get('uip-toggle-setting-list') ||\n  customElements.define('uip-toggle-setting-list', UipToggleSettingList)\ncustomElements.get('uip-toggle-setting-row') || customElements.define('uip-toggle-setting-row', UipToggleSettingRow)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-toggle-setting-list': UipToggleSettingList\n    'uip-toggle-setting-row': UipToggleSettingRow\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/toggle-setting-list/toggle-setting-list.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/section-card.json"
  ]
}