@kerfjs/ui 5.0.0-beta.101 → 5.0.0-beta.103

package/ai/component-catalog.json

@@ -84,26 +84,29 @@
       "category": "Foundation",
       "kind": "component",
       "source": "kerf",
-      "description": "A short tag with semantic or inherited tone, an optional accessible remove button, or a native link and download form, including compact and disabled variants.",
+      "description": "A short tag with semantic or inherited tone, an optional accessible remove button, a native link and download form, or a native action button, including compact and disabled variants.",
       "uses": [],
-      "purpose": "Render removable tags and file or link chips without application rules on Web Awesome internals or anchor chrome.",
+      "purpose": "Render removable tags, file or link chips, and activatable action chips without application rules on Web Awesome internals or anchor and button chrome.",
       "publicExports": [
         "Chip"
       ],
       "useWhen": [
         "Show a short tag that the application can remove through a delegated action, including a compact or disabled tag.",
-        "Show a downloadable file or a short link with chip geometry, such as the referenced files of a chat message; set tone inherit inside a brand-loud or neutral ContentItem bubble."
+        "Show a downloadable file or a short link with chip geometry, such as the referenced files of a chat message; set tone inherit inside a brand-loud or neutral ContentItem bubble.",
+        "Offer a short value the user can activate to apply it, such as a filter token in a search syntax help popover that inserts itself into the query: set action (and itemId) so the whole chip is a native button."
       ],
       "avoidWhen": [
         "Use Badge for non-interactive status and count metadata.",
         "Do not use the remove button without a specific accessible name.",
-        "Use ListItemLink for a navigation row and ToolbarActionLink for a toolbar link."
+        "Use ListItemLink for a navigation row and ToolbarActionLink for a toolbar link.",
+        "Use ChoiceChips when the chips choose a persistent value with radio or checkbox state; an action chip fires a one-shot command."
       ],
       "alternatives": [],
       "appOwns": [
         "tag text and identity",
         "remove action and list update",
         "link destination and download file name",
+        "action handler and its effect",
         "disabled policy"
       ],
       "variants": [
@@ -111,12 +114,13 @@
         "quiet, solid, or outline appearance",
         "pill or rounded shape",
         "compact or default size",
-        "removable, link, or plain, enabled or disabled"
+        "removable, link, action, or plain, enabled or disabled"
       ],
       "accessibility": [
         "The remove control is a native button and requires an action and a specific removeLabel. A disabled chip disables that button and removes it from keyboard interaction.",
         "A link chip is a native anchor named by its visible label; external adds a safe rel, a new tab, and an \"(opens in new tab)\" name suffix, and a disabled link chip drops its destination and leaves the tab order.",
         "The inherit tone paints no fill, so its label keeps the surrounding text contrast, and its focus ring follows the surrounding foreground.",
+        "An action chip is one native button (type button) named by its visible label or by actionLabel, which should include that label; Enter and Space activate it, it shows the focus ring on keyboard focus, and a disabled action chip is a disabled button that leaves the tab order. It cannot also be a link or carry a remove button.",
         "Keep meaningful tag text visible because tone is supplementary."
       ],
       "geometry": {

package/ai/component-composition.json

@@ -88,6 +88,11 @@
           "owner": "application",
           "required": false
         },
+        {
+          "id": "action handler and its effect",
+          "owner": "application",
+          "required": false
+        },
         { "id": "disabled policy", "owner": "application", "required": false }
       ],
       "wiring": {
@@ -106,6 +111,7 @@
           "The remove control is a native button and requires an action and a specific removeLabel. A disabled chip disables that button and removes it from keyboard interaction.",
           "A link chip is a native anchor named by its visible label; external adds a safe rel, a new tab, and an \"(opens in new tab)\" name suffix, and a disabled link chip drops its destination and leaves the tab order.",
           "The inherit tone paints no fill, so its label keeps the surrounding text contrast, and its focus ring follows the surrounding foreground.",
+          "An action chip is one native button (type button) named by its visible label or by actionLabel, which should include that label; Enter and Space activate it, it shows the focus ring on keyboard focus, and a disabled action chip is a disabled button that leaves the tab order. It cannot also be a link or carry a remove button.",
           "Keep meaningful tag text visible because tone is supplementary."
         ]
       },

package/ai/components/README.md

@@ -9,7 +9,7 @@ Exact prop and callback types live in [`public-api-signatures-v1.md`](../public-
 ## Kerf UI — Foundation
 
 - [Badge](./badge.md) — Present compact metadata without application-authored badge CSS or consumer styling of component internals.
-- [Chip](./chip.md) — Render removable tags and file or link chips without application rules on Web Awesome internals or anchor chrome.
+- [Chip](./chip.md) — Render removable tags, file or link chips, and activatable action chips without application rules on Web Awesome internals or anchor and button chrome.
 - [LucideIcon](./lucide-icon.md) — Decorative and meaningfully labeled Lucide-compatible icons.
 - [DisclosureArrow](./disclosure-arrow.md) — Indicate whether a disclosure control is open with an overridable 18px root-scaled visual and shortest-path rotation behavior.
 - [Foundation Tokens](./foundation.md) — Provide the shared semantic token foundation for application themes and every styled Kerf UI component.

package/ai/components/chip.md

@@ -4,20 +4,22 @@
 
 `@kerfjs/ui:chip` · Kerf UI · component · Foundation
 
-A short tag with semantic or inherited tone, an optional accessible remove button, or a native link and download form, including compact and disabled variants.
+A short tag with semantic or inherited tone, an optional accessible remove button, a native link and download form, or a native action button, including compact and disabled variants.
 
 ## When to use
 
-Render removable tags and file or link chips without application rules on Web Awesome internals or anchor chrome.
+Render removable tags, file or link chips, and activatable action chips without application rules on Web Awesome internals or anchor and button chrome.
 
 - Show a short tag that the application can remove through a delegated action, including a compact or disabled tag.
 - Show a downloadable file or a short link with chip geometry, such as the referenced files of a chat message; set tone inherit inside a brand-loud or neutral ContentItem bubble.
+- Offer a short value the user can activate to apply it, such as a filter token in a search syntax help popover that inserts itself into the query: set action (and itemId) so the whole chip is a native button.
 
 **Not when:**
 
 - Use Badge for non-interactive status and count metadata.
 - Do not use the remove button without a specific accessible name.
 - Use ListItemLink for a navigation row and ToolbarActionLink for a toolbar link.
+- Use ChoiceChips when the chips choose a persistent value with radio or checkbox state; an action chip fires a one-shot command.
 
 ## Imports
 
@@ -35,7 +37,7 @@ Exact prop names and types: [`@kerfjs/ui/chip`](../public-api-signatures-v1.md#k
 - quiet, solid, or outline appearance
 - pill or rounded shape
 - compact or default size
-- removable, link, or plain, enabled or disabled
+- removable, link, action, or plain, enabled or disabled
 
 ## Composition
 
@@ -45,7 +47,7 @@ Exact prop names and types: [`@kerfjs/ui/chip`](../public-api-signatures-v1.md#k
 
 ## State and wiring
 
-**The app owns:** tag text and identity; remove action and list update; link destination and download file name; disabled policy.
+**The app owns:** tag text and identity; remove action and list update; link destination and download file name; action handler and its effect; disabled policy.
 
 No wiring helper.
 
@@ -58,6 +60,7 @@ Margin: none · border: self · padding: self (layout role: foundation). `self`
 - The remove control is a native button and requires an action and a specific removeLabel. A disabled chip disables that button and removes it from keyboard interaction.
 - A link chip is a native anchor named by its visible label; external adds a safe rel, a new tab, and an "(opens in new tab)" name suffix, and a disabled link chip drops its destination and leaves the tab order.
 - The inherit tone paints no fill, so its label keeps the surrounding text contrast, and its focus ring follows the surrounding foreground.
+- An action chip is one native button (type button) named by its visible label or by actionLabel, which should include that label; Enter and Space activate it, it shows the focus ring on keyboard focus, and a disabled action chip is a disabled button that leaves the tab order. It cannot also be a link or carry a remove button.
 - Keep meaningful tag text visible because tone is supplementary.
 
 ## Styling boundary

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.101` and `kerfjs@5.0.0-beta.101`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.103` and `kerfjs@5.0.0-beta.103`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -4166,6 +4166,31 @@ interface ChipNoLinkProps {
     download?: never;
     external?: never;
 }
+interface ChipNoActionProps {
+    action?: never;
+    actionLabel?: never;
+}
+/**
+ * An action chip renders its whole root as a native
+ * `<button type="button">` carrying `data-action` (and `data-item-id`) for an
+ * application delegated handler. It cannot also be a link or carry a remove
+ * button, because nested interactive content is invalid.
+ */
+interface ChipActionProps {
+    /** Delegated action name; the chip renders as a native `<button>`. */
+    action: string;
+    /**
+     * Accessible name when the visible label alone is unclear, such as
+     * "Insert filter is:mine". Start it with, or include, the visible label so
+     * speech input still matches.
+     */
+    actionLabel?: string;
+    href?: never;
+    download?: never;
+    external?: never;
+    removeAction?: never;
+    removeLabel?: never;
+}
 /**
  * A link chip renders a native `<a>` with Chip geometry. It cannot also carry
  * a remove button, because a button inside a link is invalid.
@@ -4179,23 +4204,28 @@ interface ChipLinkProps {
     external?: boolean;
     removeAction?: never;
     removeLabel?: never;
+    action?: never;
+    actionLabel?: never;
 }
 /**
  * A plain chip, a removable chip (a delegated action plus a specific
- * accessible name), or a link chip (`href`, optional `download`/`external`).
+ * accessible name), a link chip (`href`, optional `download`/`external`), or
+ * an action chip (`action`, optional `actionLabel`) whose whole body is a
+ * native button.
  */
 type ChipProps = ChipCommonProps & ChipLabelProps & (({
     removeAction: string;
     removeLabel: string;
-} & ChipNoLinkProps) | ({
+} & ChipNoLinkProps & ChipNoActionProps) | ({
     removeAction?: never;
     removeLabel?: never;
-} & ChipNoLinkProps) | ChipLinkProps);
+} & ChipNoLinkProps & ChipNoActionProps) | ChipLinkProps | ChipActionProps);
 /**
- * A short label with an optional native remove button, or a native link when
- * `href` is set. The application owns removal and the link destination.
+ * A short label with an optional native remove button, a native link when
+ * `href` is set, or a native button when `action` is set. The application
+ * owns removal, the link destination, and the action handler.
  */
-declare function Chip({ children, icon, truncate, tone, appearance, shape, size, disabled, itemId, className, slot, href, download, external, removeAction, removeLabel, }: ChipProps): SafeHtml;
+declare function Chip({ children, icon, truncate, tone, appearance, shape, size, disabled, itemId, className, slot, href, download, external, removeAction, removeLabel, action, actionLabel, }: ChipProps): SafeHtml;
 
 export { Chip, type ChipProps, type ChipTone };
 ```

package/ai/skill.md

@@ -470,7 +470,7 @@ For prominent content text, use `Text size="large"`; use `size="xlarge"` for dis
 
 For an exclusive choice among several visible options that must wrap (a labeled color palette), use `ChoiceChips` from `@kerfjs/ui/choice-chips`: separate pills backed by native radios, so the group is one Tab stop, arrow keys select, and the checked radio submits under `name`. Name it with `label` or `labelledBy` (a visible `FieldLabel`), lead choices with `swatch` (a `CssColor` such as `fillColor('#3b82f6')`, or `'transparent'` for the struck-through no-color dot) or `icon`, and handle the delegated `action` on `change`. Never wrap a `SegmentedControl` or button-appearance `wa-radio` set instead. Set `multiple` with a `readonly Value[]` `value` when any number of the options may be on (label filters, annotation intents): the pills become native checkboxes in a `role="group"`, each its own Tab stop that Space toggles, and every checked value submits under `name` (read the checked boxes by name in the change handler). A multiple group takes no `required`. On dark inverse chrome, put the chips in a dark appearance scope (`.wa-dark` or any `color-scheme: dark` ancestor) instead of restyling them.
 
-For removable tags use `Chip`, with `removeAction` for delegated handling and a specific `removeLabel` for the native button. `itemId` identifies the tag; the app owns removal. `size="compact"` and `disabled` replace app styling of raw `wa-tag` internals. Use `Badge` for non-interactive metadata. For a downloadable file or a short link, give `Chip` an `href` (optional `download`, `true` or a file name, and `external`) instead of styling an `<a>`: it renders a native link with chip geometry, icon, truncation, focus ring, and hover feedback, and cannot also carry a remove button. Inside a `brand-loud` or `neutral` ContentItem bubble set `tone="inherit"`, which follows the bubble's foreground with a currentColor border and no fill.
+For removable tags use `Chip`, with `removeAction` for delegated handling and a specific `removeLabel` for the native button. `itemId` identifies the tag; the app owns removal. `size="compact"` and `disabled` replace app styling of raw `wa-tag` internals. Use `Badge` for non-interactive metadata. For a downloadable file or a short link, give `Chip` an `href` (optional `download`, `true` or a file name, and `external`) instead of styling an `<a>`: it renders a native link with chip geometry, icon, truncation, focus ring, and hover feedback, and cannot also carry a remove button. Inside a `brand-loud` or `neutral` ContentItem bubble set `tone="inherit"`, which follows the bubble's foreground with a currentColor border and no fill. For a short value the user activates once (a filter token in a search help popover that inserts itself into the query), give `Chip` an `action` and `itemId`: the whole chip becomes a native `<button type="button" data-action data-item-id>` with hover, press, focus-ring, and disabled states, and an optional `actionLabel` that contains the visible label. It cannot also take `href` or `removeAction`. A compact rounded action chip keeps a compact `Badge`'s height in a compact `ValueTable` cell, so use it there instead of a `Badge` the app makes clickable.
 
 For a chat message or assistant prompt, use `Composer` from `@kerfjs/ui/composer`: a raised frame whose border turns brand while focus is within, a borderless textarea that grows between `minRows` (default 1) and `maxRows` (default 8) lines and then scrolls, and an action row with an optional quiet `hint` and trailing `actions` (a brand Send `wa-button`). Name it with a title-style `label` and give it an `id` so the hint describes the field; the app reads and clears the textarea in its send action. For Enter-to-send, set `submitOnEnter` and call `wireComposers(root)` from `@kerfjs/ui/wire-composers` once; Enter or Cmd/Ctrl+Enter clicks the first trailing action, Shift+Enter inserts a newline, and an IME composition commit or an empty message never sends. Never hand-roll that keydown handler. In a chat dialog, slot it into a `DialogSurface` with `footerPresentation="floating"` and `footerInset="none"`. Never wrap a `wa-textarea` and a button in app-styled composer chrome.
 

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.101` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.103` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/dist/chip.d.ts

@@ -35,6 +35,31 @@ interface ChipNoLinkProps {
     download?: never;
     external?: never;
 }
+interface ChipNoActionProps {
+    action?: never;
+    actionLabel?: never;
+}
+/**
+ * An action chip renders its whole root as a native
+ * `<button type="button">` carrying `data-action` (and `data-item-id`) for an
+ * application delegated handler. It cannot also be a link or carry a remove
+ * button, because nested interactive content is invalid.
+ */
+interface ChipActionProps {
+    /** Delegated action name; the chip renders as a native `<button>`. */
+    action: string;
+    /**
+     * Accessible name when the visible label alone is unclear, such as
+     * "Insert filter is:mine". Start it with, or include, the visible label so
+     * speech input still matches.
+     */
+    actionLabel?: string;
+    href?: never;
+    download?: never;
+    external?: never;
+    removeAction?: never;
+    removeLabel?: never;
+}
 /**
  * A link chip renders a native `<a>` with Chip geometry. It cannot also carry
  * a remove button, because a button inside a link is invalid.
@@ -48,22 +73,27 @@ interface ChipLinkProps {
     external?: boolean;
     removeAction?: never;
     removeLabel?: never;
+    action?: never;
+    actionLabel?: never;
 }
 /**
  * A plain chip, a removable chip (a delegated action plus a specific
- * accessible name), or a link chip (`href`, optional `download`/`external`).
+ * accessible name), a link chip (`href`, optional `download`/`external`), or
+ * an action chip (`action`, optional `actionLabel`) whose whole body is a
+ * native button.
  */
 type ChipProps = ChipCommonProps & ChipLabelProps & (({
     removeAction: string;
     removeLabel: string;
-} & ChipNoLinkProps) | ({
+} & ChipNoLinkProps & ChipNoActionProps) | ({
     removeAction?: never;
     removeLabel?: never;
-} & ChipNoLinkProps) | ChipLinkProps);
+} & ChipNoLinkProps & ChipNoActionProps) | ChipLinkProps | ChipActionProps);
 /**
- * A short label with an optional native remove button, or a native link when
- * `href` is set. The application owns removal and the link destination.
+ * A short label with an optional native remove button, a native link when
+ * `href` is set, or a native button when `action` is set. The application
+ * owns removal, the link destination, and the action handler.
  */
-declare function Chip({ children, icon, truncate, tone, appearance, shape, size, disabled, itemId, className, slot, href, download, external, removeAction, removeLabel, }: ChipProps): SafeHtml;
+declare function Chip({ children, icon, truncate, tone, appearance, shape, size, disabled, itemId, className, slot, href, download, external, removeAction, removeLabel, action, actionLabel, }: ChipProps): SafeHtml;
 
 export { Chip, type ChipProps, type ChipTone };

package/dist/chip.js

@@ -1,3 +1,3 @@
-export { Chip } from './chunk-34U4ANDJ.js';
+export { Chip } from './chunk-N7MBGONH.js';
 
 //# sourceMappingURL=chip.js.map

package/dist/{chunk-34U4ANDJ.js → chunk-N7MBGONH.js}

@@ -50,10 +50,16 @@ function Chip({
   download,
   external = false,
   removeAction,
-  removeLabel
+  removeLabel,
+  action,
+  actionLabel
 }) {
   if (truncate && typeof children !== "string")
     throw new TypeError("Chip truncate requires a plain text label");
+  if (action !== void 0 && (href !== void 0 || removeAction !== void 0 || removeLabel !== void 0))
+    throw new TypeError(
+      "Chip action cannot be combined with href or removeAction, because nested interactive content is invalid"
+    );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-chip__icon", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsx(
@@ -93,6 +99,28 @@ function Chip({
       }
     );
   }
+  if (action !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        class: rootClass,
+        type: "button",
+        disabled,
+        "aria-label": actionLabel?.trim() || void 0,
+        "data-action": action,
+        "data-component": "chip",
+        "data-tone": tone,
+        "data-appearance": appearance,
+        "data-shape": shape,
+        "data-size": size,
+        "data-disabled": disabled ? "" : void 0,
+        "data-truncate": truncate ? "" : void 0,
+        "data-item-id": itemId,
+        slot,
+        children: content
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -116,4 +144,4 @@ function Chip({
 
 export { Chip };
 
-//# sourceMappingURL=chunk-34U4ANDJ.js.map
+//# sourceMappingURL=chunk-N7MBGONH.js.map

package/dist/chunk-N7MBGONH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/chip/chip.tsx"],"names":[],"mappings":"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","file":"chunk-N7MBGONH.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport type { BadgeAppearance, BadgeShape, BadgeSize } from '../badge/badge.js';\n\n/**\n * A chip color role: a shared semantic tone, or `inherit`, which follows the\n * surrounding foreground (a chip inside a `brand-loud` ContentItem bubble)\n * and derives its fill, border, and focus ring from `currentColor`.\n */\nexport type ChipTone = SemanticTone | 'inherit';\n\ninterface ChipCommonProps {\n  /** Decorative leading icon, normally an unsized LucideIcon. */\n  icon?: SafeHtml;\n  tone?: ChipTone;\n  appearance?: BadgeAppearance;\n  shape?: BadgeShape;\n  size?: BadgeSize;\n  disabled?: boolean;\n  /** Record identifier available to an application delegated action handler. */\n  itemId?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype ChipLabelProps =\n  | { children: SafeHtml | string | number; truncate?: false }\n  | { children: string; truncate: true };\n\ninterface ChipNoLinkProps {\n  href?: never;\n  download?: never;\n  external?: never;\n}\n\ninterface ChipNoActionProps {\n  action?: never;\n  actionLabel?: never;\n}\n\n/**\n * An action chip renders its whole root as a native\n * `<button type=\"button\">` carrying `data-action` (and `data-item-id`) for an\n * application delegated handler. It cannot also be a link or carry a remove\n * button, because nested interactive content is invalid.\n */\ninterface ChipActionProps {\n  /** Delegated action name; the chip renders as a native `<button>`. */\n  action: string;\n  /**\n   * Accessible name when the visible label alone is unclear, such as\n   * \"Insert filter is:mine\". Start it with, or include, the visible label so\n   * speech input still matches.\n   */\n  actionLabel?: string;\n  href?: never;\n  download?: never;\n  external?: never;\n  removeAction?: never;\n  removeLabel?: never;\n}\n\n/**\n * A link chip renders a native `<a>` with Chip geometry. It cannot also carry\n * a remove button, because a button inside a link is invalid.\n */\ninterface ChipLinkProps {\n  /** Native destination; the chip renders as an `<a>`. */\n  href: string;\n  /** Download the destination: `true`, or the suggested file name. */\n  download?: string | boolean;\n  /** Open in a new tab with a safe rel and announce that behavior. */\n  external?: boolean;\n  removeAction?: never;\n  removeLabel?: never;\n  action?: never;\n  actionLabel?: never;\n}\n\n/**\n * A plain chip, a removable chip (a delegated action plus a specific\n * accessible name), a link chip (`href`, optional `download`/`external`), or\n * an action chip (`action`, optional `actionLabel`) whose whole body is a\n * native button.\n */\nexport type ChipProps = ChipCommonProps &\n  ChipLabelProps &\n  (\n    | ({ removeAction: string; removeLabel: string } & ChipNoLinkProps &\n        ChipNoActionProps)\n    | ({ removeAction?: never; removeLabel?: never } & ChipNoLinkProps &\n        ChipNoActionProps)\n    | ChipLinkProps\n    | ChipActionProps\n  );\n\nfunction removeButton(action: string, label: string, disabled: boolean) {\n  return (\n    <button\n      class=\"kui-chip__remove\"\n      type=\"button\"\n      data-action={action}\n      aria-label={label}\n      disabled={disabled}\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n        <path\n          d=\"M3.5 3.5 12.5 12.5M12.5 3.5 3.5 12.5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n  );\n}\n\nfunction downloadValue(download: string | boolean | undefined) {\n  switch (download) {\n    case undefined:\n    case false:\n      return undefined;\n    case true:\n      return '';\n    default:\n      return download;\n  }\n}\n\n/**\n * A short label with an optional native remove button, a native link when\n * `href` is set, or a native button when `action` is set. The application\n * owns removal, the link destination, and the action handler.\n */\nexport function Chip({\n  children,\n  icon,\n  truncate = false,\n  tone = 'neutral',\n  appearance = 'quiet',\n  shape = 'pill',\n  size = 'default',\n  disabled = false,\n  itemId,\n  className = '',\n  slot,\n  href,\n  download,\n  external = false,\n  removeAction,\n  removeLabel,\n  action,\n  actionLabel,\n}: ChipProps) {\n  if (truncate && typeof children !== 'string')\n    throw new TypeError('Chip truncate requires a plain text label');\n  if (\n    action !== undefined &&\n    (href !== undefined ||\n      removeAction !== undefined ||\n      removeLabel !== undefined)\n  )\n    throw new TypeError(\n      'Chip action cannot be combined with href or removeAction, because nested interactive content is invalid',\n    );\n  const content = (\n    <>\n      {icon === undefined ? null : (\n        <span class=\"kui-chip__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span\n        class=\"kui-chip__label\"\n        title={truncate ? String(children) : undefined}\n      >\n        {children}\n      </span>\n    </>\n  );\n  const rootClass = `kui-chip ${className}`.trim();\n  if (href !== undefined) {\n    const textLabel =\n      typeof children === 'string' || typeof children === 'number'\n        ? String(children)\n        : undefined;\n    return (\n      <a\n        class={rootClass}\n        href={disabled ? undefined : href}\n        download={disabled ? undefined : downloadValue(download)}\n        target={disabled || !external ? undefined : '_blank'}\n        rel={disabled || !external ? undefined : 'noopener noreferrer'}\n        tabindex={disabled ? -1 : undefined}\n        aria-label={\n          external && textLabel !== undefined\n            ? `${textLabel} (opens in new tab)`\n            : undefined\n        }\n        aria-disabled={disabled ? 'true' : undefined}\n        data-component=\"chip\"\n        data-link=\"\"\n        data-tone={tone}\n        data-appearance={appearance}\n        data-shape={shape}\n        data-size={size}\n        data-disabled={disabled ? '' : undefined}\n        data-truncate={truncate ? '' : undefined}\n        data-item-id={itemId}\n        slot={slot}\n      >\n        {content}\n      </a>\n    );\n  }\n  if (action !== undefined) {\n    return (\n      <button\n        class={rootClass}\n        type=\"button\"\n        disabled={disabled}\n        aria-label={actionLabel?.trim() || undefined}\n        data-action={action}\n        data-component=\"chip\"\n        data-tone={tone}\n        data-appearance={appearance}\n        data-shape={shape}\n        data-size={size}\n        data-disabled={disabled ? '' : undefined}\n        data-truncate={truncate ? '' : undefined}\n        data-item-id={itemId}\n        slot={slot}\n      >\n        {content}\n      </button>\n    );\n  }\n  return (\n    <span\n      class={rootClass}\n      data-component=\"chip\"\n      data-tone={tone}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-size={size}\n      data-disabled={disabled ? '' : undefined}\n      data-truncate={truncate ? '' : undefined}\n      data-item-id={itemId}\n      slot={slot}\n    >\n      {content}\n      {removeAction !== undefined && removeLabel !== undefined\n        ? removeButton(removeAction, removeLabel, disabled)\n        : null}\n    </span>\n  );\n}\n"]}

package/dist/index.js

@@ -67,7 +67,7 @@ export { Skeleton } from './chunk-CVD5IZGB.js';
 export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-IQSRHXZR.js';
 export { Badge } from './chunk-U6QYTMDB.js';
 
-export { Chip } from './chunk-34U4ANDJ.js';
+export { Chip } from './chunk-N7MBGONH.js';
 export { ChoiceChips } from './chunk-FR76ZJQC.js';
 
 //# sourceMappingURL=index.js.map

package/dist/styles/chip.css

@@ -113,11 +113,12 @@
   overflow: hidden;
 }
 
-/* Link chip: a native anchor with the same geometry. Hover and press layer a
-   currentColor wash over whichever fill the appearance paints; an inherit
-   chip instead strengthens its border and underlines its label, so the
-   surrounding text contrast holds in every state. */
-.kui-chip[data-link] {
+/* Link and action chips: a native anchor or button with the same geometry.
+   Hover and press layer a currentColor wash over whichever fill the
+   appearance paints; an inherit chip instead strengthens its border and
+   underlines its label, so the surrounding text contrast holds in every
+   state. */
+.kui-chip:is([data-link], [data-action]) {
   --_kui-chip-wash: transparent;
 
   background-image: linear-gradient(
@@ -128,38 +129,63 @@
   cursor: pointer;
 }
 
-.kui-chip[data-link]:hover {
+/* An action chip is a native button: drop the UA button chrome and any
+   page-wide native button theme (Web Awesome's native styles give every
+   button a form-control height) so it keeps the chip's font and box. A
+   compact action chip is exactly as tall as the compact Badge it replaces in
+   a wrapping value-cell Row. */
+button.kui-chip {
+  height: auto;
+  margin: 0;
+  padding-block: 0;
+  font-family: inherit;
+  font-style: inherit;
+  letter-spacing: inherit;
+  text-transform: none;
+  vertical-align: middle;
+  transition: none;
+  appearance: none;
+}
+
+.kui-chip:is([data-link], [data-action]):hover {
   --_kui-chip-wash: color-mix(in srgb, currentColor 10%, transparent);
 }
 
-.kui-chip[data-link]:active {
+.kui-chip:is([data-link], [data-action]):active {
   --_kui-chip-wash: color-mix(in srgb, currentColor 18%, transparent);
 }
 
-.kui-chip[data-link][data-tone="inherit"]:is(:hover, :active) {
+.kui-chip:is([data-link], [data-action])[data-tone="inherit"]:is(
+    :hover,
+    :active
+  ) {
   --_kui-chip-wash: transparent;
   --_kui-chip-border: currentColor;
 }
 
 /* The label clips for its ellipsis; a little block room keeps the hover
    underline inside that clip without changing the chip's height. */
-.kui-chip[data-link] .kui-chip__label {
+.kui-chip:is([data-link], [data-action]) .kui-chip__label {
   padding-block: 0.2em;
 }
 
-.kui-chip[data-link][data-tone="inherit"]:is(:hover, :active) .kui-chip__label {
+.kui-chip:is([data-link], [data-action])[data-tone="inherit"]:is(
+    :hover,
+    :active
+  )
+  .kui-chip__label {
   text-decoration: underline;
   text-underline-offset: 0.12em;
 }
 
-.kui-chip[data-link]:focus-visible {
+.kui-chip:is([data-link], [data-action]):focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 2px;
 }
 
 /* The brand focus color can match a brand-loud surface; an inherit chip's
    ring follows the surrounding foreground instead. */
-.kui-chip[data-link][data-tone="inherit"]:focus-visible {
+.kui-chip:is([data-link], [data-action])[data-tone="inherit"]:focus-visible {
   outline: 3px solid currentColor;
 }
 

package/dist/styles/components/feedback/chip/chip.css

@@ -113,11 +113,12 @@
   overflow: hidden;
 }
 
-/* Link chip: a native anchor with the same geometry. Hover and press layer a
-   currentColor wash over whichever fill the appearance paints; an inherit
-   chip instead strengthens its border and underlines its label, so the
-   surrounding text contrast holds in every state. */
-.kui-chip[data-link] {
+/* Link and action chips: a native anchor or button with the same geometry.
+   Hover and press layer a currentColor wash over whichever fill the
+   appearance paints; an inherit chip instead strengthens its border and
+   underlines its label, so the surrounding text contrast holds in every
+   state. */
+.kui-chip:is([data-link], [data-action]) {
   --_kui-chip-wash: transparent;
 
   background-image: linear-gradient(
@@ -128,38 +129,63 @@
   cursor: pointer;
 }
 
-.kui-chip[data-link]:hover {
+/* An action chip is a native button: drop the UA button chrome and any
+   page-wide native button theme (Web Awesome's native styles give every
+   button a form-control height) so it keeps the chip's font and box. A
+   compact action chip is exactly as tall as the compact Badge it replaces in
+   a wrapping value-cell Row. */
+button.kui-chip {
+  height: auto;
+  margin: 0;
+  padding-block: 0;
+  font-family: inherit;
+  font-style: inherit;
+  letter-spacing: inherit;
+  text-transform: none;
+  vertical-align: middle;
+  transition: none;
+  appearance: none;
+}
+
+.kui-chip:is([data-link], [data-action]):hover {
   --_kui-chip-wash: color-mix(in srgb, currentColor 10%, transparent);
 }
 
-.kui-chip[data-link]:active {
+.kui-chip:is([data-link], [data-action]):active {
   --_kui-chip-wash: color-mix(in srgb, currentColor 18%, transparent);
 }
 
-.kui-chip[data-link][data-tone="inherit"]:is(:hover, :active) {
+.kui-chip:is([data-link], [data-action])[data-tone="inherit"]:is(
+    :hover,
+    :active
+  ) {
   --_kui-chip-wash: transparent;
   --_kui-chip-border: currentColor;
 }
 
 /* The label clips for its ellipsis; a little block room keeps the hover
    underline inside that clip without changing the chip's height. */
-.kui-chip[data-link] .kui-chip__label {
+.kui-chip:is([data-link], [data-action]) .kui-chip__label {
   padding-block: 0.2em;
 }
 
-.kui-chip[data-link][data-tone="inherit"]:is(:hover, :active) .kui-chip__label {
+.kui-chip:is([data-link], [data-action])[data-tone="inherit"]:is(
+    :hover,
+    :active
+  )
+  .kui-chip__label {
   text-decoration: underline;
   text-underline-offset: 0.12em;
 }
 
-.kui-chip[data-link]:focus-visible {
+.kui-chip:is([data-link], [data-action]):focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 2px;
 }
 
 /* The brand focus color can match a brand-loud surface; an inherit chip's
    ring follows the surrounding foreground instead. */
-.kui-chip[data-link][data-tone="inherit"]:focus-visible {
+.kui-chip:is([data-link], [data-action])[data-tone="inherit"]:focus-visible {
   outline: 3px solid currentColor;
 }
 

package/docs/accessibility.md

@@ -18,7 +18,7 @@ These are normative contracts for package components and consuming applications.
 - Interactive `ContentItem` cards are keyboard reachable. Set `selectionMode="toggle"` for a pressed button, `selectionMode="single"` for an option inside a listbox, or `selectionMode="multiple"` for a selectable row with a gridcell that can contain native controls. Place multiple-mode rows inside a labeled `List` or `Grid` with `selectionMode="multiple"`; the app owns the selection set and range gestures. Wire `wireContentItems` once so Enter and Space on the card activate its delegated action without activating it from a nested control. Disabled cards expose `aria-disabled` and leave the Tab order.
 - An unlabeled `Skeleton` (including the value slots a component's `placeholder` prop renders) is decorative loading chrome: it is `aria-hidden`, conveys no information a user needs to act on, and is deliberately exempt from the WCAG 3:1 non-text-contrast target. Inside a solid `Badge` it stays subtle (about 2.1–4.4:1 in light, 2.4–2.8:1 in dark, depending on tone); `tests/browser/tone-contrast.spec.ts` holds those values as a regression floor rather than an accessibility threshold. Announce loading through a labeled `Skeleton`, `LoadingSpinner`, or `aria-busy` on the owning region, never through the skeleton's visibility.
 - `StateBanner` defaults to polite `role="status"`; use `urgency="alert"` only for an attention-requiring failure. Its optional `badge` is persistent inline status/count content beside the title and is announced as part of the banner; keep it terse and do not rely on color alone for its meaning.
-- A removable `Chip` has a native button with a specific `removeLabel`, such as "Remove Urgent tag". The button is absent for a plain chip and disabled for a disabled chip. Its leading `icon` is decorative; the visible label names the tag. `truncate` retains the full plain-text label as a native tooltip. Tag text remains visible because tone does not convey meaning alone. A link `Chip` (`href`) is a native anchor named by its visible label, with no remove button; `external` adds `target="_blank"`, `rel="noopener noreferrer"`, and an "(opens in new tab)" name suffix for a text label, and a disabled link chip drops `href`, sets `aria-disabled`, and leaves the tab order. `tone="inherit"` paints no fill, so its label keeps the surrounding text's contrast (a brand-loud bubble's white text included), and its focus ring is drawn in the surrounding foreground so it stays visible on a brand-colored surface.
+- A removable `Chip` has a native button with a specific `removeLabel`, such as "Remove Urgent tag". The button is absent for a plain chip and disabled for a disabled chip. Its leading `icon` is decorative; the visible label names the tag. `truncate` retains the full plain-text label as a native tooltip. Tag text remains visible because tone does not convey meaning alone. A link `Chip` (`href`) is a native anchor named by its visible label, with no remove button; `external` adds `target="_blank"`, `rel="noopener noreferrer"`, and an "(opens in new tab)" name suffix for a text label, and a disabled link chip drops `href`, sets `aria-disabled`, and leaves the tab order. `tone="inherit"` paints no fill, so its label keeps the surrounding text's contrast (a brand-loud bubble's white text included), and its focus ring is drawn in the surrounding foreground so it stays visible on a brand-colored surface. An action `Chip` (`action`) is one native `<button type="button">` with no nested control: its visible label names it unless `actionLabel` supplies a fuller name, which should contain that label ("Insert filter is:mine"). Enter and Space activate it, keyboard focus draws the focus ring (in the surrounding foreground for `tone="inherit"`), and a disabled action chip is a disabled button that leaves the tab order.
 - `EmptyState` reports busy state through `aria-busy` and never relies on an illustration as its label.
 - `Select` follows the Web Awesome host's standard `input`/`change` events. Application tests verify the live `value`, focus, and events—not attributes alone. Its decorative option icons and value-dependent selected content remain present after controlled rerenders, so the visible choice does not silently lose its non-text cue.
 - `DisclosureArrow` is an 18px root-scaled decorative visual by default, not an interaction target. Its owning native control supplies a stable accessible name, pointer and keyboard interaction, and `aria-expanded`; multiple arrows keep independently controlled state. Consumers may resize it with the typed `size` prop without changing that ownership. Configured directions animate over the shortest path; a 180-degree closed-to-open tie uses counterclockwise rotation.

package/docs/component-selection.md

@@ -925,6 +925,47 @@ wash on hover. File names are data: keep their spelling.
 </Row>
 ```
 
+## Action chips
+
+Give `Chip` an `action` when activating the chip should do something with its
+value once, such as inserting a filter token from a search syntax help popover
+into the query. The whole chip becomes a native
+`<button type="button" data-action data-item-id>` with the same geometry, plus
+hover, press, focus-ring, and `disabled` states; Enter and Space activate it,
+and a delegated handler reads `itemId`. Set `actionLabel` when the visible
+label alone is unclear, and keep the label inside it ("Insert filter is:mine")
+so speech input still matches. An action chip cannot also take `href` or
+`removeAction`, because nested interactive content is invalid. Use `Badge` for
+metadata nobody activates, and `ChoiceChips` when the chips hold a persistent
+radio or checkbox value.
+
+A compact, rounded action chip is exactly as tall as the compact `Badge` it
+replaces, so a wrapping `Row` of them in a compact `ValueTable` cell keeps the
+table's row height.
+
+```tsx
+<ValueTable label="Search Filters" density="compact">
+  <ValueTableRow
+    label="Ownership"
+    value={
+      <Row gap="2xs" wrap>
+        {['is:mine', 'is:shared'].map((token) => (
+          <Chip
+            action="search-help-insert"
+            actionLabel={`Insert filter ${token}`}
+            itemId={token}
+            size="compact"
+            shape="rounded"
+          >
+            {token}
+          </Chip>
+        ))}
+      </Row>
+    }
+  />
+</ValueTable>
+```
+
 ## Wrapping exclusive choices
 
 Use `ChoiceChips` when one value is chosen from a visible set that does not

package/docs/design/templates/chip/action-filters-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 230" width="460" height="230"><defs><clipPath id="cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><linearGradient id="bg4" gradientUnits="userSpaceOnUse" x1="266.7813" y1="32.3906" x2="266.7813" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp5"><rect x="246.5" y="33.7" width="40.5" height="15.4"/></clipPath><clipPath id="ct6"><rect x="246.5" y="33.7" width="40.5" height="15.4"/></clipPath><linearGradient id="bg7" gradientUnits="userSpaceOnUse" x1="321.7266" y1="32.3906" x2="321.7266" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp8"><rect x="303" y="33.7" width="37.4" height="15.4"/></clipPath><clipPath id="ct9"><rect x="303" y="33.7" width="37.4" height="15.4"/></clipPath><linearGradient id="bg10" gradientUnits="userSpaceOnUse" x1="386.7109" y1="32.3906" x2="386.7109" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp11"><rect x="356.4" y="33.7" width="60.6" height="15.4"/></clipPath><clipPath id="ct12"><rect x="356.4" y="33.7" width="60.6" height="15.4"/></clipPath><clipPath id="cp13"><rect x="37" y="73.2" width="77.8" height="18"/></clipPath><clipPath id="ct14"><rect x="37" y="73.2" width="77.8" height="18"/></clipPath><linearGradient id="bg15" gradientUnits="userSpaceOnUse" x1="329.8047" y1="73.1875" x2="329.8047" y2="91.1875"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp16"><rect x="309.8" y="74.5" width="40" height="15.4"/></clipPath><clipPath id="ct17"><rect x="309.8" y="74.5" width="40" height="15.4"/></clipPath><linearGradient id="bg18" gradientUnits="userSpaceOnUse" x1="391.4063" y1="73.1875" x2="391.4063" y2="91.1875"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp19"><rect x="365.8" y="74.5" width="51.2" height="15.4"/></clipPath><clipPath id="ct20"><rect x="365.8" y="74.5" width="51.2" height="15.4"/></clipPath><clipPath id="cp21"><rect x="37" y="114" width="27.7" height="18"/></clipPath><clipPath id="ct22"><rect x="37" y="114" width="27.7" height="18"/></clipPath><linearGradient id="bg23" gradientUnits="userSpaceOnUse" x1="305.7188" y1="113.9844" x2="305.7188" y2="131.9844"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp24"><rect x="272.7" y="115.3" width="66" height="15.4"/></clipPath><clipPath id="ct25"><rect x="272.7" y="115.3" width="66" height="15.4"/></clipPath><linearGradient id="bg26" gradientUnits="userSpaceOnUse" x1="385.8594" y1="113.9844" x2="385.8594" y2="131.9844"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp27"><rect x="354.7" y="115.3" width="62.3" height="15.4"/></clipPath><clipPath id="ct28"><rect x="354.7" y="115.3" width="62.3" height="15.4"/></clipPath><clipPath id="cp29"><rect x="37" y="154.8" width="58" height="18"/></clipPath><clipPath id="ct30"><rect x="37" y="154.8" width="58" height="18"/></clipPath><linearGradient id="bg31" gradientUnits="userSpaceOnUse" x1="268.8203" y1="154.7813" x2="268.8203" y2="172.7813"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp32"><rect x="229.9" y="156.1" width="77.8" height="15.4"/></clipPath><clipPath id="ct33"><rect x="229.9" y="156.1" width="77.8" height="15.4"/></clipPath><linearGradient id="bg34" gradientUnits="userSpaceOnUse" x1="370.3672" y1="154.7813" x2="370.3672" y2="172.7813"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp35"><rect x="323.7" y="156.1" width="93.3" height="15.4"/></clipPath><clipPath id="ct36"><rect x="323.7" y="156.1" width="93.3" height="15.4"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(228,228,255,0.075)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Status</text></g></g><rect x="240.5" y="31.4" width="52.5" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="240.5" y="31.4" width="52.5" height="20" rx="3" fill="url(#bg4)"/><rect x="241.5" y="31.5" width="51" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="246.53" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:draft</text></g></g><rect x="297" y="31.4" width="49.4" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="297" y="31.4" width="49.4" height="20" rx="3" fill="url(#bg7)"/><rect x="297.5" y="31.5" width="48" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp8)"><g clip-path="url(#ct9)"><text x="303.03" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:sent</text></g></g><rect x="350.4" y="31.4" width="72.6" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="350.4" y="31.4" width="72.6" height="20" rx="3" fill="url(#bg10)"/><rect x="350.5" y="31.5" width="72" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp11)"><g clip-path="url(#ct12)"><text x="356.42" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:awarded</text></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="37" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Ownership</text></g></g><rect x="303.8" y="72.2" width="52" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="303.8" y="72.2" width="52" height="20" rx="3" fill="url(#bg15)"/><rect x="304.5" y="72.5" width="51" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp16)"><g clip-path="url(#ct17)"><text x="309.8" y="86.69" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:mine</text></g></g><rect x="359.8" y="72.2" width="63.2" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="359.8" y="72.2" width="63.2" height="20" rx="3" fill="url(#bg18)"/><rect x="360.5" y="72.5" width="62" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp19)"><g clip-path="url(#ct20)"><text x="365.81" y="86.69" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:shared</text></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="62.5" x2="423" y2="62.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp21)"><g clip-path="url(#ct22)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Site</text></g></g><rect x="266.7" y="113" width="78" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="266.7" y="113" width="78" height="20" rx="3" fill="url(#bg23)"/><rect x="267.5" y="113.5" width="77" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp24)"><g clip-path="url(#ct25)"><text x="272.72" y="127.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">site:Karachi</text></g></g><rect x="348.7" y="113" width="74.3" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="348.7" y="113" width="74.3" height="20" rx="3" fill="url(#bg26)"/><rect x="349.5" y="113.5" width="73" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp27)"><g clip-path="url(#ct28)"><text x="354.72" y="127.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">site:Lahore</text></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp29)"><g clip-path="url(#ct30)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Content</text></g></g><rect x="223.9" y="153.8" width="89.8" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="223.9" y="153.8" width="89.8" height="20" rx="3" fill="url(#bg31)"/><rect x="224.5" y="154.5" width="89" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp32)"><g clip-path="url(#ct33)"><text x="229.91" y="168.28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">has:questions</text></g></g><g opacity="0.5" style="isolation:isolate"><rect x="317.7" y="153.8" width="105.3" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="317.7" y="153.8" width="105.3" height="20" rx="3" fill="url(#bg34)"/><rect x="318.5" y="154.5" width="104" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp35)"><g clip-path="url(#ct36)"><text x="323.73" y="168.28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">has:attachments</text></g></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g></svg>

package/docs/design/templates/chip/action-filters.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 230" width="460" height="230"><defs><clipPath id="cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><linearGradient id="bg4" gradientUnits="userSpaceOnUse" x1="266.7813" y1="32.3906" x2="266.7813" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp5"><rect x="246.5" y="33.7" width="40.5" height="15.4"/></clipPath><clipPath id="ct6"><rect x="246.5" y="33.7" width="40.5" height="15.4"/></clipPath><linearGradient id="bg7" gradientUnits="userSpaceOnUse" x1="321.7266" y1="32.3906" x2="321.7266" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp8"><rect x="303" y="33.7" width="37.4" height="15.4"/></clipPath><clipPath id="ct9"><rect x="303" y="33.7" width="37.4" height="15.4"/></clipPath><linearGradient id="bg10" gradientUnits="userSpaceOnUse" x1="386.7109" y1="32.3906" x2="386.7109" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp11"><rect x="356.4" y="33.7" width="60.6" height="15.4"/></clipPath><clipPath id="ct12"><rect x="356.4" y="33.7" width="60.6" height="15.4"/></clipPath><clipPath id="cp13"><rect x="37" y="73.2" width="77.8" height="18"/></clipPath><clipPath id="ct14"><rect x="37" y="73.2" width="77.8" height="18"/></clipPath><linearGradient id="bg15" gradientUnits="userSpaceOnUse" x1="329.8047" y1="73.1875" x2="329.8047" y2="91.1875"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp16"><rect x="309.8" y="74.5" width="40" height="15.4"/></clipPath><clipPath id="ct17"><rect x="309.8" y="74.5" width="40" height="15.4"/></clipPath><linearGradient id="bg18" gradientUnits="userSpaceOnUse" x1="391.4063" y1="73.1875" x2="391.4063" y2="91.1875"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp19"><rect x="365.8" y="74.5" width="51.2" height="15.4"/></clipPath><clipPath id="ct20"><rect x="365.8" y="74.5" width="51.2" height="15.4"/></clipPath><clipPath id="cp21"><rect x="37" y="114" width="27.7" height="18"/></clipPath><clipPath id="ct22"><rect x="37" y="114" width="27.7" height="18"/></clipPath><linearGradient id="bg23" gradientUnits="userSpaceOnUse" x1="305.7188" y1="113.9844" x2="305.7188" y2="131.9844"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp24"><rect x="272.7" y="115.3" width="66" height="15.4"/></clipPath><clipPath id="ct25"><rect x="272.7" y="115.3" width="66" height="15.4"/></clipPath><linearGradient id="bg26" gradientUnits="userSpaceOnUse" x1="385.8594" y1="113.9844" x2="385.8594" y2="131.9844"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp27"><rect x="354.7" y="115.3" width="62.3" height="15.4"/></clipPath><clipPath id="ct28"><rect x="354.7" y="115.3" width="62.3" height="15.4"/></clipPath><clipPath id="cp29"><rect x="37" y="154.8" width="58" height="18"/></clipPath><clipPath id="ct30"><rect x="37" y="154.8" width="58" height="18"/></clipPath><linearGradient id="bg31" gradientUnits="userSpaceOnUse" x1="268.8203" y1="154.7813" x2="268.8203" y2="172.7813"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp32"><rect x="229.9" y="156.1" width="77.8" height="15.4"/></clipPath><clipPath id="ct33"><rect x="229.9" y="156.1" width="77.8" height="15.4"/></clipPath><linearGradient id="bg34" gradientUnits="userSpaceOnUse" x1="370.3672" y1="154.7813" x2="370.3672" y2="172.7813"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp35"><rect x="323.7" y="156.1" width="93.3" height="15.4"/></clipPath><clipPath id="ct36"><rect x="323.7" y="156.1" width="93.3" height="15.4"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(0,0,98,0.05)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Status</text></g></g><rect x="240.5" y="31.4" width="52.5" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="240.5" y="31.4" width="52.5" height="20" rx="3" fill="url(#bg4)"/><rect x="241.5" y="31.5" width="51" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="246.53" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:draft</text></g></g><rect x="297" y="31.4" width="49.4" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="297" y="31.4" width="49.4" height="20" rx="3" fill="url(#bg7)"/><rect x="297.5" y="31.5" width="48" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp8)"><g clip-path="url(#ct9)"><text x="303.03" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:sent</text></g></g><rect x="350.4" y="31.4" width="72.6" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="350.4" y="31.4" width="72.6" height="20" rx="3" fill="url(#bg10)"/><rect x="350.5" y="31.5" width="72" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp11)"><g clip-path="url(#ct12)"><text x="356.42" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:awarded</text></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="37" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Ownership</text></g></g><rect x="303.8" y="72.2" width="52" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="303.8" y="72.2" width="52" height="20" rx="3" fill="url(#bg15)"/><rect x="304.5" y="72.5" width="51" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp16)"><g clip-path="url(#ct17)"><text x="309.8" y="86.69" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:mine</text></g></g><rect x="359.8" y="72.2" width="63.2" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="359.8" y="72.2" width="63.2" height="20" rx="3" fill="url(#bg18)"/><rect x="360.5" y="72.5" width="62" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp19)"><g clip-path="url(#ct20)"><text x="365.81" y="86.69" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:shared</text></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="62.5" x2="423" y2="62.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp21)"><g clip-path="url(#ct22)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Site</text></g></g><rect x="266.7" y="113" width="78" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="266.7" y="113" width="78" height="20" rx="3" fill="url(#bg23)"/><rect x="267.5" y="113.5" width="77" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp24)"><g clip-path="url(#ct25)"><text x="272.72" y="127.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">site:Karachi</text></g></g><rect x="348.7" y="113" width="74.3" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="348.7" y="113" width="74.3" height="20" rx="3" fill="url(#bg26)"/><rect x="349.5" y="113.5" width="73" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp27)"><g clip-path="url(#ct28)"><text x="354.72" y="127.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">site:Lahore</text></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp29)"><g clip-path="url(#ct30)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Content</text></g></g><rect x="223.9" y="153.8" width="89.8" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="223.9" y="153.8" width="89.8" height="20" rx="3" fill="url(#bg31)"/><rect x="224.5" y="154.5" width="89" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp32)"><g clip-path="url(#ct33)"><text x="229.91" y="168.28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">has:questions</text></g></g><g opacity="0.5" style="isolation:isolate"><rect x="317.7" y="153.8" width="105.3" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="317.7" y="153.8" width="105.3" height="20" rx="3" fill="url(#bg34)"/><rect x="318.5" y="154.5" width="104" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp35)"><g clip-path="url(#ct36)"><text x="323.73" y="168.28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">has:attachments</text></g></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g></svg>

package/docs/design/templates/chip/tags-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="29" y="28" width="41.2" height="12"/></clipPath><clipPath id="ct1"><rect x="29" y="28" width="41.2" height="12"/></clipPath><clipPath id="cp2"><rect x="78" y="28" width="12.2" height="12"/></clipPath><linearGradient id="bg4" gradientUnits="userSpaceOnUse" x1="158.2422" y1="21" x2="158.2422" y2="47"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp5"><rect x="120" y="28" width="12.2" height="12"/></clipPath><clipPath id="cp7"><rect x="136.2" y="25.6" width="60.2" height="16.8"/></clipPath><clipPath id="ct8"><rect x="136.2" y="25.6" width="60.2" height="16.8"/></clipPath><clipPath id="cp9"><rect x="222.3" y="28" width="47.9" height="12"/></clipPath><clipPath id="ct10"><rect x="222.3" y="28" width="47.9" height="12"/></clipPath></defs><rect x="20" y="20" width="83.2" height="28" rx="14" fill="rgb(34,43,48)"/><rect x="20.5" y="20.5" width="82" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Urgent</text></g></g><g clip-path="url(#cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgic3"><rect x="78.2" y="28" width="12" height="12"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 78.156 28)"><path d="m3.5 3.5 9 9m0-9-9 9" fill="none" stroke="rgb(138, 203, 255)" stroke-width="1.75" stroke-linecap="round" stroke-dasharray="none" stroke-linejoin="miter" stroke-opacity="1" fill-opacity="1" opacity="1" style="marker:none;vector-effect:none;color-interpolation:srgb"/></g></g></g></g><rect x="111.2" y="20" width="94.2" height="28" rx="14" fill="rgba(228,228,255,0.075)"/><rect x="111.2" y="20" width="94.2" height="28" rx="14" fill="url(#bg4)"/><rect x="111.5" y="20.5" width="93" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp5)"><g color="rgb(194, 194, 198)"><clipPath id="svgic6"><rect x="120.2" y="28" width="12" height="12"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.5 0 0 .5 120.156 28)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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(#cp7)"><g clip-path="url(#ct8)"><text x="136.16" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">report.md</text></g></g><rect x="213.3" y="20" width="65.9" height="28" rx="14" fill="rgb(245,245,247)"/><rect x="213.5" y="20.5" width="65" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="222.33" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(28,28,30)">Backlog</text></g></g></svg>

package/docs/design/templates/chip/tags.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="29" y="28" width="41.2" height="12"/></clipPath><clipPath id="ct1"><rect x="29" y="28" width="41.2" height="12"/></clipPath><clipPath id="cp2"><rect x="78" y="28" width="12.2" height="12"/></clipPath><linearGradient id="bg4" gradientUnits="userSpaceOnUse" x1="158.2422" y1="21" x2="158.2422" y2="47"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="cp5"><rect x="120" y="28" width="12.2" height="12"/></clipPath><clipPath id="cp7"><rect x="136.2" y="25.6" width="60.2" height="16.8"/></clipPath><clipPath id="ct8"><rect x="136.2" y="25.6" width="60.2" height="16.8"/></clipPath><clipPath id="cp9"><rect x="222.3" y="28" width="47.9" height="12"/></clipPath><clipPath id="ct10"><rect x="222.3" y="28" width="47.9" height="12"/></clipPath></defs><rect x="20" y="20" width="83.2" height="28" rx="14" fill="rgb(235,244,252)"/><rect x="20.5" y="20.5" width="82" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(26,93,207)">Urgent</text></g></g><g clip-path="url(#cp2)"><g color="rgb(26, 93, 207)"><clipPath id="svgic3"><rect x="78.2" y="28" width="12" height="12"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 78.156 28)"><path d="m3.5 3.5 9 9m0-9-9 9" fill="none" stroke="rgb(26, 93, 207)" stroke-width="1.75" stroke-linecap="round" stroke-dasharray="none" stroke-linejoin="miter" stroke-opacity="1" fill-opacity="1" opacity="1" style="marker:none;vector-effect:none;color-interpolation:srgb"/></g></g></g></g><rect x="111.2" y="20" width="94.2" height="28" rx="14" fill="rgba(0,0,98,0.05)"/><rect x="111.2" y="20" width="94.2" height="28" rx="14" fill="url(#bg4)"/><rect x="111.5" y="20.5" width="93" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp5)"><g color="rgb(98, 98, 103)"><clipPath id="svgic6"><rect x="120.2" y="28" width="12" height="12"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.5 0 0 .5 120.156 28)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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(#cp7)"><g clip-path="url(#ct8)"><text x="136.16" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">report.md</text></g></g><rect x="213.3" y="20" width="65.9" height="28" rx="14" fill="rgb(29,29,31)"/><rect x="213.5" y="20.5" width="65" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="222.33" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(255,255,255)">Backlog</text></g></g></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 410" width="492" height="410"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="88"/></clipPath><clipPath id="cp1"><rect x="16" y="164" width="460" height="230"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="88" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="142" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="164" width="460" height="230" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="410" 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)">Removable, Link, and Plain Tags</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="88"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="29" y="28" width="41.2" height="12"/></clipPath><clipPath id="svgimg4ct1"><rect x="29" y="28" width="41.2" height="12"/></clipPath><clipPath id="svgimg4cp2"><rect x="78" y="28" width="12.2" height="12"/></clipPath><linearGradient id="svgimg4bg4" gradientUnits="userSpaceOnUse" x1="158.2422" y1="21" x2="158.2422" y2="47"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg4cp5"><rect x="120" y="28" width="12.2" height="12"/></clipPath><clipPath id="svgimg4cp7"><rect x="136.2" y="25.6" width="60.2" height="16.8"/></clipPath><clipPath id="svgimg4ct8"><rect x="136.2" y="25.6" width="60.2" height="16.8"/></clipPath><clipPath id="svgimg4cp9"><rect x="222.3" y="28" width="47.9" height="12"/></clipPath><clipPath id="svgimg4ct10"><rect x="222.3" y="28" width="47.9" height="12"/></clipPath></defs><rect x="20" y="20" width="83.2" height="28" rx="14" fill="rgb(34,43,48)"/><rect x="20.5" y="20.5" width="82" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ct1)"><text x="29" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Urgent</text></g></g><g clip-path="url(#svgimg4cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg4svgic3"><rect x="78.2" y="28" width="12" height="12"/></clipPath><g clip-path="url(#svgimg4svgic3)"><g transform="matrix(.75 0 0 .75 78.156 28)"><path d="m3.5 3.5 9 9m0-9-9 9" fill="none" stroke="rgb(138, 203, 255)" stroke-width="1.75" stroke-linecap="round" stroke-dasharray="none" stroke-linejoin="miter" stroke-opacity="1" fill-opacity="1" opacity="1" style="marker:none;vector-effect:none;color-interpolation:srgb"/></g></g></g></g><rect x="111.2" y="20" width="94.2" height="28" rx="14" fill="rgba(228,228,255,0.075)"/><rect x="111.2" y="20" width="94.2" height="28" rx="14" fill="url(#svgimg4bg4)"/><rect x="111.5" y="20.5" width="93" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp5)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg4svgic6"><rect x="120.2" y="28" width="12" height="12"/></clipPath><g clip-path="url(#svgimg4svgic6)"><g transform="matrix(.5 0 0 .5 120.156 28)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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(#svgimg4cp7)"><g clip-path="url(#svgimg4ct8)"><text x="136.16" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">report.md</text></g></g><rect x="213.3" y="20" width="65.9" height="28" rx="14" fill="rgb(245,245,247)"/><rect x="213.5" y="20.5" width="65" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp9)"><g clip-path="url(#svgimg4ct10)"><text x="222.33" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(28,28,30)">Backlog</text></g></g></g></g></g></g><text x="16" y="154" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Action Chips in a Compact Value Table</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="164" width="460" height="230"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 164)"><defs><clipPath id="svgimg7cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg7ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg7cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg7ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><linearGradient id="svgimg7bg4" gradientUnits="userSpaceOnUse" x1="266.7813" y1="32.3906" x2="266.7813" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp5"><rect x="246.5" y="33.7" width="40.5" height="15.4"/></clipPath><clipPath id="svgimg7ct6"><rect x="246.5" y="33.7" width="40.5" height="15.4"/></clipPath><linearGradient id="svgimg7bg7" gradientUnits="userSpaceOnUse" x1="321.7266" y1="32.3906" x2="321.7266" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp8"><rect x="303" y="33.7" width="37.4" height="15.4"/></clipPath><clipPath id="svgimg7ct9"><rect x="303" y="33.7" width="37.4" height="15.4"/></clipPath><linearGradient id="svgimg7bg10" gradientUnits="userSpaceOnUse" x1="386.7109" y1="32.3906" x2="386.7109" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp11"><rect x="356.4" y="33.7" width="60.6" height="15.4"/></clipPath><clipPath id="svgimg7ct12"><rect x="356.4" y="33.7" width="60.6" height="15.4"/></clipPath><clipPath id="svgimg7cp13"><rect x="37" y="73.2" width="77.8" height="18"/></clipPath><clipPath id="svgimg7ct14"><rect x="37" y="73.2" width="77.8" height="18"/></clipPath><linearGradient id="svgimg7bg15" gradientUnits="userSpaceOnUse" x1="329.8047" y1="73.1875" x2="329.8047" y2="91.1875"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp16"><rect x="309.8" y="74.5" width="40" height="15.4"/></clipPath><clipPath id="svgimg7ct17"><rect x="309.8" y="74.5" width="40" height="15.4"/></clipPath><linearGradient id="svgimg7bg18" gradientUnits="userSpaceOnUse" x1="391.4063" y1="73.1875" x2="391.4063" y2="91.1875"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp19"><rect x="365.8" y="74.5" width="51.2" height="15.4"/></clipPath><clipPath id="svgimg7ct20"><rect x="365.8" y="74.5" width="51.2" height="15.4"/></clipPath><clipPath id="svgimg7cp21"><rect x="37" y="114" width="27.7" height="18"/></clipPath><clipPath id="svgimg7ct22"><rect x="37" y="114" width="27.7" height="18"/></clipPath><linearGradient id="svgimg7bg23" gradientUnits="userSpaceOnUse" x1="305.7188" y1="113.9844" x2="305.7188" y2="131.9844"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp24"><rect x="272.7" y="115.3" width="66" height="15.4"/></clipPath><clipPath id="svgimg7ct25"><rect x="272.7" y="115.3" width="66" height="15.4"/></clipPath><linearGradient id="svgimg7bg26" gradientUnits="userSpaceOnUse" x1="385.8594" y1="113.9844" x2="385.8594" y2="131.9844"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp27"><rect x="354.7" y="115.3" width="62.3" height="15.4"/></clipPath><clipPath id="svgimg7ct28"><rect x="354.7" y="115.3" width="62.3" height="15.4"/></clipPath><clipPath id="svgimg7cp29"><rect x="37" y="154.8" width="58" height="18"/></clipPath><clipPath id="svgimg7ct30"><rect x="37" y="154.8" width="58" height="18"/></clipPath><linearGradient id="svgimg7bg31" gradientUnits="userSpaceOnUse" x1="268.8203" y1="154.7813" x2="268.8203" y2="172.7813"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp32"><rect x="229.9" y="156.1" width="77.8" height="15.4"/></clipPath><clipPath id="svgimg7ct33"><rect x="229.9" y="156.1" width="77.8" height="15.4"/></clipPath><linearGradient id="svgimg7bg34" gradientUnits="userSpaceOnUse" x1="370.3672" y1="154.7813" x2="370.3672" y2="172.7813"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp35"><rect x="323.7" y="156.1" width="93.3" height="15.4"/></clipPath><clipPath id="svgimg7ct36"><rect x="323.7" y="156.1" width="93.3" height="15.4"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(228,228,255,0.075)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp2)"><g clip-path="url(#svgimg7ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Status</text></g></g><rect x="240.5" y="31.4" width="52.5" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="240.5" y="31.4" width="52.5" height="20" rx="3" fill="url(#svgimg7bg4)"/><rect x="241.5" y="31.5" width="51" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp5)"><g clip-path="url(#svgimg7ct6)"><text x="246.53" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:draft</text></g></g><rect x="297" y="31.4" width="49.4" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="297" y="31.4" width="49.4" height="20" rx="3" fill="url(#svgimg7bg7)"/><rect x="297.5" y="31.5" width="48" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp8)"><g clip-path="url(#svgimg7ct9)"><text x="303.03" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:sent</text></g></g><rect x="350.4" y="31.4" width="72.6" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="350.4" y="31.4" width="72.6" height="20" rx="3" fill="url(#svgimg7bg10)"/><rect x="350.5" y="31.5" width="72" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp11)"><g clip-path="url(#svgimg7ct12)"><text x="356.42" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:awarded</text></g></g></g><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp13)"><g clip-path="url(#svgimg7ct14)"><text x="37" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Ownership</text></g></g><rect x="303.8" y="72.2" width="52" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="303.8" y="72.2" width="52" height="20" rx="3" fill="url(#svgimg7bg15)"/><rect x="304.5" y="72.5" width="51" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp16)"><g clip-path="url(#svgimg7ct17)"><text x="309.8" y="86.69" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:mine</text></g></g><rect x="359.8" y="72.2" width="63.2" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="359.8" y="72.2" width="63.2" height="20" rx="3" fill="url(#svgimg7bg18)"/><rect x="360.5" y="72.5" width="62" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp19)"><g clip-path="url(#svgimg7ct20)"><text x="365.81" y="86.69" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">is:shared</text></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="62.5" x2="423" y2="62.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp21)"><g clip-path="url(#svgimg7ct22)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Site</text></g></g><rect x="266.7" y="113" width="78" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="266.7" y="113" width="78" height="20" rx="3" fill="url(#svgimg7bg23)"/><rect x="267.5" y="113.5" width="77" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp24)"><g clip-path="url(#svgimg7ct25)"><text x="272.72" y="127.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">site:Karachi</text></g></g><rect x="348.7" y="113" width="74.3" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="348.7" y="113" width="74.3" height="20" rx="3" fill="url(#svgimg7bg26)"/><rect x="349.5" y="113.5" width="73" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp27)"><g clip-path="url(#svgimg7ct28)"><text x="354.72" y="127.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">site:Lahore</text></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp29)"><g clip-path="url(#svgimg7ct30)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Content</text></g></g><rect x="223.9" y="153.8" width="89.8" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="223.9" y="153.8" width="89.8" height="20" rx="3" fill="url(#svgimg7bg31)"/><rect x="224.5" y="154.5" width="89" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp32)"><g clip-path="url(#svgimg7ct33)"><text x="229.91" y="168.28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">has:questions</text></g></g><g opacity="0.5" style="isolation:isolate"><rect x="317.7" y="153.8" width="105.3" height="20" rx="3" fill="rgba(228,228,255,0.075)"/><rect x="317.7" y="153.8" width="105.3" height="20" rx="3" fill="url(#svgimg7bg34)"/><rect x="318.5" y="154.5" width="104" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp35)"><g clip-path="url(#svgimg7ct36)"><text x="323.73" y="168.28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">has:attachments</text></g></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g></g></g></g></g></svg>

package/docs/design/templates/chip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 410" width="492" height="410"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="88"/></clipPath><clipPath id="cp1"><rect x="16" y="164" width="460" height="230"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="88" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="142" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="164" width="460" height="230" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="410" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Removable, Link, and Plain Tags</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="88"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="29" y="28" width="41.2" height="12"/></clipPath><clipPath id="svgimg4ct1"><rect x="29" y="28" width="41.2" height="12"/></clipPath><clipPath id="svgimg4cp2"><rect x="78" y="28" width="12.2" height="12"/></clipPath><linearGradient id="svgimg4bg4" gradientUnits="userSpaceOnUse" x1="158.2422" y1="21" x2="158.2422" y2="47"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg4cp5"><rect x="120" y="28" width="12.2" height="12"/></clipPath><clipPath id="svgimg4cp7"><rect x="136.2" y="25.6" width="60.2" height="16.8"/></clipPath><clipPath id="svgimg4ct8"><rect x="136.2" y="25.6" width="60.2" height="16.8"/></clipPath><clipPath id="svgimg4cp9"><rect x="222.3" y="28" width="47.9" height="12"/></clipPath><clipPath id="svgimg4ct10"><rect x="222.3" y="28" width="47.9" height="12"/></clipPath></defs><rect x="20" y="20" width="83.2" height="28" rx="14" fill="rgb(235,244,252)"/><rect x="20.5" y="20.5" width="82" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ct1)"><text x="29" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(26,93,207)">Urgent</text></g></g><g clip-path="url(#svgimg4cp2)"><g color="rgb(26, 93, 207)"><clipPath id="svgimg4svgic3"><rect x="78.2" y="28" width="12" height="12"/></clipPath><g clip-path="url(#svgimg4svgic3)"><g transform="matrix(.75 0 0 .75 78.156 28)"><path d="m3.5 3.5 9 9m0-9-9 9" fill="none" stroke="rgb(26, 93, 207)" stroke-width="1.75" stroke-linecap="round" stroke-dasharray="none" stroke-linejoin="miter" stroke-opacity="1" fill-opacity="1" opacity="1" style="marker:none;vector-effect:none;color-interpolation:srgb"/></g></g></g></g><rect x="111.2" y="20" width="94.2" height="28" rx="14" fill="rgba(0,0,98,0.05)"/><rect x="111.2" y="20" width="94.2" height="28" rx="14" fill="url(#svgimg4bg4)"/><rect x="111.5" y="20.5" width="93" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp5)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg4svgic6"><rect x="120.2" y="28" width="12" height="12"/></clipPath><g clip-path="url(#svgimg4svgic6)"><g transform="matrix(.5 0 0 .5 120.156 28)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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(#svgimg4cp7)"><g clip-path="url(#svgimg4ct8)"><text x="136.16" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">report.md</text></g></g><rect x="213.3" y="20" width="65.9" height="28" rx="14" fill="rgb(29,29,31)"/><rect x="213.5" y="20.5" width="65" height="27" rx="13.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp9)"><g clip-path="url(#svgimg4ct10)"><text x="222.33" y="38" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(255,255,255)">Backlog</text></g></g></g></g></g></g><text x="16" y="154" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Action Chips in a Compact Value Table</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="164" width="460" height="230"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 164)"><defs><clipPath id="svgimg7cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg7ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg7cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg7ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><linearGradient id="svgimg7bg4" gradientUnits="userSpaceOnUse" x1="266.7813" y1="32.3906" x2="266.7813" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp5"><rect x="246.5" y="33.7" width="40.5" height="15.4"/></clipPath><clipPath id="svgimg7ct6"><rect x="246.5" y="33.7" width="40.5" height="15.4"/></clipPath><linearGradient id="svgimg7bg7" gradientUnits="userSpaceOnUse" x1="321.7266" y1="32.3906" x2="321.7266" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp8"><rect x="303" y="33.7" width="37.4" height="15.4"/></clipPath><clipPath id="svgimg7ct9"><rect x="303" y="33.7" width="37.4" height="15.4"/></clipPath><linearGradient id="svgimg7bg10" gradientUnits="userSpaceOnUse" x1="386.7109" y1="32.3906" x2="386.7109" y2="50.3906"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp11"><rect x="356.4" y="33.7" width="60.6" height="15.4"/></clipPath><clipPath id="svgimg7ct12"><rect x="356.4" y="33.7" width="60.6" height="15.4"/></clipPath><clipPath id="svgimg7cp13"><rect x="37" y="73.2" width="77.8" height="18"/></clipPath><clipPath id="svgimg7ct14"><rect x="37" y="73.2" width="77.8" height="18"/></clipPath><linearGradient id="svgimg7bg15" gradientUnits="userSpaceOnUse" x1="329.8047" y1="73.1875" x2="329.8047" y2="91.1875"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp16"><rect x="309.8" y="74.5" width="40" height="15.4"/></clipPath><clipPath id="svgimg7ct17"><rect x="309.8" y="74.5" width="40" height="15.4"/></clipPath><linearGradient id="svgimg7bg18" gradientUnits="userSpaceOnUse" x1="391.4063" y1="73.1875" x2="391.4063" y2="91.1875"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp19"><rect x="365.8" y="74.5" width="51.2" height="15.4"/></clipPath><clipPath id="svgimg7ct20"><rect x="365.8" y="74.5" width="51.2" height="15.4"/></clipPath><clipPath id="svgimg7cp21"><rect x="37" y="114" width="27.7" height="18"/></clipPath><clipPath id="svgimg7ct22"><rect x="37" y="114" width="27.7" height="18"/></clipPath><linearGradient id="svgimg7bg23" gradientUnits="userSpaceOnUse" x1="305.7188" y1="113.9844" x2="305.7188" y2="131.9844"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp24"><rect x="272.7" y="115.3" width="66" height="15.4"/></clipPath><clipPath id="svgimg7ct25"><rect x="272.7" y="115.3" width="66" height="15.4"/></clipPath><linearGradient id="svgimg7bg26" gradientUnits="userSpaceOnUse" x1="385.8594" y1="113.9844" x2="385.8594" y2="131.9844"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp27"><rect x="354.7" y="115.3" width="62.3" height="15.4"/></clipPath><clipPath id="svgimg7ct28"><rect x="354.7" y="115.3" width="62.3" height="15.4"/></clipPath><clipPath id="svgimg7cp29"><rect x="37" y="154.8" width="58" height="18"/></clipPath><clipPath id="svgimg7ct30"><rect x="37" y="154.8" width="58" height="18"/></clipPath><linearGradient id="svgimg7bg31" gradientUnits="userSpaceOnUse" x1="268.8203" y1="154.7813" x2="268.8203" y2="172.7813"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp32"><rect x="229.9" y="156.1" width="77.8" height="15.4"/></clipPath><clipPath id="svgimg7ct33"><rect x="229.9" y="156.1" width="77.8" height="15.4"/></clipPath><linearGradient id="svgimg7bg34" gradientUnits="userSpaceOnUse" x1="370.3672" y1="154.7813" x2="370.3672" y2="172.7813"><stop offset="0" stop-color="rgba(0,0,0,0)"/><stop offset="1" stop-color="rgba(0,0,0,0)"/></linearGradient><clipPath id="svgimg7cp35"><rect x="323.7" y="156.1" width="93.3" height="15.4"/></clipPath><clipPath id="svgimg7ct36"><rect x="323.7" y="156.1" width="93.3" height="15.4"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(0,0,98,0.05)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp2)"><g clip-path="url(#svgimg7ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Status</text></g></g><rect x="240.5" y="31.4" width="52.5" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="240.5" y="31.4" width="52.5" height="20" rx="3" fill="url(#svgimg7bg4)"/><rect x="241.5" y="31.5" width="51" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp5)"><g clip-path="url(#svgimg7ct6)"><text x="246.53" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:draft</text></g></g><rect x="297" y="31.4" width="49.4" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="297" y="31.4" width="49.4" height="20" rx="3" fill="url(#svgimg7bg7)"/><rect x="297.5" y="31.5" width="48" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp8)"><g clip-path="url(#svgimg7ct9)"><text x="303.03" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:sent</text></g></g><rect x="350.4" y="31.4" width="72.6" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="350.4" y="31.4" width="72.6" height="20" rx="3" fill="url(#svgimg7bg10)"/><rect x="350.5" y="31.5" width="72" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp11)"><g clip-path="url(#svgimg7ct12)"><text x="356.42" y="45.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:awarded</text></g></g></g><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp13)"><g clip-path="url(#svgimg7ct14)"><text x="37" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Ownership</text></g></g><rect x="303.8" y="72.2" width="52" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="303.8" y="72.2" width="52" height="20" rx="3" fill="url(#svgimg7bg15)"/><rect x="304.5" y="72.5" width="51" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp16)"><g clip-path="url(#svgimg7ct17)"><text x="309.8" y="86.69" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:mine</text></g></g><rect x="359.8" y="72.2" width="63.2" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="359.8" y="72.2" width="63.2" height="20" rx="3" fill="url(#svgimg7bg18)"/><rect x="360.5" y="72.5" width="62" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp19)"><g clip-path="url(#svgimg7ct20)"><text x="365.81" y="86.69" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">is:shared</text></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="62.5" x2="423" y2="62.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp21)"><g clip-path="url(#svgimg7ct22)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Site</text></g></g><rect x="266.7" y="113" width="78" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="266.7" y="113" width="78" height="20" rx="3" fill="url(#svgimg7bg23)"/><rect x="267.5" y="113.5" width="77" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp24)"><g clip-path="url(#svgimg7ct25)"><text x="272.72" y="127.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">site:Karachi</text></g></g><rect x="348.7" y="113" width="74.3" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="348.7" y="113" width="74.3" height="20" rx="3" fill="url(#svgimg7bg26)"/><rect x="349.5" y="113.5" width="73" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp27)"><g clip-path="url(#svgimg7ct28)"><text x="354.72" y="127.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">site:Lahore</text></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp29)"><g clip-path="url(#svgimg7ct30)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Content</text></g></g><rect x="223.9" y="153.8" width="89.8" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="223.9" y="153.8" width="89.8" height="20" rx="3" fill="url(#svgimg7bg31)"/><rect x="224.5" y="154.5" width="89" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp32)"><g clip-path="url(#svgimg7ct33)"><text x="229.91" y="168.28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">has:questions</text></g></g><g opacity="0.5" style="isolation:isolate"><rect x="317.7" y="153.8" width="105.3" height="20" rx="3" fill="rgba(0,0,98,0.05)"/><rect x="317.7" y="153.8" width="105.3" height="20" rx="3" fill="url(#svgimg7bg34)"/><rect x="318.5" y="154.5" width="104" height="19" rx="2.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp35)"><g clip-path="url(#svgimg7ct36)"><text x="323.73" y="168.28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(98,98,103)">has:attachments</text></g></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g></g></g></g></g></svg>

package/llms.txt

@@ -767,6 +767,14 @@ created, input }`. Never use a hand-styled `<input list>` + `<datalist>`.
   `external` (new tab, safe rel, announced) are optional, and a link chip has
   no remove button. Inside a ContentItem bubble set `tone="inherit"` so it
   follows the bubble's foreground instead of styling an anchor yourself.
+- **Use an action `Chip` for a value the user activates once.** `action` (with
+  `itemId`) renders the whole chip as a native
+  `<button type="button" data-action data-item-id>` for a delegated handler,
+  such as a search help filter token that inserts itself into the query, with
+  hover, press, focus-ring, and `disabled` states. `actionLabel` is an optional
+  accessible name that contains the visible label. It cannot also take `href`
+  or `removeAction`. A compact rounded action chip keeps a compact `Badge`'s row
+  height in a compact `ValueTable` cell; never make a `Badge` clickable.
 - **Use `ChoiceChips` for a wrapping exclusive choice.** When one value comes
   from a visible set too large for a `SegmentedControl` track (a nine-color
   palette in a 560px dialog), render separate pills backed by native radios:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.101",
+  "version": "5.0.0-beta.103",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",

package/dist/chunk-34U4ANDJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/feedback/chip/chip.tsx"],"names":[],"mappings":"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","file":"chunk-34U4ANDJ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport type { BadgeAppearance, BadgeShape, BadgeSize } from '../badge/badge.js';\n\n/**\n * A chip color role: a shared semantic tone, or `inherit`, which follows the\n * surrounding foreground (a chip inside a `brand-loud` ContentItem bubble)\n * and derives its fill, border, and focus ring from `currentColor`.\n */\nexport type ChipTone = SemanticTone | 'inherit';\n\ninterface ChipCommonProps {\n  /** Decorative leading icon, normally an unsized LucideIcon. */\n  icon?: SafeHtml;\n  tone?: ChipTone;\n  appearance?: BadgeAppearance;\n  shape?: BadgeShape;\n  size?: BadgeSize;\n  disabled?: boolean;\n  /** Record identifier available to an application delegated action handler. */\n  itemId?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype ChipLabelProps =\n  | { children: SafeHtml | string | number; truncate?: false }\n  | { children: string; truncate: true };\n\ninterface ChipNoLinkProps {\n  href?: never;\n  download?: never;\n  external?: never;\n}\n\n/**\n * A link chip renders a native `<a>` with Chip geometry. It cannot also carry\n * a remove button, because a button inside a link is invalid.\n */\ninterface ChipLinkProps {\n  /** Native destination; the chip renders as an `<a>`. */\n  href: string;\n  /** Download the destination: `true`, or the suggested file name. */\n  download?: string | boolean;\n  /** Open in a new tab with a safe rel and announce that behavior. */\n  external?: boolean;\n  removeAction?: never;\n  removeLabel?: never;\n}\n\n/**\n * A plain chip, a removable chip (a delegated action plus a specific\n * accessible name), or a link chip (`href`, optional `download`/`external`).\n */\nexport type ChipProps = ChipCommonProps &\n  ChipLabelProps &\n  (\n    | ({ removeAction: string; removeLabel: string } & ChipNoLinkProps)\n    | ({ removeAction?: never; removeLabel?: never } & ChipNoLinkProps)\n    | ChipLinkProps\n  );\n\nfunction removeButton(action: string, label: string, disabled: boolean) {\n  return (\n    <button\n      class=\"kui-chip__remove\"\n      type=\"button\"\n      data-action={action}\n      aria-label={label}\n      disabled={disabled}\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n        <path\n          d=\"M3.5 3.5 12.5 12.5M12.5 3.5 3.5 12.5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n  );\n}\n\nfunction downloadValue(download: string | boolean | undefined) {\n  switch (download) {\n    case undefined:\n    case false:\n      return undefined;\n    case true:\n      return '';\n    default:\n      return download;\n  }\n}\n\n/**\n * A short label with an optional native remove button, or a native link when\n * `href` is set. The application owns removal and the link destination.\n */\nexport function Chip({\n  children,\n  icon,\n  truncate = false,\n  tone = 'neutral',\n  appearance = 'quiet',\n  shape = 'pill',\n  size = 'default',\n  disabled = false,\n  itemId,\n  className = '',\n  slot,\n  href,\n  download,\n  external = false,\n  removeAction,\n  removeLabel,\n}: ChipProps) {\n  if (truncate && typeof children !== 'string')\n    throw new TypeError('Chip truncate requires a plain text label');\n  const content = (\n    <>\n      {icon === undefined ? null : (\n        <span class=\"kui-chip__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span\n        class=\"kui-chip__label\"\n        title={truncate ? String(children) : undefined}\n      >\n        {children}\n      </span>\n    </>\n  );\n  const rootClass = `kui-chip ${className}`.trim();\n  if (href !== undefined) {\n    const textLabel =\n      typeof children === 'string' || typeof children === 'number'\n        ? String(children)\n        : undefined;\n    return (\n      <a\n        class={rootClass}\n        href={disabled ? undefined : href}\n        download={disabled ? undefined : downloadValue(download)}\n        target={disabled || !external ? undefined : '_blank'}\n        rel={disabled || !external ? undefined : 'noopener noreferrer'}\n        tabindex={disabled ? -1 : undefined}\n        aria-label={\n          external && textLabel !== undefined\n            ? `${textLabel} (opens in new tab)`\n            : undefined\n        }\n        aria-disabled={disabled ? 'true' : undefined}\n        data-component=\"chip\"\n        data-link=\"\"\n        data-tone={tone}\n        data-appearance={appearance}\n        data-shape={shape}\n        data-size={size}\n        data-disabled={disabled ? '' : undefined}\n        data-truncate={truncate ? '' : undefined}\n        data-item-id={itemId}\n        slot={slot}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <span\n      class={rootClass}\n      data-component=\"chip\"\n      data-tone={tone}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-size={size}\n      data-disabled={disabled ? '' : undefined}\n      data-truncate={truncate ? '' : undefined}\n      data-item-id={itemId}\n      slot={slot}\n    >\n      {content}\n      {removeAction !== undefined && removeLabel !== undefined\n        ? removeButton(removeAction, removeLabel, disabled)\n        : null}\n    </span>\n  );\n}\n"]}