@kerfjs/ui 5.0.0-beta.35 → 5.0.0-beta.36

package/dist/divider-sides-BzB6rphT.d.ts

@@ -0,0 +1,6 @@
+/** Canonical physical edge combinations in top/right/bottom/left order. */
+type Sides = '' | 't' | 'r' | 'b' | 'l' | 'tr' | 'tb' | 'tl' | 'rb' | 'rl' | 'bl' | 'trb' | 'trl' | 'tbl' | 'rbl' | 'trbl';
+/** @deprecated Use the general `Sides` type. */
+type DividerSides = Sides;
+
+export type { DividerSides as D, Sides as S };

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export { ValueTable, ValueTableProps, ValueTableRow, ValueTableRowProps } from '
 export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';
 export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
 export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
-export { D as DividerSides } from './divider-sides-267FA7sY.js';
+export { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
 export { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
 import 'kerfjs';
 import 'lucide';

package/dist/index.js

@@ -10,19 +10,19 @@ export { DialogSurface, PopupSurface } from './chunk-WSXUPSID.js';
 export { TabBar } from './chunk-ZPWZIVI6.js';
 export { ToolbarText } from './chunk-V6GQKOX2.js';
 export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-CAB6NQ2T.js';
-export { Row } from './chunk-QHCBZTDK.js';
+export { Row } from './chunk-AVZ2IMWG.js';
 export { SegmentedControl } from './chunk-E34TE2ZI.js';
 export { FloatingToolbar } from './chunk-DYBPI5O2.js';
 export { ListActionRow } from './chunk-DAO2VFTT.js';
-export { ListInsetControl } from './chunk-MFR2IIFG.js';
-export { ListInsetText } from './chunk-KFUUFNTS.js';
+export { ListInsetControl } from './chunk-2TYUFZUC.js';
+export { ListInsetText } from './chunk-EYALJQQD.js';
 export { AppTab } from './chunk-OMSRSL3B.js';
 export { ToolbarControlGroup } from './chunk-B6JYRX3P.js';
 export { Toolbar } from './chunk-VXFGMDA7.js';
 export { Pane } from './chunk-I4V3UDSA.js';
-export { ListHeader } from './chunk-OC275HHS.js';
+export { ListHeader } from './chunk-5FJ53EOF.js';
 export { ListItem } from './chunk-I45QO2IZ.js';
-export { List } from './chunk-7JQAQWVC.js';
+export { List } from './chunk-TNXDXSGP.js';
 
 
 export { Skeleton } from './chunk-T7DOWS6T.js';

package/dist/list-header.d.ts

@@ -7,6 +7,7 @@ type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undef
     'data-has-count'?: never;
     'data-density'?: never;
     'data-divider'?: never;
+    'data-inline'?: never;
     'data-indicator-tone'?: never;
     'data-toggle'?: never;
 }>;
@@ -21,6 +22,8 @@ interface ListHeaderBaseProps {
     label: string;
     density?: 'standard' | 'compact';
     divider?: 'none' | 'before' | 'after' | 'both';
+    /** Shrink-wrap the header without its default outer margin, border, or padding. */
+    inline?: boolean;
     indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';
     /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
     placeholder?: boolean;
@@ -72,6 +75,6 @@ type ListHeaderIndicatorProps = {
     status?: SafeHtml;
 };
 type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
-declare function ListHeader({ label, count, countLabel, badge, status, density, divider, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, }: ListHeaderProps): SafeHtml;
+declare function ListHeader({ label, count, countLabel, badge, status, density, divider, inline, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, }: ListHeaderProps): SafeHtml;
 
 export { ListHeader, type ListHeaderProps };

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-OC275HHS.js';
+export { ListHeader } from './chunk-5FJ53EOF.js';
 
 
 

package/dist/list-inset-control.d.ts

@@ -1,9 +1,12 @@
 import * as kerfjs from 'kerfjs';
+import { S as Sides } from './divider-sides-BzB6rphT.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ListInsetControlProps {
     /** Control(s) that own their own border and padding (e.g. an input, a `wa-*`). */
     children: KerfUiContent;
+    /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */
+    sides?: Sides;
     className?: string;
 }
 /**
@@ -12,6 +15,6 @@ interface ListInsetControlProps {
  * Use it for controls that carry their own border and padding but no outer margin
  * — the wrapper adds only the alignment margin and layout, not a second inset.
  */
-declare function ListInsetControl({ children, className, }: ListInsetControlProps): kerfjs.SafeHtml;
+declare function ListInsetControl({ children, sides, className, }: ListInsetControlProps): kerfjs.SafeHtml;
 
-export { ListInsetControl, type ListInsetControlProps };
+export { ListInsetControl, type ListInsetControlProps, Sides };

package/dist/list-inset-control.js

@@ -1,3 +1,3 @@
-export { ListInsetControl } from './chunk-MFR2IIFG.js';
+export { ListInsetControl } from './chunk-2TYUFZUC.js';
 
 //# sourceMappingURL=list-inset-control.js.map

package/dist/list-inset-text.d.ts

@@ -1,11 +1,14 @@
 import * as kerfjs from 'kerfjs';
+import { S as Sides } from './divider-sides-BzB6rphT.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ListInsetTextProps {
     /** Text (or inline content) that carries no margin, border, or padding of its own. */
     children: KerfUiContent | string;
+    /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */
+    sides?: Sides;
     /**
-     * Keep only the horizontal geometry (inline margin, left/right border, and
+     * @deprecated Pass `sides="rl"` instead. Keep only the horizontal geometry (inline margin, left/right border, and
      * left/right padding) and drop the vertical margin, border, and padding. Use it
      * when the text edge must still align with bordered items but the line should not
      * add its own vertical box space — tight text layout inside a content region.
@@ -21,6 +24,6 @@ interface ListInsetTextProps {
  * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box
  * space for tight text layout.
  */
-declare function ListInsetText({ children, horizontalOnly, className, }: ListInsetTextProps): kerfjs.SafeHtml;
+declare function ListInsetText({ children, sides, horizontalOnly, className, }: ListInsetTextProps): kerfjs.SafeHtml;
 
-export { ListInsetText, type ListInsetTextProps };
+export { ListInsetText, type ListInsetTextProps, Sides };

package/dist/list-inset-text.js

@@ -1,3 +1,3 @@
-export { ListInsetText } from './chunk-KFUUFNTS.js';
+export { ListInsetText } from './chunk-EYALJQQD.js';
 
 //# sourceMappingURL=list-inset-text.js.map

package/dist/list.d.ts

@@ -1,6 +1,6 @@
 import * as kerfjs from 'kerfjs';
 import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
-import { D as DividerSides } from './divider-sides-267FA7sY.js';
+import { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
 import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
@@ -18,9 +18,13 @@ interface ListProps {
     scrollable?: boolean;
     /** Physical divider edges in canonical top/right/bottom/left order. */
     dividerSides?: DividerSides;
+    /** Physical sides that receive the standard 17px text inset. */
+    textInsets?: Sides;
+    /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
+    controlInsets?: Sides;
     className?: string;
 }
 /** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
-declare function List({ children, gap, flex, hAlign, vAlign, scrollable, dividerSides, className, }: ListProps): kerfjs.SafeHtml;
+declare function List({ children, gap, flex, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, }: ListProps): kerfjs.SafeHtml;
 
-export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, UiSpaceName, VerticalAlignment };
+export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, Sides, UiSpaceName, VerticalAlignment };

package/dist/list.js

@@ -1,4 +1,4 @@
-export { List } from './chunk-7JQAQWVC.js';
+export { List } from './chunk-TNXDXSGP.js';
 
 
 

package/dist/row.d.ts

@@ -1,5 +1,6 @@
 import * as kerfjs from 'kerfjs';
 import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
+import { S as Sides } from './divider-sides-BzB6rphT.js';
 import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
@@ -15,9 +16,13 @@ interface RowProps {
     flex?: boolean | CssFlexKeyword | CssFlex;
     /** Allow children to wrap onto additional lines. */
     wrap?: boolean;
+    /** Physical sides that receive the standard 17px text inset. */
+    textInsets?: Sides;
+    /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
+    controlInsets?: Sides;
     className?: string;
 }
 /** A horizontal flex row with explicit physical-axis alignment and spacing. */
-declare function Row({ children, hAlign, vAlign, gap, flex, wrap, className, }: RowProps): kerfjs.SafeHtml;
+declare function Row({ children, hAlign, vAlign, gap, flex, wrap, textInsets, controlInsets, className, }: RowProps): kerfjs.SafeHtml;
 
-export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, Row, type RowProps, UiSpaceName, VerticalAlignment };
+export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, Row, type RowProps, Sides, UiSpaceName, VerticalAlignment };

package/dist/row.js

@@ -1,4 +1,4 @@
-export { Row } from './chunk-QHCBZTDK.js';
+export { Row } from './chunk-AVZ2IMWG.js';
 
 
 

package/dist/styles/list-header.css

@@ -38,6 +38,33 @@
   border-block-end: 1px solid var(--kui-list-group-divider-color);
 }
 
+.kui-list-header[data-inline="true"] {
+  display: inline-block;
+  width: auto;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  vertical-align: middle;
+}
+
+.kui-list-header[data-inline="true"] > .kui-list-header__title,
+.kui-list-header[data-inline="true"] > .kui-list-header__action {
+  vertical-align: middle;
+}
+
+.kui-list-header[data-inline="true"] > .kui-list-header__title {
+  display: inline-flex;
+  width: auto;
+}
+
+.kui-list-header[data-inline="true"] > .kui-list-header__action {
+  margin-inline-start: var(--kui-layout-item-gap, 0.5rem);
+}
+
+.kui-list-header[data-inline="true"] > .kui-list-header__toggle {
+  width: auto;
+}
+
 .kui-list-header__title,
 .kui-list-header__action {
   box-sizing: border-box;

package/dist/styles/list-inset-control.css

@@ -1,7 +1,23 @@
 .kui-list-inset-control {
   display: flex;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  margin: 0;
   justify-content: stretch;
   align-items: stretch;
   gap: 0.5rem;
 }
+
+.kui-list-inset-control[data-sides*="t"] {
+  margin-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list-inset-control[data-sides*="r"] {
+  margin-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list-inset-control[data-sides*="b"] {
+  margin-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list-inset-control[data-sides*="l"] {
+  margin-left: var(--kui-layout-inline-margin, 0.5rem);
+}

package/dist/styles/list-inset-text.css

@@ -1,14 +1,30 @@
-.kui-list-inset-text {
-  margin: 0 0.5rem;
-  border: 1px solid transparent;
-  padding: 0.5rem;
+.kui-list-inset-text,
+.kui-list-inset-text--horizontal {
+  margin: 0;
+  border: 0 solid transparent;
+  padding: 0;
 }
 
-/* Horizontal-only: keep the inline inset (margin + left/right border + left/right
-   padding) so the text edge still aligns with bordered items, but drop the vertical
-   box space for tight text layout. */
-.kui-list-inset-text--horizontal {
-  margin-block: 0;
-  border-block: 0;
-  padding-block: 0;
+.kui-list-inset-text[data-sides*="t"] {
+  margin-top: var(--kui-layout-inline-margin, 0.5rem);
+  border-top-width: 1px;
+  padding-top: var(--kui-layout-item-padding, 0.5rem);
+}
+
+.kui-list-inset-text[data-sides*="r"] {
+  margin-right: var(--kui-layout-inline-margin, 0.5rem);
+  border-right-width: 1px;
+  padding-right: var(--kui-layout-item-padding, 0.5rem);
+}
+
+.kui-list-inset-text[data-sides*="b"] {
+  margin-bottom: var(--kui-layout-inline-margin, 0.5rem);
+  border-bottom-width: 1px;
+  padding-bottom: var(--kui-layout-item-padding, 0.5rem);
+}
+
+.kui-list-inset-text[data-sides*="l"] {
+  margin-left: var(--kui-layout-inline-margin, 0.5rem);
+  border-left-width: 1px;
+  padding-left: var(--kui-layout-item-padding, 0.5rem);
 }

package/dist/styles/list.css

@@ -10,6 +10,8 @@
   min-width: 0;
   min-height: 0;
   box-sizing: border-box;
+  padding: var(--_kui-list-inset-top, 0) var(--_kui-list-inset-right, 0)
+    var(--_kui-list-inset-bottom, 0) var(--_kui-list-inset-left, 0);
   flex: var(--_kui-list-flex, initial);
   flex-direction: column;
   align-items: stretch;
@@ -23,6 +25,50 @@
     inset 1px 0 var(--_kui-list-divider-left);
 }
 
+.kui-list[control-insets*="t"] {
+  --_kui-list-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[control-insets*="r"] {
+  --_kui-list-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[control-insets*="b"] {
+  --_kui-list-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[control-insets*="l"] {
+  --_kui-list-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[text-insets*="t"] {
+  --_kui-list-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[text-insets*="r"] {
+  --_kui-list-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[text-insets*="b"] {
+  --_kui-list-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[text-insets*="l"] {
+  --_kui-list-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
 .kui-list[data-h-align="left"] {
   align-items: flex-start;
   align-content: flex-start;

package/dist/styles/row.css

@@ -5,6 +5,8 @@
   min-width: 0;
   min-height: 0;
   box-sizing: border-box;
+  padding: var(--_kui-row-inset-top, 0) var(--_kui-row-inset-right, 0)
+    var(--_kui-row-inset-bottom, 0) var(--_kui-row-inset-left, 0);
   flex: var(--_kui-row-flex, initial);
   flex-direction: row;
   flex-wrap: nowrap;
@@ -14,6 +16,50 @@
   gap: var(--_kui-row-gap, var(--kui-row-gap));
 }
 
+.kui-row[control-insets*="t"] {
+  --_kui-row-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[control-insets*="r"] {
+  --_kui-row-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[control-insets*="b"] {
+  --_kui-row-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[control-insets*="l"] {
+  --_kui-row-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[text-insets*="t"] {
+  --_kui-row-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[text-insets*="r"] {
+  --_kui-row-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[text-insets*="b"] {
+  --_kui-row-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[text-insets*="l"] {
+  --_kui-row-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
 .kui-row[data-wrap="true"] {
   flex-wrap: wrap;
 }

package/dist/toolbar.d.ts

@@ -1,5 +1,5 @@
 import * as kerfjs from 'kerfjs';
-import { D as DividerSides } from './divider-sides-267FA7sY.js';
+import { D as DividerSides } from './divider-sides-BzB6rphT.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ToolbarProps {

package/docs/component-contract.md

@@ -231,9 +231,12 @@ In `ListHeader` toggle mode, omitting `actionIcon` composes the production
 `DisclosureArrow` and derives its visual direction from `expanded`. The app
 must update that controlled state and reveal or hide real content. Passing a
 custom `actionIcon` replaces the default rather than layering or rotating both.
-The root fills the available inline width after its standard margins. A
-separate action stays at the logical end in its 44px target while the visible
-glyph defaults to 18px through `--kui-list-header-action-icon-size`.
+The root fills the available inline width after its standard margins by
+default. Set `inline` when it must shrink-wrap beside surrounding content; that
+presentation removes the root margin, border, and padding while retaining the
+title and optional action's own control geometry. A separate action stays at
+the logical end while the visible glyph defaults to 18px through
+`--kui-list-header-action-icon-size`.
 
 `StateBanner` exposes instance-level `--kui-state-banner-background`,
 `--kui-state-banner-border`, `--kui-state-banner-foreground`,

package/docs/design/templates/list-header/inline-action-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="cp2"><rect x="109" y="33" width="18.2" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="71" height="43" rx="11.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="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">QUEUED</text></g></g><rect x="100.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgic3"><rect x="109.2" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 109.188 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>

package/docs/design/templates/list-header/inline-action.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="cp2"><rect x="109" y="33" width="18.2" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="71" height="43" rx="11.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="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">QUEUED</text></g></g><rect x="100.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgic3"><rect x="109.2" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 109.188 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>

package/docs/design/templates/list-header-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 536" width="452" height="536"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="cp3"><rect x="16" y="428" width="420" height="92"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="406" width="420" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="428" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="536" 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)">Label with an action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg6ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg6cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp0)"><g clip-path="url(#svgimg6ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg6svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label with a count pill</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg9cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg9ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg9ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg9cp0)"><g clip-path="url(#svgimg9ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">12</text></g></g></g></g><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Disclosure toggle, collapsed</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg12cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg12ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg12cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">ARCHIVED</text></g></g><g clip-path="url(#svgimg12cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg12svgic3"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg12svgic3)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="418" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Disclosure toggle, expanded</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="428" width="420" height="92"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 428)"><defs><clipPath id="svgimg15cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg15ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg15ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg15cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g clip-path="url(#svgimg15ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#svgimg15cp3)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg15svgic4"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg15svgic4)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 666" width="452" height="666"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="cp3"><rect x="16" y="428" width="420" height="92"/></clipPath><clipPath id="cp4"><rect x="16" y="558" width="420" height="92"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="406" width="420" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="428" width="420" height="92" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="536" width="420" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="558" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="666" 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)">Label with an action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg7ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg7cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g clip-path="url(#svgimg7ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg7svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label with a count pill</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg10cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg10ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg10ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g clip-path="url(#svgimg10ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">12</text></g></g></g></g><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Inline label with an action</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg13cp0"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="svgimg13ct1"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="svgimg13cp2"><rect x="109" y="33" width="18.2" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="71" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg13cp0)"><g clip-path="url(#svgimg13ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">QUEUED</text></g></g><rect x="100.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg13cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg13svgic3"><rect x="109.2" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg13svgic3)"><g transform="matrix(.75 0 0 .75 109.188 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="418" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Disclosure toggle, collapsed</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="428" width="420" height="92"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 428)"><defs><clipPath id="svgimg16cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg16ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg16cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg16cp0)"><g clip-path="url(#svgimg16ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">ARCHIVED</text></g></g><g clip-path="url(#svgimg16cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg16svgic3"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg16svgic3)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="548" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Disclosure toggle, expanded</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="558" width="420" height="92"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 558)"><defs><clipPath id="svgimg19cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg19ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg19ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg19cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg19cp0)"><g clip-path="url(#svgimg19ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#svgimg19cp3)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg19svgic4"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg19svgic4)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></g></svg>

package/docs/design/templates/list-header.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 536" width="452" height="536"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="cp3"><rect x="16" y="428" width="420" height="92"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="406" width="420" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="428" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="536" 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)">Label with an action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg6ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg6cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp0)"><g clip-path="url(#svgimg6ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg6svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label with a count pill</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg9cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg9ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg9ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg9cp0)"><g clip-path="url(#svgimg9ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">12</text></g></g></g></g><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Disclosure toggle, collapsed</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg12cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg12ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg12cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">ARCHIVED</text></g></g><g clip-path="url(#svgimg12cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg12svgic3"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg12svgic3)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="418" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Disclosure toggle, expanded</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="428" width="420" height="92"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 428)"><defs><clipPath id="svgimg15cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg15ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg15ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg15cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g clip-path="url(#svgimg15ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#svgimg15cp3)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg15svgic4"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg15svgic4)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 666" width="452" height="666"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="cp3"><rect x="16" y="428" width="420" height="92"/></clipPath><clipPath id="cp4"><rect x="16" y="558" width="420" height="92"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="406" width="420" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="428" width="420" height="92" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="536" width="420" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="558" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="666" 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)">Label with an action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg7ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg7cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g clip-path="url(#svgimg7ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg7svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label with a count pill</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg10cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg10ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg10ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g clip-path="url(#svgimg10ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">12</text></g></g></g></g><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Inline label with an action</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg13cp0"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="svgimg13ct1"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="svgimg13cp2"><rect x="109" y="33" width="18.2" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="71" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg13cp0)"><g clip-path="url(#svgimg13ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">QUEUED</text></g></g><rect x="100.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg13cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg13svgic3"><rect x="109.2" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg13svgic3)"><g transform="matrix(.75 0 0 .75 109.188 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="418" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Disclosure toggle, collapsed</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="428" width="420" height="92"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 428)"><defs><clipPath id="svgimg16cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg16ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg16cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg16cp0)"><g clip-path="url(#svgimg16ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">ARCHIVED</text></g></g><g clip-path="url(#svgimg16cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg16svgic3"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg16svgic3)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="548" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Disclosure toggle, expanded</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="558" width="420" height="92"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 558)"><defs><clipPath id="svgimg19cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg19ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg19ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg19cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg19cp0)"><g clip-path="url(#svgimg19ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#svgimg19cp3)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg19svgic4"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg19svgic4)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></g></svg>