@kerfjs/ui 5.0.0-beta.110 → 5.0.0-beta.112

package/dist/wire-content-items.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/content-item/wiring/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const ITEM_SELECTOR =\n  '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\nconst MULTI_GRID_SELECTOR = '[role=\"grid\"][aria-multiselectable=\"true\"]';\nconst MULTI_ROW_SELECTOR = `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]`;\n\n/** The enabled selectable rows of one multi-select grid, in order. */\nfunction gridRows(grid: Element): HTMLElement[] {\n  return Array.from(\n    grid.querySelectorAll<HTMLElement>(\n      `${MULTI_ROW_SELECTOR}:not([data-disabled=\"true\"])`,\n    ),\n  ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);\n}\n\nfunction nextTile(\n  item: HTMLElement,\n  rows: HTMLElement[],\n  key: string,\n): HTMLElement | undefined {\n  const current = item.getBoundingClientRect();\n  const centerX = current.left + current.width / 2;\n  const candidates = rows\n    .filter((row) => row !== item)\n    .map((row) => {\n      const rect = row.getBoundingClientRect();\n      return { row, x: rect.left + rect.width / 2, y: rect.top };\n    });\n  const sameLine = (y: number) => Math.abs(y - current.top) < 1;\n  const directed = candidates.filter(({ x, y }) => {\n    switch (key) {\n      case 'ArrowLeft':\n        return sameLine(y) && x < centerX;\n      case 'ArrowRight':\n        return sameLine(y) && x > centerX;\n      case 'ArrowUp':\n        return y < current.top - 1;\n      default:\n        return y > current.top + 1;\n    }\n  });\n  directed.sort((a, b) => {\n    if (key === 'ArrowLeft') return b.x - a.x;\n    if (key === 'ArrowRight') return a.x - b.x;\n    const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);\n    return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);\n  });\n  return directed[0]?.row;\n}\n\nfunction actionItem(root: HTMLElement, event: Event) {\n  const target = event.target;\n  if (!(target instanceof Element)) return null;\n  const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n  if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n    return null;\n  // Composed events expose native controls inside a custom element's shadow\n  // root even though event.target is retargeted to its host here.\n  for (const node of event.composedPath()) {\n    if (node === item) break;\n    if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))\n      return null;\n  }\n  return item;\n}\n\n/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n  event: Event,\n  item: HTMLElement,\n): boolean {\n  return actionItem(item, event) === item;\n}\n\ntype ActivationModifiers = Pick<\n  KeyboardEvent,\n  'shiftKey' | 'ctrlKey' | 'metaKey'\n>;\n\n/**\n * Activate an item with a click that carries the activating key's modifier\n * state, so one delegated click handler serves pointer and keyboard\n * multi-selection alike (Shift extends a range, Cmd/Ctrl toggles one item).\n */\nfunction activate(item: HTMLElement, modifiers: ActivationModifiers) {\n  item.dispatchEvent(\n    new MouseEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      view: item.ownerDocument.defaultView,\n      shiftKey: modifiers.shiftKey,\n      ctrlKey: modifiers.ctrlKey,\n      metaKey: modifiers.metaKey,\n    }),\n  );\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. The activation click mirrors the Shift,\n * Ctrl, and Meta state of the activating key (Space uses the state at press),\n * so the click handler can read `shiftKey` / `metaKey` / `ctrlKey` for\n * keyboard range and toggle selection. Alt-modified keys are left to the\n * platform. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n  // Roving tabindex: each multi-select grid is one Tab stop, on the last\n  // focused row, else the first selected, else the first enabled row.\n  const activeRows = new WeakMap<Element, HTMLElement>();\n  const rove = (grid: Element) => {\n    const rows = gridRows(grid);\n    const remembered = activeRows.get(grid);\n    const stop =\n      remembered && rows.includes(remembered)\n        ? remembered\n        : (rows.find((row) => row.getAttribute('aria-selected') === 'true') ??\n          rows[0]);\n    for (const row of rows) {\n      const want = row === stop ? '0' : '-1';\n      if (row.getAttribute('tabindex') !== want)\n        row.setAttribute('tabindex', want);\n    }\n  };\n  const grids = () =>\n    [\n      ...(root.matches(MULTI_GRID_SELECTOR) ? [root] : []),\n      ...root.querySelectorAll(MULTI_GRID_SELECTOR),\n    ] as Element[];\n  // A re-render resets every row's tabindex to its template value, so the\n  // roving stop is restored after each change (deduplicated per task).\n  let roving = false;\n  const scheduleRove = () => {\n    if (roving) return;\n    roving = true;\n    globalThis.queueMicrotask(() => {\n      roving = false;\n      for (const grid of grids()) rove(grid);\n    });\n  };\n  const View = root.ownerDocument.defaultView;\n  const observer =\n    View && 'MutationObserver' in View\n      ? new View.MutationObserver(scheduleRove)\n      : null;\n  observer?.observe(root, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['tabindex', 'aria-selected', 'data-disabled'],\n  });\n  for (const grid of grids()) rove(grid);\n\n  const focusin = (event: FocusEvent) => {\n    const target = event.target;\n    if (!(target instanceof Element)) return;\n    const row = target.closest<HTMLElement>(MULTI_ROW_SELECTOR);\n    const grid = row?.closest(MULTI_GRID_SELECTOR);\n    if (!row || !grid || !root.contains(grid)) return;\n    activeRows.set(grid, row);\n    rove(grid);\n  };\n\n  let pendingSpace: {\n    item: HTMLElement;\n    modifiers: ActivationModifiers;\n  } | null = null;\n\n  const clearSpace = () => {\n    pendingSpace?.item.removeAttribute('data-kui-pressed');\n    pendingSpace = null;\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || event.altKey) return;\n    const item = actionItem(root, event);\n    if (!item) return;\n    const commandKey = event.ctrlKey || event.metaKey;\n    if (\n      !commandKey &&\n      item.dataset.selectionMode === 'multiple' &&\n      [\n        'ArrowDown',\n        'ArrowUp',\n        'ArrowLeft',\n        'ArrowRight',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const grid = item.closest(MULTI_GRID_SELECTOR);\n      if (!grid) return;\n      const rows = gridRows(grid);\n      const index = rows.indexOf(item);\n      if (index < 0) return;\n      const isTileGrid = grid.getAttribute('data-component') === 'grid';\n      let next: HTMLElement | undefined;\n      switch (event.key) {\n        case 'Home':\n          next = rows[0];\n          break;\n        case 'End':\n          next = rows[rows.length - 1];\n          break;\n        case 'ArrowDown':\n        case 'ArrowUp':\n          next = isTileGrid\n            ? nextTile(item, rows, event.key)\n            : rows[index + (event.key === 'ArrowDown' ? 1 : -1)];\n          break;\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          next = isTileGrid ? nextTile(item, rows, event.key) : undefined;\n          break;\n      }\n      if (next) {\n        event.preventDefault();\n        next.focus();\n      }\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      activate(item, event);\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (event.repeat) return;\n      clearSpace();\n      pendingSpace = {\n        item,\n        modifiers: {\n          shiftKey: event.shiftKey,\n          ctrlKey: event.ctrlKey,\n          metaKey: event.metaKey,\n        },\n      };\n      item.setAttribute('data-kui-pressed', 'true');\n    }\n  };\n\n  const keyup = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n    if (!pendingSpace) return;\n    const { item, modifiers } = pendingSpace;\n    event.preventDefault();\n    clearSpace();\n    if (\n      item === actionItem(root, event) &&\n      item.ownerDocument.activeElement === item\n    )\n      activate(item, modifiers);\n  };\n\n  const focusout = (event: FocusEvent) => {\n    if (event.target === pendingSpace?.item) clearSpace();\n  };\n\n  root.addEventListener('keydown', keydown);\n  root.addEventListener('keyup', keyup);\n  root.addEventListener('focusout', focusout);\n  root.addEventListener('focusin', focusin);\n  return () => {\n    clearSpace();\n    observer?.disconnect();\n    root.removeEventListener('focusin', focusin);\n    root.removeEventListener('keydown', keydown);\n    root.removeEventListener('keyup', keyup);\n    root.removeEventListener('focusout', focusout);\n  };\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/content-item/wiring/wire-content-item-media.ts","../src/components/surfaces/content-item/wiring/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const CARD = '[data-component=\"content-item\"][data-media-state]';\nconst LEAD = '.kui-content-item__media .kui-backdrop-image__media';\nconst BLURRED = '.kui-content-item__media .kui-backdrop-image__blurred';\n\n/** Image state uses one load/error listener pair and one observer per feed root. */\nexport function wireContentItemMedia(root: HTMLElement): () => void {\n  const tint = (card: HTMLElement, enabled: boolean) => {\n    const media = card.querySelector<HTMLElement>('.kui-content-item__media');\n    const scheme = media?.dataset.tintScheme;\n    if (!scheme) return;\n    if (enabled) {\n      if (card.dataset.kuiTint !== scheme)\n        card.setAttribute('data-kui-tint', scheme);\n      if (!card.classList.contains(`wa-${scheme}`))\n        card.classList.add(`wa-${scheme}`);\n      if (\n        media?.hasAttribute('data-tint-accent') &&\n        !card.hasAttribute('data-kui-tint-accent')\n      ) {\n        card.setAttribute('data-kui-tint-accent', '');\n      }\n    } else {\n      if (card.hasAttribute('data-kui-tint'))\n        card.removeAttribute('data-kui-tint');\n      if (card.hasAttribute('data-kui-tint-accent'))\n        card.removeAttribute('data-kui-tint-accent');\n      if (\n        card.classList.contains('wa-light') ||\n        card.classList.contains('wa-dark')\n      )\n        card.classList.remove('wa-light', 'wa-dark');\n    }\n  };\n  const sync = (card: HTMLElement) => {\n    const lead = card.querySelector<HTMLImageElement>(LEAD);\n    if (!lead) return;\n    const state = !lead.complete\n      ? 'pending'\n      : lead.naturalWidth > 0\n        ? 'ready'\n        : 'error';\n    if (card.dataset.mediaState !== state) card.dataset.mediaState = state;\n    tint(card, state !== 'error');\n    const blurred = card.querySelector<HTMLImageElement>(BLURRED);\n    if (blurred?.complete && blurred.naturalWidth === 0)\n      blurred.dataset.imageError = 'true';\n    else blurred?.removeAttribute('data-image-error');\n  };\n  const all = () => {\n    if (root.matches(CARD)) sync(root);\n    root.querySelectorAll<HTMLElement>(CARD).forEach(sync);\n  };\n  const onImage = (event: Event) => {\n    const target = event.target;\n    if (!(target instanceof Element) || !target.matches(`${LEAD}, ${BLURRED}`))\n      return;\n    const card = target.closest<HTMLElement>(CARD);\n    if (card && root.contains(card)) sync(card);\n  };\n  // Morph can restore template attributes without changing an image node or\n  // firing a second load/error event. Reconcile its writes against native state.\n  const observer = new MutationObserver((records) => {\n    if (records.some((record) => record.type === 'childList')) {\n      all();\n      return;\n    }\n    const cards = new Set<HTMLElement>();\n    for (const record of records) {\n      const target = record.target;\n      if (target instanceof Element) {\n        const card = target.closest<HTMLElement>(CARD);\n        if (card && root.contains(card)) cards.add(card);\n      }\n    }\n    cards.forEach(sync);\n  });\n  observer.observe(root, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: [\n      'src',\n      'srcset',\n      'data-media-state',\n      'data-kui-tint',\n      'data-kui-tint-accent',\n      'class',\n    ],\n  });\n  root.addEventListener('load', onImage, true);\n  root.addEventListener('error', onImage, true);\n  all();\n  return () => {\n    observer.disconnect();\n    root.removeEventListener('load', onImage, true);\n    root.removeEventListener('error', onImage, true);\n  };\n}\n","import { wireContentItemMedia } from './wire-content-item-media.js';\n\nconst ITEM_SELECTOR =\n  '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\nconst MULTI_GRID_SELECTOR = '[role=\"grid\"][aria-multiselectable=\"true\"]';\nconst MULTI_ROW_SELECTOR = `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]`;\n\n/** The enabled selectable rows of one multi-select grid, in order. */\nfunction gridRows(grid: Element): HTMLElement[] {\n  return Array.from(\n    grid.querySelectorAll<HTMLElement>(\n      `${MULTI_ROW_SELECTOR}:not([data-disabled=\"true\"])`,\n    ),\n  ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);\n}\n\nfunction nextTile(\n  item: HTMLElement,\n  rows: HTMLElement[],\n  key: string,\n): HTMLElement | undefined {\n  const current = item.getBoundingClientRect();\n  const centerX = current.left + current.width / 2;\n  const candidates = rows\n    .filter((row) => row !== item)\n    .map((row) => {\n      const rect = row.getBoundingClientRect();\n      return { row, x: rect.left + rect.width / 2, y: rect.top };\n    });\n  const sameLine = (y: number) => Math.abs(y - current.top) < 1;\n  const directed = candidates.filter(({ x, y }) => {\n    switch (key) {\n      case 'ArrowLeft':\n        return sameLine(y) && x < centerX;\n      case 'ArrowRight':\n        return sameLine(y) && x > centerX;\n      case 'ArrowUp':\n        return y < current.top - 1;\n      default:\n        return y > current.top + 1;\n    }\n  });\n  directed.sort((a, b) => {\n    if (key === 'ArrowLeft') return b.x - a.x;\n    if (key === 'ArrowRight') return a.x - b.x;\n    const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);\n    return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);\n  });\n  return directed[0]?.row;\n}\n\nfunction actionItem(root: HTMLElement, event: Event) {\n  const target = event.target;\n  if (!(target instanceof Element)) return null;\n  const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n  if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n    return null;\n  // Composed events expose native controls inside a custom element's shadow\n  // root even though event.target is retargeted to its host here.\n  for (const node of event.composedPath()) {\n    if (node === item) break;\n    if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))\n      return null;\n  }\n  return item;\n}\n\n/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n  event: Event,\n  item: HTMLElement,\n): boolean {\n  return actionItem(item, event) === item;\n}\n\ntype ActivationModifiers = Pick<\n  KeyboardEvent,\n  'shiftKey' | 'ctrlKey' | 'metaKey'\n>;\n\n/**\n * Activate an item with a click that carries the activating key's modifier\n * state, so one delegated click handler serves pointer and keyboard\n * multi-selection alike (Shift extends a range, Cmd/Ctrl toggles one item).\n */\nfunction activate(item: HTMLElement, modifiers: ActivationModifiers) {\n  item.dispatchEvent(\n    new MouseEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      view: item.ownerDocument.defaultView,\n      shiftKey: modifiers.shiftKey,\n      ctrlKey: modifiers.ctrlKey,\n      metaKey: modifiers.metaKey,\n    }),\n  );\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. The activation click mirrors the Shift,\n * Ctrl, and Meta state of the activating key (Space uses the state at press),\n * so the click handler can read `shiftKey` / `metaKey` / `ctrlKey` for\n * keyboard range and toggle selection. Alt-modified keys are left to the\n * platform. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n  const stopMedia = wireContentItemMedia(root);\n  // Roving tabindex: each multi-select grid is one Tab stop, on the last\n  // focused row, else the first selected, else the first enabled row.\n  const activeRows = new WeakMap<Element, HTMLElement>();\n  const rove = (grid: Element) => {\n    const rows = gridRows(grid);\n    const remembered = activeRows.get(grid);\n    const stop =\n      remembered && rows.includes(remembered)\n        ? remembered\n        : (rows.find((row) => row.getAttribute('aria-selected') === 'true') ??\n          rows[0]);\n    for (const row of rows) {\n      const want = row === stop ? '0' : '-1';\n      if (row.getAttribute('tabindex') !== want)\n        row.setAttribute('tabindex', want);\n    }\n  };\n  const grids = () =>\n    [\n      ...(root.matches(MULTI_GRID_SELECTOR) ? [root] : []),\n      ...root.querySelectorAll(MULTI_GRID_SELECTOR),\n    ] as Element[];\n  // A re-render resets every row's tabindex to its template value, so the\n  // roving stop is restored after each change (deduplicated per task).\n  let roving = false;\n  const scheduleRove = () => {\n    if (roving) return;\n    roving = true;\n    globalThis.queueMicrotask(() => {\n      roving = false;\n      for (const grid of grids()) rove(grid);\n    });\n  };\n  const View = root.ownerDocument.defaultView;\n  const observer =\n    View && 'MutationObserver' in View\n      ? new View.MutationObserver(scheduleRove)\n      : null;\n  observer?.observe(root, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['tabindex', 'aria-selected', 'data-disabled'],\n  });\n  for (const grid of grids()) rove(grid);\n\n  const focusin = (event: FocusEvent) => {\n    const target = event.target;\n    if (!(target instanceof Element)) return;\n    const row = target.closest<HTMLElement>(MULTI_ROW_SELECTOR);\n    const grid = row?.closest(MULTI_GRID_SELECTOR);\n    if (!row || !grid || !root.contains(grid)) return;\n    activeRows.set(grid, row);\n    rove(grid);\n  };\n\n  let pendingSpace: {\n    item: HTMLElement;\n    modifiers: ActivationModifiers;\n  } | null = null;\n\n  const clearSpace = () => {\n    pendingSpace?.item.removeAttribute('data-kui-pressed');\n    pendingSpace = null;\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || event.altKey) return;\n    const item = actionItem(root, event);\n    if (!item) return;\n    const commandKey = event.ctrlKey || event.metaKey;\n    if (\n      !commandKey &&\n      item.dataset.selectionMode === 'multiple' &&\n      [\n        'ArrowDown',\n        'ArrowUp',\n        'ArrowLeft',\n        'ArrowRight',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const grid = item.closest(MULTI_GRID_SELECTOR);\n      if (!grid) return;\n      const rows = gridRows(grid);\n      const index = rows.indexOf(item);\n      if (index < 0) return;\n      const isTileGrid = grid.getAttribute('data-component') === 'grid';\n      let next: HTMLElement | undefined;\n      switch (event.key) {\n        case 'Home':\n          next = rows[0];\n          break;\n        case 'End':\n          next = rows[rows.length - 1];\n          break;\n        case 'ArrowDown':\n        case 'ArrowUp':\n          next = isTileGrid\n            ? nextTile(item, rows, event.key)\n            : rows[index + (event.key === 'ArrowDown' ? 1 : -1)];\n          break;\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          next = isTileGrid ? nextTile(item, rows, event.key) : undefined;\n          break;\n      }\n      if (next) {\n        event.preventDefault();\n        next.focus();\n      }\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      activate(item, event);\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (event.repeat) return;\n      clearSpace();\n      pendingSpace = {\n        item,\n        modifiers: {\n          shiftKey: event.shiftKey,\n          ctrlKey: event.ctrlKey,\n          metaKey: event.metaKey,\n        },\n      };\n      item.setAttribute('data-kui-pressed', 'true');\n    }\n  };\n\n  const keyup = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n    if (!pendingSpace) return;\n    const { item, modifiers } = pendingSpace;\n    event.preventDefault();\n    clearSpace();\n    if (\n      item === actionItem(root, event) &&\n      item.ownerDocument.activeElement === item\n    )\n      activate(item, modifiers);\n  };\n\n  const focusout = (event: FocusEvent) => {\n    if (event.target === pendingSpace?.item) clearSpace();\n  };\n\n  root.addEventListener('keydown', keydown);\n  root.addEventListener('keyup', keyup);\n  root.addEventListener('focusout', focusout);\n  root.addEventListener('focusin', focusin);\n  return () => {\n    stopMedia();\n    clearSpace();\n    observer?.disconnect();\n    root.removeEventListener('focusin', focusin);\n    root.removeEventListener('keydown', keydown);\n    root.removeEventListener('keyup', keyup);\n    root.removeEventListener('focusout', focusout);\n  };\n}\n"]}

package/dist/workbench-dialog.d.ts

@@ -4,9 +4,10 @@ import { CssLength } from './css-values.js';
 import { WorkbenchMainBottomToolbar, WorkbenchPanel } from './workbench.js';
 import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
 export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/workbench-dialog.js

@@ -1,7 +1,7 @@
-import { DialogSurface } from './chunk-6CDILXF4.js';
-export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+import { DialogSurface } from './chunk-S3DCRI2M.js';
+export { closeDialog, openDialog } from './chunk-3OP66VXU.js';
 
-import { Workbench } from './chunk-CPSGUGAY.js';
+import { Workbench } from './chunk-YPAQFBMN.js';
 
 
 
@@ -19,6 +19,7 @@ import { ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
 
 
 
+
 import { LucideIcon } from './chunk-HJXVVFBT.js';
 import { remify } from './chunk-IQSRHXZR.js';
 

package/dist/workbench-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/workbench-dialog/workbench-dialog.tsx"],"names":[],"mappings":"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","file":"workbench-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport {\n  Workbench,\n  type WorkbenchMainBottomToolbar,\n  type WorkbenchPanel,\n} from '../../layout/workbench/workbench.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type WorkbenchDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface WorkbenchDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. The\n   * Workbench inside is `<id>-workbench`, so its rails are\n   * `<id>-workbench-left-rail` and `<id>-workbench-right-rail`.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /** The dialog's primary title: an xl heading in the work area's toolbar. */\n  title: string;\n  /**\n   * A short supporting line under the title. It is the dialog's accessible\n   * description (`aria-describedby` to its `<id>-description`) unless\n   * `describedBy` names other content.\n   */\n  description?: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description, in\n   * place of `description`, such as app-owned summary copy in `main`.\n   */\n  describedBy?: string;\n  /** Groups after the title in the work area's toolbar. */\n  leading?: KerfUiContent;\n  /** Header controls before the close control, such as a `ToolbarControlGroup`. */\n  actions?: KerfUiContent;\n  /** The work area. */\n  main: KerfUiContent;\n  /** Fixed content over the work area's bottom toolbar, such as a status line. */\n  mainFooter?: KerfUiContent;\n  /** The work area's bottom toolbar, usually the dialog's buttons. */\n  mainBottomToolbar?: WorkbenchMainBottomToolbar;\n  /**\n   * Side rails with their own toolbars. On compact devices each presents as\n   * an overlay over the work area; the app starts it collapsed and its\n   * `toolbar.toggle` shows it.\n   */\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  /** A bottom drawer under the work area. */\n  bottomDrawer?: WorkbenchPanel;\n  /**\n   * Fill the screen with the rails as overlays: derive from\n   * `deviceClass().value.compact`.\n   */\n  compact?: boolean;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  /** Minimum work-area width beside inline rails, in px (Workbench default 320). */\n  mainMinSize?: number;\n  rootAttributes?: WorkbenchDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A rail presents as an overlay in a compact dialog, as the app left it otherwise. */\nfunction compactRail(\n  panel: WorkbenchPanel | undefined,\n  compact: boolean,\n): WorkbenchPanel | undefined {\n  return panel && compact ? { ...panel, presentation: 'overlay' } : panel;\n}\n\n/**\n * A workbench dialog: a modal whose body is a `Workbench`. The work area's\n * toolbar carries the dialog's primary title, its actions, and the close\n * control; side rails keep their own toolbars and run the dialog's full\n * height. On compact devices it fills the screen and its rails become\n * overlays over the work area, shown by their toolbar toggles, so the work\n * area keeps its width. Open it with `openDialog()`; the app owns each\n * rail's `collapsed` state, and `wireWorkbench` closes an overlay rail on\n * Escape or a press outside it before the dialog sees the Escape. Built from\n * `DialogSurface` and `Workbench`.\n */\nexport function WorkbenchDialog({\n  id,\n  label,\n  title,\n  description,\n  describedBy,\n  leading,\n  actions,\n  main,\n  mainFooter,\n  mainBottomToolbar,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  compact = false,\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  mainMinSize,\n  rootAttributes,\n  className = '',\n  slot,\n}: WorkbenchDialogProps) {\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      describedBy={\n        describedBy ??\n        (description === undefined ? undefined : `${id}-description`)\n      }\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'workbench',\n      }}\n      className={className}\n      slot={slot}\n    >\n      <Workbench\n        id={`${id}-workbench`}\n        label={label}\n        mainToolbar={{\n          label: title,\n          title: (\n            <ToolbarText\n              text={title}\n              description={description}\n              descriptionId={\n                description === undefined ? undefined : `${id}-description`\n              }\n              size=\"xlarge\"\n              id={`${id}-title`}\n              headingLevel={2}\n            />\n          ),\n          leading,\n          trailing: actions,\n          // After any hidden right rail's toggle, so Close stays outermost.\n          end: (\n            <ToolbarControlGroup appearance=\"borderless\" single>\n              <button\n                type=\"button\"\n                aria-label={closeLabel}\n                data-dialog-close=\"\"\n              >\n                <LucideIcon icon={X} name=\"x\" />\n              </button>\n            </ToolbarControlGroup>\n          ),\n        }}\n        main={main}\n        mainFooter={mainFooter}\n        mainBottomToolbar={mainBottomToolbar}\n        leftRail={compactRail(leftRail, compact)}\n        rightRail={compactRail(rightRail, compact)}\n        bottomDrawer={bottomDrawer}\n        mainMinSize={mainMinSize}\n      />\n    </DialogSurface>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/workbench-dialog/workbench-dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwGA,SAAS,WAAA,CACP,OACA,OAAA,EAC4B;AAC5B,EAAA,OAAO,SAAS,OAAA,GAAU,EAAE,GAAG,KAAA,EAAO,YAAA,EAAc,WAAU,GAAI,KAAA;AACpE;AAaO,SAAS,eAAA,CAAgB;AAAA,EAC9B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,UAAA,GAAa,OAAA;AAAA,EACb,YAAA,GAAe,KAAA;AAAA,EACf,IAAA,GAAO,OAAA;AAAA,EACP,cAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,KAAA;AAAA,MACA,aACE,WAAA,KACC,WAAA,KAAgB,MAAA,GAAY,MAAA,GAAY,GAAG,EAAE,CAAA,YAAA,CAAA,CAAA;AAAA,MAEhD,aAAA,EAAa,IAAA;AAAA,MACb,YAAA;AAAA,MACA,UAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA,EAAc,UAAU,YAAA,GAAe,OAAA;AAAA,MACvC,cAAA;AAAA,MACA,MAAA,EACE,UACI,MAAA,GACA,SAAA,KAAc,SACX,MAAA,IAAU,MAAA,CAAO,GAAG,CAAA,GACrB,MAAA;AAAA,MAER,SAAA,EAAW,UAAU,MAAA,GAAY,SAAA;AAAA,MACjC,cAAA,EAAgB,UAAU,MAAA,GAAY,cAAA;AAAA,MACtC,SAAA,EAAU,MAAA;AAAA,MACV,UAAA,EAAW,MAAA;AAAA,MACX,cAAA,EAAgB;AAAA,QACd,GAAG,cAAA;AAAA,QACH,oBAAA,EAAsB;AAAA,OACxB;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,GAAG,EAAE,CAAA,UAAA,CAAA;AAAA,UACT,KAAA;AAAA,UACA,WAAA,EAAa;AAAA,YACX,KAAA,EAAO,KAAA;AAAA,YACP,KAAA,kBACE,GAAA;AAAA,cAAC,WAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAM,KAAA;AAAA,gBACN,WAAA;AAAA,gBACA,aAAA,EACE,WAAA,KAAgB,MAAA,GAAY,MAAA,GAAY,GAAG,EAAE,CAAA,YAAA,CAAA;AAAA,gBAE/C,IAAA,EAAK,QAAA;AAAA,gBACL,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,gBACT,YAAA,EAAc;AAAA;AAAA,aAChB;AAAA,YAEF,OAAA;AAAA,YACA,QAAA,EAAU,OAAA;AAAA;AAAA,YAEV,qBACE,GAAA,CAAC,mBAAA,EAAA,EAAoB,UAAA,EAAW,YAAA,EAAa,QAAM,IAAA,EACjD,QAAA,kBAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,YAAA,EAAY,UAAA;AAAA,gBACZ,mBAAA,EAAkB,EAAA;AAAA,gBAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,CAAA,EAAG,MAAK,GAAA,EAAI;AAAA;AAAA,aAChC,EACF;AAAA,WAEJ;AAAA,UACA,IAAA;AAAA,UACA,UAAA;AAAA,UACA,iBAAA;AAAA,UACA,QAAA,EAAU,WAAA,CAAY,QAAA,EAAU,OAAO,CAAA;AAAA,UACvC,SAAA,EAAW,WAAA,CAAY,SAAA,EAAW,OAAO,CAAA;AAAA,UACzC,YAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ","file":"workbench-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport {\n  Workbench,\n  type WorkbenchMainBottomToolbar,\n  type WorkbenchPanel,\n} from '../../layout/workbench/workbench.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type WorkbenchDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface WorkbenchDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. The\n   * Workbench inside is `<id>-workbench`, so its rails are\n   * `<id>-workbench-left-rail` and `<id>-workbench-right-rail`.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /** The dialog's primary title: an xl heading in the work area's toolbar. */\n  title: string;\n  /**\n   * A short supporting line under the title. It is the dialog's accessible\n   * description (`aria-describedby` to its `<id>-description`) unless\n   * `describedBy` names other content.\n   */\n  description?: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description, in\n   * place of `description`, such as app-owned summary copy in `main`.\n   */\n  describedBy?: string;\n  /** Groups after the title in the work area's toolbar. */\n  leading?: KerfUiContent;\n  /** Header controls before the close control, such as a `ToolbarControlGroup`. */\n  actions?: KerfUiContent;\n  /** The work area. */\n  main: KerfUiContent;\n  /** Fixed content over the work area's bottom toolbar, such as a status line. */\n  mainFooter?: KerfUiContent;\n  /** The work area's bottom toolbar, usually the dialog's buttons. */\n  mainBottomToolbar?: WorkbenchMainBottomToolbar;\n  /**\n   * Side rails with their own toolbars. On compact devices each presents as\n   * an overlay over the work area; the app starts it collapsed and its\n   * `toolbar.toggle` shows it.\n   */\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  /** A bottom drawer under the work area. */\n  bottomDrawer?: WorkbenchPanel;\n  /**\n   * Fill the screen with the rails as overlays: derive from\n   * `deviceClass().value.compact`.\n   */\n  compact?: boolean;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  /** Minimum work-area width beside inline rails, in px (Workbench default 320). */\n  mainMinSize?: number;\n  rootAttributes?: WorkbenchDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A rail presents as an overlay in a compact dialog, as the app left it otherwise. */\nfunction compactRail(\n  panel: WorkbenchPanel | undefined,\n  compact: boolean,\n): WorkbenchPanel | undefined {\n  return panel && compact ? { ...panel, presentation: 'overlay' } : panel;\n}\n\n/**\n * A workbench dialog: a modal whose body is a `Workbench`. The work area's\n * toolbar carries the dialog's primary title, its actions, and the close\n * control; side rails keep their own toolbars and run the dialog's full\n * height. On compact devices it fills the screen and its rails become\n * overlays over the work area, shown by their toolbar toggles, so the work\n * area keeps its width. Open it with `openDialog()`; the app owns each\n * rail's `collapsed` state, and `wireWorkbench` closes an overlay rail on\n * Escape or a press outside it before the dialog sees the Escape. Built from\n * `DialogSurface` and `Workbench`.\n */\nexport function WorkbenchDialog({\n  id,\n  label,\n  title,\n  description,\n  describedBy,\n  leading,\n  actions,\n  main,\n  mainFooter,\n  mainBottomToolbar,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  compact = false,\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  mainMinSize,\n  rootAttributes,\n  className = '',\n  slot,\n}: WorkbenchDialogProps) {\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      describedBy={\n        describedBy ??\n        (description === undefined ? undefined : `${id}-description`)\n      }\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'workbench',\n      }}\n      className={className}\n      slot={slot}\n    >\n      <Workbench\n        id={`${id}-workbench`}\n        label={label}\n        mainToolbar={{\n          label: title,\n          title: (\n            <ToolbarText\n              text={title}\n              description={description}\n              descriptionId={\n                description === undefined ? undefined : `${id}-description`\n              }\n              size=\"xlarge\"\n              id={`${id}-title`}\n              headingLevel={2}\n            />\n          ),\n          leading,\n          trailing: actions,\n          // After any hidden right rail's toggle, so Close stays outermost.\n          end: (\n            <ToolbarControlGroup appearance=\"borderless\" single>\n              <button\n                type=\"button\"\n                aria-label={closeLabel}\n                data-dialog-close=\"\"\n              >\n                <LucideIcon icon={X} name=\"x\" />\n              </button>\n            </ToolbarControlGroup>\n          ),\n        }}\n        main={main}\n        mainFooter={mainFooter}\n        mainBottomToolbar={mainBottomToolbar}\n        leftRail={compactRail(leftRail, compact)}\n        rightRail={compactRail(rightRail, compact)}\n        bottomDrawer={bottomDrawer}\n        mainMinSize={mainMinSize}\n      />\n    </DialogSurface>\n  );\n}\n"]}

package/dist/workbench.d.ts

@@ -1,12 +1,13 @@
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { b as NavPane, N as NavStackProps } from './nav-stack-CU_0dKtI.js';
+import { b as NavPane, N as NavStackProps } from './nav-stack-CrZF95VO.js';
 import { ListConfig } from './list.js';
 import { PaneConfig } from './pane.js';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
 import { a as PanelToolbar, c as PanelBottomToolbar, b as PanelChromePlacement, d as PanelToggle } from './panel-toolbar-vg6Ir5Dy.js';
 import { ToolbarConfig } from './toolbar.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './toolbar-text.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/workbench.js

@@ -1,4 +1,5 @@
-export { Workbench } from './chunk-CPSGUGAY.js';
+export { Workbench } from './chunk-YPAQFBMN.js';
+
 
 
 

package/docs/accessibility.md

@@ -948,6 +948,12 @@ and genuinely insufficient contrast. Background images (including the catalog
 checkerboard), filters, and group opacity remain separate visual-review concerns;
 this helper measures only the solid CSS color layers.
 
+The shared light quiet and dark danger text colors also clear AA when `Text` is
+composed into a lowered `ValueTable` row or a `ListHeader` status badge on a
+document using `document.css`. `tests/browser/tone-contrast.spec.ts` covers both
+original compositions in light and dark schemes, with the Web Awesome theme
+and the foundation fallback kept in parity.
+
 Separator checks resolve the documented semantic border token in the component's
 context instead of pinning an old opaque palette value, while still verifying
 that the line has its intended width and a visible color.

package/docs/backdrop-image.md

@@ -43,6 +43,10 @@ import { remify, uiColor } from '@kerfjs/ui/css-values';
   `role="img"`; `srcset`, `sizes`, and `fit` do not apply.
 - `height` is a typed `CssLength` (default 320px). The block grows when the
   overlay content is taller.
+- `aspectRatio` reserves the block from its width for inline media; it cannot
+  be combined with `height`. `ContentItem.media` uses this form at 16:9 by
+  default and sets `loading="lazy"`. A direct `BackdropImage` can set native
+  `loading` to `lazy` or `eager`.
 - `parallax`: `none` (default) scrolls the image with the content, `subtle`
   lags by 35%, and a number from 0 to 1 is the lag factor.
 - `fadeTo` is a typed `CssColor` (`uiColor()`, `colorVar()`, `fillColor()`).

package/docs/button.md

@@ -0,0 +1,15 @@
+# Button
+
+`Button` renders a native `<button>`, or a link when given `href`. Use it for a standalone action outside a `ToolbarControlGroup`.
+
+## Current step
+
+Use `currentStep` when a Button marks the current position in a setup or progress sequence. It emits `aria-current="step"` on either form. Omit it or set it to `false` on other steps. The marker also remains on a disabled current step; disabled buttons retain their native `disabled` attribute, and disabled links lose their `href` and report `aria-disabled="true"`.
+
+```tsx
+<Button action="open-configure" currentStep>Configure</Button>
+<Button action="open-review">Review</Button>
+<Button href="/setup/finish" currentStep>Finish guide</Button>
+```
+
+The application owns the step label and which step is current. `currentStep` adds a semantic marker; it does not change the Button's styling or make a link into a toggle. Use `pressed` for an on/off toggle.

package/docs/component-contract.md

@@ -432,10 +432,14 @@ content surface's fill: a `SunkenPanel`, a sunken `Disclosure`, a lowered
 `ContentItem`, a `TabBar` strip, and translucent glass chrome at rest — a
 `Pane` overlay header, `NavStack` overlay chrome or bottom toolbar, a
 `TabNavigator` overlay bar, and a dialog's floating header; clear chrome
-paints nothing and keeps the inherited context). Interactive rows (`ListItem`,
-`ListActionRow`, `SummaryRow`) are buttons or links themselves, so no control
-nests on their hover or selection fill and they publish nothing. They are undeclared at `:root`
-and a scoped `[data-kui-tint]` resets them. A control that must match what
+paints nothing and keeps the inherited context). Interactive `ListItem` and
+`ListActionRow` actions are buttons or links themselves, so no control nests on
+their hover or selection fill. A default `SummaryRow` is a selectable option;
+`semanticRole="group"` makes it a static labeled group whose title may contain
+a nested native action. These rows publish nothing. They are undeclared at
+`:root` and a scoped `[data-kui-tint]` resets them. An option `SummaryRow`
+also accepts `draggable` on its root in row and card presentations; the app
+owns the drag gesture and drop policy. A control that must match what
 lies behind it (the inset focus ring's inner line on `Button` and
 `SplitButton`) layers tint over region over the opaque color, falling back to
 `--kui-color-surface`. Custom properties cannot fold an inherited value into a
@@ -594,6 +598,19 @@ preserves the surrounding surface.
 neutral fill so it remains visible on a lowered surface. For a card with
 multiple actions, put sibling buttons in a static ContentItem (or use
 `ListActionRow` for a simple two-action row).
+An image-led feed card uses `ContentItem.media` and an optional app-supplied
+`SurfaceTint` in `tint`. Its media composes `BackdropImage`, reserving an aspect
+ratio and running a per-image view timeline in the shared scrollport. Optional
+`overlay`, `scrim`, `fadeTo`, and `blur` use the same behavior as a page hero;
+`media.deferOffscreen` opts dense feeds into offscreen hero paint deferral
+without changing card geometry or the shared scroll owner;
+`edgeToEdge` extends media to the card's top and inline inner edges;
+`wireContentItems` handles load/error and restores the normal surface when the
+lead image fails. The once-wired helper also restores the native image state
+and tint after a render rewrites card attributes without replacing the image.
+On a light card tint without an accent, the brand on-fill token is darkened for
+AA-readable compact info Badges.
+See [Content items](layout.md#content-items).
 For an interactive ContentItem, `wireContentItems` activates the card on Enter
 or Space only when the key event originated from the card itself. A nested
 native control, including one inside a custom element's shadow root, keeps its
@@ -700,6 +717,10 @@ item padding, omit an internal separator, and let the raised selected item paint
 over the outer border instead of shrinking to an inset highlight. The
 PopupMenu trigger sizes to max-content, so icons, localized text, and the caret
 determine the width without a fixed measurement.
+Inside a `single` icon `ToolbarControlGroup`, an icon-only PopupMenu trigger
+fills the group's control slot, keeping its glyph centered and the full
+40px hit target in enabled and disabled states. Text and mixed-content triggers
+continue to size to their content.
 At viewport widths of 480px or less, `PopupMenu` places an open submenu above
 or below its parent menu, choosing the side with room and constraining the
 submenu to the viewport. It never paints over the parent list. The reverse
@@ -746,6 +767,15 @@ action on click or keyboard activation. The application owns the editing control
 and the swap between display and edit states. An actionable title is a button,
 so place any required heading landmark on another element in the view.
 
+`ValuePreview` displays a literal read-only string in a bounded, keyboard-scrollable
+`output` with an accessible label. It preserves line breaks and wraps long
+tokens without painting a second surface; compose it inside `SunkenPanel` for
+a lowered frame. See [ValuePreview](value-preview.md).
+`EditorFrame` owns a fixed Toolbar row over a native textarea in source mode
+or a scrolling rendered preview. Its framed, embedded, flush, autosize, and
+expanded variants keep editing and draft policy in the application. See
+[EditorFrame](editor-frame.md).
+
 `ValueTable` composes typed `ValueTableRow` entries. A row owns its `dt`/`dd`
 semantics and may receive a leading `SafeHtml` icon. Every row keeps 8px of
 root-scaled padding above and below its content; the shared item-padding token

package/docs/component-selection.md

@@ -274,7 +274,7 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Desktop multi-panel workspace — `Workbench`                                                                                   | A desktop-class tool needs a central work area plus independently collapsible navigator, inspector, or console regions.                                                                                                                                                                                                                                                                                   | Do not shrink the full shell onto compact devices or use it for one standalone panel.                                                                                                                                                                                                                                                      | Render only the required rails/drawer, keep collapse state controlled, and replace peripheral regions with stacks or overlays below desktop sizes. Opt a panel into drag/keyboard resizing with `resizable` and call `wireWorkbench` with its size signal.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Panel presence/content, collapsed states, sizes, persistence, responsive replacement, and controls.                                                      | `@kerfjs/ui/workbench`                                                                    | [Workbench](./workbench.md)                                                                    |
 | Standalone rail or drawer — `CollapsiblePanel`                                                                                | One left/right rail or bottom drawer needs controlled collapse without adopting the complete `Workbench` shell.                                                                                                                                                                                                                                                                                           | Do not use it for several coordinated workspace panels or retain an empty icon-only rail while collapsed.                                                                                                                                                                                                                                  | Pair it with `CollapsiblePanelToggle`; call `wireSidebar` for focus transfer, Escape/backdrop dismissal, compact overlay trapping, and persistence integration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Panel content/size, collapsed state, toggle placement, persistence, and compact policy.                                                                  | `@kerfjs/ui/collapsible-panel`                                                            | [App-layout decision matrix](./app-layouts.md#decision-matrix)                                 |
 | Lowered content surface — `SunkenPanel`                                                                                       | A main work area or nested content group needs one visually lowered surface with a compact inset and vertical stack.                                                                                                                                                                                                                                                                                      | Do not use it merely to add padding, as a replacement for `Pane` anatomy, or around children that already own the same outer surface.                                                                                                                                                                                                      | Compose the application-owned content as children, choose the default `rounded` shape or `square` for a flush edge-to-edge area, and pass `ariaLabel` only when the surface is a distinct named region. Every sunken surface carries a fine grain texture, generated once per page by the first one that renders; call `ensureSunkenTexture` only when the page paints Web Awesome `appearance="sunken"` without any Kerf sunken component, and set `--kui-sunken-texture: none` at `:root` for a flat surface.                                                                                                                                                                                                                                                                                                                                                | Region semantics, accessible name, shape, scroll ownership, child ordering, and content.                                                                 | `@kerfjs/ui/sunken-panel`                                                                 | [SunkenPanel](./sunken-panel.md)                                                               |
-| Scrolling view's hero image — `BackdropImage`                                                                                 | A scrolling `Pane` or `NavStack` view opens with a mood or identity image (an artist, album, or place page) that should lag the scroll, dissolve into a color, and read as one surface with the content below.                                                                                                                                                                                            | Do not use it for inline content images, thumbnails, or avatars. Do not hand-roll scroll listeners, `background-attachment: fixed`, or mask gradients. Do not use it outside a vertical scroller; parallax needs one.                                                                                                                      | Place it first in the scrolling content. Pass `src`, `alt` (`""` for decoration), optional `srcset`/`sizes`, `fit`/`position` or a tiled `repeat`, a typed `height`, `parallax` (`none`, `subtle`, or a 0 to 1 factor), `blur` (`radius`, `blurredSrc`, `dim`) for a progressive blur, a typed `fadeTo` color that also paints below, a `scrim` for overlay text, `overlay` content over its block end, and `children` below. Kerf owns the scroll-driven, compositor-only parallax and its static fallbacks.                                                                                                                                                                                                                                                                                                                                                  | The image and alt text, the fade color, overlay content and its contrast, and the content below.                                                         | `@kerfjs/ui/backdrop-image`                                                               | [BackdropImage](./backdrop-image.md)                                                           |
+| Scrolling view hero or card media — `BackdropImage`                                                                           | A scrolling Pane, NavStack view, or image-led ContentItem needs artwork that can lag the scroll, blur, fade, and carry an overlay.                                                                                                                                                                                                                                                                        | Use `ContentItem.media` for feed cards; use `BackdropImage` directly for a page hero. Avoid per-card scroll listeners and `background-attachment: fixed`.                                                                                                                                                                                  | Pass `src`, `alt`, optional responsive sources, `height` for a page hero or `aspectRatio` for inline media, `parallax`, `blur`, `fadeTo`, `scrim`, and `overlay`. `ContentItem.media` composes the same behavior and can extend to the card edges.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The app owns the artwork, alt text, fade color, overlay content, and contrast.                                                                           | `@kerfjs/ui/backdrop-image`                                                               | [BackdropImage](./backdrop-image.md)                                                           |
 | Menu composition                                                                                                              | Navigation sections need full-size rows and the same content-item geometry as every other pane.                                                                                                                                                                                                                                                                                                           | Do not add sidebar-specific wrapper padding, shrink targets to icon size, nest an interactive trailing control in `ListItem`, or use a chevron on a row that does not disclose content. Use ordinary links for a different navigation contract.                                                                                            | Compose `ListHeader`, `ListItem`, and `ListActionRow` in `.kui-content`; use `ListHeader` toggle mode with real controlled content, and use `ContentItem` for other surfaces plus a pane footer for toolbar actions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Information architecture, disclosure content and state, responsive drawer/shell behavior, and token overrides.                                           | `@kerfjs/ui/layout.css`                                                                   | [Pane geometry](../README.md#pane-and-content-geometry)                                        |
 | Resizable application pane — `ResizableRegion`, `clampRegionSize`, `resizeRegionFromPointer`                                  | A controlled split pane needs the Kerf separator, collapse state, pointer plus keyboard resizing, or a product-specific decorative grip.                                                                                                                                                                                                                                                                  | Do not use it for static equal columns; use `Grid`. Use application CSS grid for static asymmetric or intrinsic tracks. Prefer it over Web Awesome `wa-split-panel` unless that component's distinct API is required. Keep `handleIcon` noninteractive.                                                                                    | Call `wireResizableRegions` from `@kerfjs/ui/wire-resizable-regions` once and retain its disposer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Size signal, min/max policy, collapse policy, persistence, and optional decorative handle icon.                                                          | `@kerfjs/ui/resizable-region`                                                             | [ResizableRegion contract](./accessibility.md#resizableregion)                                 |
 | One application tab — `TabBarItem`                                                                                            | A controlled app tab needs selection, close, drag, leading/trailing anatomy, compact/segmented/icon-only presentation, label truncation, safe domain metadata, or a product-specific close glyph.                                                                                                                                                                                                         | Do not render it alone or use it for a small settings choice; compose in `TabBar`, or use `SegmentedControl`. Keep `closeIcon` noninteractive.                                                                                                                                                                                             | Compose in `TabBar`; let `wireTabBars` manage interaction. Put only domain `data-*` values in `rootAttributes`; use typed appearance props instead of descendant CSS.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Tab identity, order, selection, close policy, content, domain metadata values, and outer placement.                                                      | `@kerfjs/ui/tab-bar-item`                                                                 | [Tabs contract](./accessibility.md#tabs)                                                       |
@@ -323,6 +323,11 @@ For a lowered background behind an entire scrolling work area, choose
 `Pane appearance="sunken"` or the appearance option on the layout that owns
 the scroll viewport. Use `SunkenPanel` for a padded content group that does
 not introduce scrolling. See [Lowered work surfaces](./layout.md#lowered-work-surfaces).
+For a long read-only value inside that panel, use `ValuePreview`
+([guide](./value-preview.md))
+to preserve line breaks and keep the value's own scroll region bounded.
+For a toolbar above a native editing or preview surface, use `EditorFrame`
+([guide](./editor-frame.md)); it owns the bounded frame and one scroll owner.
 
 Set `ResizableRegion`'s `--kui-resizable-region-background` for an inline
 surface. A `PopupMenu` opens in the browser top layer, so the region keeps
@@ -818,6 +823,16 @@ are distinct interaction contracts: a command menu still uses `PopupMenu`.
 
 ## Configuring recurring list rows
 
+`SummaryRow` is a selectable `role="option"` by default. For an unreadable
+item diagnostic with a recovery button inside the title, set
+`semanticRole="group"` and a required `ariaLabel`. The row keeps its `row` or
+`card` chrome, rail, list-edge rounding, and selected visual fill, but it has
+no root Tab stop or `aria-selected`; the nested button owns keyboard focus and
+activation. Keep option rows in the app's labeled listbox.
+Set `draggable` on an option to make the same row or card root a native drag
+source; it preserves role, selection, focus, and delegated `data-*` identity
+through rerenders. Handle `dragstart` and drop policy in the application.
+
 Configure the List family instead of selecting its descendant classes. Use
 `density="compact"` for result-heavy panes, `description` for the secondary
 label line, `status` for dormant state text, and `busy` for known progress that

package/docs/design/templates/button/emphasis-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,105,108)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,133,136)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></svg>

package/docs/design/templates/button-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 870" width="552" height="870"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></clipPath><clipPath id="cp4"><rect x="16" y="526" width="520" height="84"/></clipPath><clipPath id="cp5"><rect x="16" y="648" width="520" height="84"/></clipPath><clipPath id="cp6"><rect x="16" y="770" width="520" height="84"/></clipPath><clipPath id="ct7"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="38" width="520" height="84" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct16"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc17"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath><clipPath id="ct19"><rect x="16" y="504" width="520" height="22"/></clipPath><clipPath id="irc20"><rect x="16" y="526" width="520" height="84" rx="0"/></clipPath><clipPath id="ct22"><rect x="16" y="626" width="520" height="22"/></clipPath><clipPath id="irc23"><rect x="16" y="648" width="520" height="84" rx="0"/></clipPath><clipPath id="ct25"><rect x="16" y="748" width="520" height="22"/></clipPath><clipPath id="irc26"><rect x="16" y="770" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="870" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Primary Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg9ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="svgimg9ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="svgimg9ct2"><rect x="237.3" y="33" width="88.9" height="18"/></clipPath><clipPath id="svgimg9ct3"><rect x="352.2" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Cancel</text><rect x="228.3" y="20" width="106.9" height="44" rx="12" fill="rgb(52,199,89)"/><rect x="228.5" y="20.5" width="106" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Price Check</text><rect x="343.2" y="20" width="122.8" height="44" rx="12" fill="rgb(255,56,60)"/><rect x="343.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="352.16" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete Project</text></g></g></g></g><text x="16" y="150" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Secondary and Plain Emphasis</text><g clip-path="url(#cp1)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg12ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg12ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="svgimg12ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,105,108)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></g></g></g></g><text x="16" y="272" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">With an Icon, and Icon Only</text><g clip-path="url(#cp2)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg15cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15ct2"><rect x="53" y="33" width="82.6" height="18"/></clipPath><clipPath id="svgimg15cp3"><rect x="161.6" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg15ct5"><rect x="185.6" y="33" width="45.6" height="18"/></clipPath><clipPath id="svgimg15cp6"><rect x="262" y="34" width="16.3" height="16"/></clipPath></defs><rect x="20" y="20" width="124.6" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="124" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg15svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">New Ticket</text><rect x="152.6" y="20" width="87.6" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="153.5" y="20.5" width="86" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp3)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic4"><rect x="161.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic4)"><g transform="translate(161.64 34)scale(.66667)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="185.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Filters</text><rect x="248.3" y="20" width="44" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="248.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp6)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic7"><rect x="262.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic7)"><g transform="translate(262.281 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="394" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact and Disabled</text><g clip-path="url(#cp3)"><g clip-path="url(#irc17)"><clipPath id="svgimg18vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg18vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg18ct0"><rect x="29" y="33.5" width="60" height="17"/></clipPath><clipPath id="svgimg18ct1"><rect x="115" y="33" width="85.5" height="18"/></clipPath></defs><rect x="20" y="25.5" width="78" height="33" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="26.5" width="77" height="32" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="47.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="500" fill="rgb(28,28,30)">Compact</text><g opacity="0.5" style="isolation:isolate"><rect x="106" y="20" width="103.5" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="106.5" y="20.5" width="102" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.98" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Unavailable</text></g></g></g></g></g><text x="16" y="516" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Toggle, Resting and Pressed</text><g clip-path="url(#cp4)"><g clip-path="url(#irc20)"><clipPath id="svgimg21vclip"><rect x="16" y="526" width="520" height="84"/></clipPath><g clip-path="url(#svgimg21vclip)"><g transform="translate(16 526)"><defs><clipPath id="svgimg21ct0"><rect x="29" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc1"><rect x="106" y="21" width="99" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp2"><rect x="114" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg21ct4"><rect x="138" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc5"><rect x="215.1" y="21" width="67.1" height="42" rx="11"/></clipPath><clipPath id="svgimg21ct6"><rect x="223.1" y="33" width="51.1" height="18"/></clipPath><clipPath id="svgimg21ishc7"><rect x="292.2" y="21" width="42" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp8"><rect x="305" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="77" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Favorite</text><rect x="105" y="20" width="101" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc1)"><path d="M98 13h115.1v58H98zm19 10h77.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9H117a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="105.5" y="20.5" width="100" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp2)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic3"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic3)"><g transform="translate(114.047 34)scale(.66667)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="138.05" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Favorite</text><rect x="214.1" y="20" width="69.1" height="44" rx="12" fill="rgb(134,219,255)"/><g clip-path="url(#svgimg21ishc5)"><path d="M207.1 13h83.1v58h-83.1zm19 10h45.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-45.1a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="214.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="223.09" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Pinned</text><rect x="291.2" y="20" width="44" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc7)"><path d="M284.2 13h58v58h-58zm19 10h20a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-20a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="291.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp8)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic9"><rect x="305.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic9)"><g transform="translate(305.219 34)scale(.66667)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="638" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Pill Shape</text><g clip-path="url(#cp5)"><g clip-path="url(#irc23)"><clipPath id="svgimg24vclip"><rect x="16" y="648" width="520" height="84"/></clipPath><g clip-path="url(#svgimg24vclip)"><g transform="translate(16 648)"><defs><clipPath id="svgimg24ct0"><rect x="29" y="33" width="47.6" height="18"/></clipPath><clipPath id="svgimg24ct1"><rect x="102.6" y="33" width="43" height="18"/></clipPath><clipPath id="svgimg24cp2"><rect x="176.6" y="34" width="16.4" height="16"/></clipPath></defs><rect x="20" y="20" width="65.6" height="44" rx="22" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="65" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Follow</text><rect x="93.6" y="20" width="61" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="94.5" y="20.5" width="60" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="102.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Share</text><rect x="162.6" y="20" width="44" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="163.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg24cp2)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg24svgic3"><rect x="176.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg24svgic3)"><g transform="translate(176.625 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="760" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Full-Width Primary Action</text><g clip-path="url(#cp6)"><g clip-path="url(#irc26)"><clipPath id="svgimg27vclip"><rect x="16" y="770" width="520" height="84"/></clipPath><g clip-path="url(#svgimg27vclip)"><g transform="translate(16 770)"><defs><clipPath id="svgimg27cp0"><rect x="174.9" y="34" width="16.1" height="16"/></clipPath><clipPath id="svgimg27cp2"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath><clipPath id="svgimg27ct3"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="439" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg27svgic1"><rect x="174.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic1)"><g transform="translate(174.86 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg27cp2)"><g clip-path="url(#svgimg27ct3)"><text x="198.86" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Create Project</text></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 870" width="552" height="870"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></clipPath><clipPath id="cp4"><rect x="16" y="526" width="520" height="84"/></clipPath><clipPath id="cp5"><rect x="16" y="648" width="520" height="84"/></clipPath><clipPath id="cp6"><rect x="16" y="770" width="520" height="84"/></clipPath><clipPath id="ct7"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="38" width="520" height="84" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct16"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc17"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath><clipPath id="ct19"><rect x="16" y="504" width="520" height="22"/></clipPath><clipPath id="irc20"><rect x="16" y="526" width="520" height="84" rx="0"/></clipPath><clipPath id="ct22"><rect x="16" y="626" width="520" height="22"/></clipPath><clipPath id="irc23"><rect x="16" y="648" width="520" height="84" rx="0"/></clipPath><clipPath id="ct25"><rect x="16" y="748" width="520" height="22"/></clipPath><clipPath id="irc26"><rect x="16" y="770" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="870" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Primary Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg9ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="svgimg9ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="svgimg9ct2"><rect x="237.3" y="33" width="88.9" height="18"/></clipPath><clipPath id="svgimg9ct3"><rect x="352.2" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Cancel</text><rect x="228.3" y="20" width="106.9" height="44" rx="12" fill="rgb(52,199,89)"/><rect x="228.5" y="20.5" width="106" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Price Check</text><rect x="343.2" y="20" width="122.8" height="44" rx="12" fill="rgb(255,56,60)"/><rect x="343.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="352.16" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete Project</text></g></g></g></g><text x="16" y="150" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Secondary and Plain Emphasis</text><g clip-path="url(#cp1)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg12ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg12ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="svgimg12ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,133,136)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></g></g></g></g><text x="16" y="272" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">With an Icon, and Icon Only</text><g clip-path="url(#cp2)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg15cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15ct2"><rect x="53" y="33" width="82.6" height="18"/></clipPath><clipPath id="svgimg15cp3"><rect x="161.6" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg15ct5"><rect x="185.6" y="33" width="45.6" height="18"/></clipPath><clipPath id="svgimg15cp6"><rect x="262" y="34" width="16.3" height="16"/></clipPath></defs><rect x="20" y="20" width="124.6" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="124" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg15svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">New Ticket</text><rect x="152.6" y="20" width="87.6" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="153.5" y="20.5" width="86" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp3)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic4"><rect x="161.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic4)"><g transform="translate(161.64 34)scale(.66667)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="185.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Filters</text><rect x="248.3" y="20" width="44" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="248.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp6)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic7"><rect x="262.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic7)"><g transform="translate(262.281 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="394" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact and Disabled</text><g clip-path="url(#cp3)"><g clip-path="url(#irc17)"><clipPath id="svgimg18vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg18vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg18ct0"><rect x="29" y="33.5" width="60" height="17"/></clipPath><clipPath id="svgimg18ct1"><rect x="115" y="33" width="85.5" height="18"/></clipPath></defs><rect x="20" y="25.5" width="78" height="33" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="26.5" width="77" height="32" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="47.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="500" fill="rgb(28,28,30)">Compact</text><g opacity="0.5" style="isolation:isolate"><rect x="106" y="20" width="103.5" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="106.5" y="20.5" width="102" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.98" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Unavailable</text></g></g></g></g></g><text x="16" y="516" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Toggle, Resting and Pressed</text><g clip-path="url(#cp4)"><g clip-path="url(#irc20)"><clipPath id="svgimg21vclip"><rect x="16" y="526" width="520" height="84"/></clipPath><g clip-path="url(#svgimg21vclip)"><g transform="translate(16 526)"><defs><clipPath id="svgimg21ct0"><rect x="29" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc1"><rect x="106" y="21" width="99" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp2"><rect x="114" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg21ct4"><rect x="138" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc5"><rect x="215.1" y="21" width="67.1" height="42" rx="11"/></clipPath><clipPath id="svgimg21ct6"><rect x="223.1" y="33" width="51.1" height="18"/></clipPath><clipPath id="svgimg21ishc7"><rect x="292.2" y="21" width="42" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp8"><rect x="305" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="77" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Favorite</text><rect x="105" y="20" width="101" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc1)"><path d="M98 13h115.1v58H98zm19 10h77.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9H117a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="105.5" y="20.5" width="100" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp2)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic3"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic3)"><g transform="translate(114.047 34)scale(.66667)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="138.05" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Favorite</text><rect x="214.1" y="20" width="69.1" height="44" rx="12" fill="rgb(134,219,255)"/><g clip-path="url(#svgimg21ishc5)"><path d="M207.1 13h83.1v58h-83.1zm19 10h45.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-45.1a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="214.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="223.09" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Pinned</text><rect x="291.2" y="20" width="44" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc7)"><path d="M284.2 13h58v58h-58zm19 10h20a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-20a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="291.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp8)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic9"><rect x="305.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic9)"><g transform="translate(305.219 34)scale(.66667)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="638" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Pill Shape</text><g clip-path="url(#cp5)"><g clip-path="url(#irc23)"><clipPath id="svgimg24vclip"><rect x="16" y="648" width="520" height="84"/></clipPath><g clip-path="url(#svgimg24vclip)"><g transform="translate(16 648)"><defs><clipPath id="svgimg24ct0"><rect x="29" y="33" width="47.6" height="18"/></clipPath><clipPath id="svgimg24ct1"><rect x="102.6" y="33" width="43" height="18"/></clipPath><clipPath id="svgimg24cp2"><rect x="176.6" y="34" width="16.4" height="16"/></clipPath></defs><rect x="20" y="20" width="65.6" height="44" rx="22" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="65" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Follow</text><rect x="93.6" y="20" width="61" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="94.5" y="20.5" width="60" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="102.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Share</text><rect x="162.6" y="20" width="44" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="163.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg24cp2)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg24svgic3"><rect x="176.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg24svgic3)"><g transform="translate(176.625 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="760" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Full-Width Primary Action</text><g clip-path="url(#cp6)"><g clip-path="url(#irc26)"><clipPath id="svgimg27vclip"><rect x="16" y="770" width="520" height="84"/></clipPath><g clip-path="url(#svgimg27vclip)"><g transform="translate(16 770)"><defs><clipPath id="svgimg27cp0"><rect x="174.9" y="34" width="16.1" height="16"/></clipPath><clipPath id="svgimg27cp2"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath><clipPath id="svgimg27ct3"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="439" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg27svgic1"><rect x="174.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic1)"><g transform="translate(174.86 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg27cp2)"><g clip-path="url(#svgimg27ct3)"><text x="198.86" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Create Project</text></g></g></g></g></g></g></svg>

package/docs/design/templates/checkbox/error-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 90" width="400" height="90"><defs><clipPath id="ct0"><rect x="48" y="20" width="187.9" height="19.6"/></clipPath><clipPath id="ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">I accept the release terms</text><text x="48" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(255,105,108)">Accept the terms to continue.</text><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 90" width="400" height="90"><defs><clipPath id="ct0"><rect x="48" y="20" width="187.9" height="19.6"/></clipPath><clipPath id="ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">I accept the release terms</text><text x="48" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(255,133,136)">Accept the terms to continue.</text><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></svg>

package/docs/design/templates/checkbox/states.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="48" y="20" width="126.1" height="19.6"/></clipPath><clipPath id="ct1"><rect x="48" y="48" width="122" height="19.6"/></clipPath><clipPath id="ct2"><rect x="20" y="68" width="360" height="22.4"/></clipPath><clipPath id="ct3"><rect x="48" y="98.4" width="106.7" height="19.6"/></clipPath><clipPath id="cp4"><rect x="23" y="101" width="14" height="14.4"/></clipPath><clipPath id="cp6"><rect x="23" y="23" width="14" height="14"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Include in release</text><text x="48" y="63.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Email summaries</text><text x="48" y="84" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">Sent every Monday morning.</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="113.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Locked setting</text><rect x="20" y="98.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="98.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp4)"><g color="rgb(255, 255, 255)"><clipPath id="svgic5"><rect x="23" y="101.4" width="14" height="14"/></clipPath><g clip-path="url(#svgic5)"><g transform="translate(23 101.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp6)"><g color="rgb(255, 255, 255)"><clipPath id="svgic7"><rect x="23" y="23" width="14" height="14"/></clipPath><g clip-path="url(#svgic7)"><g transform="translate(23 23)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="48" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="48.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="48" y="20" width="126.1" height="19.6"/></clipPath><clipPath id="ct1"><rect x="48" y="48" width="122" height="19.6"/></clipPath><clipPath id="ct2"><rect x="20" y="68" width="360" height="22.4"/></clipPath><clipPath id="ct3"><rect x="48" y="98.4" width="106.7" height="19.6"/></clipPath><clipPath id="cp4"><rect x="23" y="101" width="14" height="14.4"/></clipPath><clipPath id="cp6"><rect x="23" y="23" width="14" height="14"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Include in release</text><text x="48" y="63.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Email summaries</text><text x="48" y="84" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(100,100,105)">Sent every Monday morning.</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="113.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Locked setting</text><rect x="20" y="98.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="98.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp4)"><g color="rgb(255, 255, 255)"><clipPath id="svgic5"><rect x="23" y="101.4" width="14" height="14"/></clipPath><g clip-path="url(#svgic5)"><g transform="translate(23 101.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp6)"><g color="rgb(255, 255, 255)"><clipPath id="svgic7"><rect x="23" y="23" width="14" height="14"/></clipPath><g clip-path="url(#svgic7)"><g transform="translate(23 23)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="48" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="48.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></svg>