@hraness/design-kit 0.36.5 → 0.38.0

package/src/mockups.css

@@ -107,6 +107,39 @@
     flex: none;
   }
 
+  /* Brand marks are app-icon tiles: the vendor glyph in readable ink on the
+   * vendor color. The glyph variant follows the surrounding text instead. */
+  .hkm-root .hkm-brand-mark {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    inline-size: var(--hkm-mark-size, 32px);
+    block-size: var(--hkm-mark-size, 32px);
+    border-radius: calc(var(--hkm-mark-size, 32px) * 0.26);
+    background: var(--hkm-mark-accent, var(--hkm-field));
+    color: var(--hkm-mark-ink, var(--hkm-muted));
+    box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.1));
+    font: 650 calc(var(--hkm-mark-size, 32px) * 0.36)/1 var(--hkm-font);
+    letter-spacing: 0.01em;
+  }
+
+  .hkm-root .hkm-brand-mark svg {
+    display: block;
+    inline-size: 56%;
+    block-size: 56%;
+  }
+
+  .hkm-root .hkm-brand-mark[data-hkm-variant="glyph"] {
+    background: none;
+    box-shadow: none;
+    color: inherit;
+  }
+
+  .hkm-root .hkm-brand-mark[data-hkm-variant="glyph"] svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   .hkm-root .hkm-avatar {
     display: inline-grid;
     flex: none;
@@ -2329,22 +2362,13 @@
   }
 
   .hkm-showcase .hkm-step-number {
-    display: inline-grid;
-    place-items: center;
-    inline-size: 20px;
-    block-size: 20px;
-    border: 1px solid currentColor;
-    border-radius: 50%;
-    font-size: 11px;
+    flex: none;
+    color: var(--hkm-sc-muted);
+    font-size: 0.875rem;
+    line-height: 1.5;
     font-variant-numeric: tabular-nums;
   }
 
-  .hkm-showcase .hkm-tab[data-hkm-done] .hkm-step-number {
-    border-color: var(--hkm-accent);
-    background: var(--hkm-accent);
-    color: var(--hkm-accent-foreground);
-  }
-
   .hkm-showcase .hkm-showcase-settings {
     display: flex;
     flex-wrap: wrap;
@@ -2412,11 +2436,26 @@
     outline-color: var(--hkm-accent-foreground);
   }
 
+  .hkm-showcase .hkm-showcase-hints {
+    display: grid;
+    min-inline-size: 0;
+  }
+
+  .hkm-showcase .hkm-showcase-hints > .hkm-showcase-hint {
+    grid-area: 1 / 1;
+  }
+
+  .hkm-showcase .hkm-showcase-hint[data-hkm-reserving] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
   .hkm-showcase .hkm-showcase-hint {
     min-block-size: 2.9em;
     margin: 0;
     color: var(--hkm-sc-muted);
     font-size: 13px;
+    overflow-wrap: anywhere;
   }
 
   .hkm-showcase .hkm-showcase-stage {
@@ -2512,14 +2551,14 @@
     }
   }
 
-  /* Folder tabs share an edge with each showcase panel. */
+  /* Mode selectors retain a shared edge with their preview panel. */
   .hkm-showcase:is(.hkm-steps, .hkm-modes) { gap: 0; }
   .hkm-showcase.hkm-steps .hkm-showcase-controls { padding: 0; border: 0; border-radius: 0; background: transparent; }
   .hkm-showcase .hkm-folder-tabs { gap: 6px; margin: 0; padding: 0; border: 0; position: relative; z-index: 1; }
   .hkm-showcase .hkm-folder-tabs .hkm-tab { min-block-size: 48px; padding: 12px 18px; border: 1px solid var(--hkm-sc-line); border-block-end: 0; border-radius: 12px 12px 0 0; background: var(--hkm-sc-field); color: var(--hkm-sc-muted); }
   .hkm-showcase .hkm-folder-tabs .hkm-tab[aria-selected="true"] { background: var(--hkm-sc-bg); color: var(--hkm-sc-fg); }
   .hkm-showcase .hkm-folder-tabs .hkm-tab:hover { color: var(--hkm-sc-fg); }
-  .hkm-showcase.hkm-steps .hkm-step-stage { display: grid; border: 1px solid var(--hkm-sc-line); border-radius: 0 12px 12px 12px; background: var(--hkm-sc-bg); margin-block-start: -1px; overflow: clip; }
+  .hkm-showcase.hkm-steps .hkm-step-stage { display: grid; min-inline-size: 0; border: 1px solid var(--hkm-sc-line); border-radius: var(--hkm-step-radius, 12px); background: var(--hkm-sc-bg); overflow: clip; }
   .hkm-showcase.hkm-modes .hkm-mode-panel { border: 1px solid var(--hkm-sc-line); border-radius: 12px; background: var(--hkm-sc-bg); overflow: clip; }
   .hkm-showcase.hkm-modes .hkm-folder-tabs + .hkm-mode-panel { border-start-start-radius: 0; margin-block-start: -1px; }
   .hkm-showcase.hkm-modes .hkm-showcase-controls { border: 0; border-block-end: 1px solid var(--hkm-sc-line); border-radius: 0; }
@@ -2527,10 +2566,13 @@
   .hkm-mode-surface { grid-area: 1 / 1; min-inline-size: 0; align-self: start; }
   .hkm-mode-surface[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
   .hkm-showcase.hkm-modes .hkm-mode-surface > .hkm-fit > .hkm-fit-inner > .hkm-root,
-  .hkm-showcase.hkm-modes .hkm-mode-surface > .hkm-fit > .hkm-fit-inner > .hkm-root > .hkm-window { border: 0; border-radius: 0; box-shadow: none; }
+  .hkm-showcase.hkm-modes .hkm-mode-surface > .hkm-fit > .hkm-fit-inner > .hkm-root > .hkm-window,
+  .hkm-showcase.hkm-steps .hkm-step-panel > .hkm-fit > .hkm-fit-inner > .hkm-root,
+  .hkm-showcase.hkm-steps .hkm-step-panel > .hkm-fit > .hkm-fit-inner > .hkm-root > .hkm-window { border: 0; border-radius: 0; box-shadow: none; }
   .hkm-step-panel { grid-area: 1 / 1; min-inline-size: 0; align-self: start; }
   .hkm-step-panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
-  .hkm-showcase.hkm-steps .hkm-step-panel .hkm-root { border-start-start-radius: 0; border-start-end-radius: 0; box-shadow: none; }
+  /* Browser and app titles use the same chrome geometry inside a sequence. */
+  .hkm-showcase .hkm-root :is(.hkm-title-bar, .hkm-browser-bar) { block-size: 44px; font-size: 13px; }
   /* Fill uses the tallest complete slide as its natural height. It does not
    * scale text or ask fitted font sizes to determine the stage height. */
   .hkm-showcase[data-hkm-fit="fill"] [data-hkm-measuring] [data-hkm-fill-frame] > .hkm-window > .hkm-page { max-block-size: none; }
@@ -2567,11 +2609,75 @@
     flex: none;
   }
 
-  .hkm-showcase.hkm-steps .hkm-step-nav { justify-content: space-between; padding-block-start: 18px; gap: 16px; }
-  .hkm-showcase.hkm-steps .hkm-step-button { display: inline-grid; place-items: center; min-inline-size: 52px; min-block-size: 52px; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--hkm-sc-fg); }
-  .hkm-showcase.hkm-steps .hkm-step-button[data-hkm-primary] { background: var(--hkm-sc-fg); color: var(--hkm-sc-bg); }
-  .hkm-showcase.hkm-steps .hkm-step-button:disabled { color: var(--hkm-sc-muted); background: transparent; }
-  .hkm-showcase.hkm-steps .hkm-step-button[data-hkm-primary]:disabled { background: var(--hkm-sc-field); }
+  /* A walkthrough is one tabbed selector: the steps and the preview share an
+   * edge. Compact layouts attach a tab strip to the preview's top edge between
+   * Back and Next. Wide layouts stack the steps on its start edge, flush with
+   * a square corner, and put Back and Next under them. The selected tab takes
+   * the window-chrome color so it reads as part of the frame below it. */
+  .hkm-showcase.hkm-steps {
+    --hkm-step-radius: 12px;
+    --hkm-step-tab-radius: 10px;
+    --hkm-step-tab-selected: var(--hkm-chrome);
+    --hkm-step-tab-hover: color-mix(in srgb, var(--hkm-chrome) 55%, transparent);
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+  .hkm-showcase .hkm-step-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "controls" "stage" "descriptions"; align-items: start; min-inline-size: 0; }
+  .hkm-showcase.hkm-steps .hkm-step-controls { grid-area: controls; position: relative; z-index: 1; min-inline-size: 0; margin-block-end: -1px; }
+  .hkm-showcase.hkm-steps .hkm-step-stage { grid-area: stage; }
+  .hkm-showcase.hkm-steps .hkm-step-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "back tabs next"; align-items: end; gap: 6px; min-inline-size: 0; padding: 0; }
+  .hkm-showcase.hkm-steps .hkm-step-button { display: inline-grid; place-items: center; inline-size: 44px; min-inline-size: 44px; min-block-size: 44px; margin-block-end: 1px; padding: 0; border: 0; border-radius: var(--hkm-step-tab-radius); background: transparent; color: var(--hkm-sc-fg); }
+  .hkm-showcase.hkm-steps .hkm-step-button:first-child { grid-area: back; }
+  .hkm-showcase.hkm-steps .hkm-step-button:last-child { grid-area: next; }
+  .hkm-showcase.hkm-steps .hkm-step-button:hover:enabled { background: var(--hkm-step-tab-hover); }
+  .hkm-showcase.hkm-steps .hkm-step-button:disabled { background: transparent; color: var(--hkm-sc-muted); cursor: default; }
+  .hkm-showcase .hkm-step-count { display: none; grid-area: count; color: var(--hkm-sc-muted); font: 500 0.8125rem/1 var(--hkm-mono); font-variant-numeric: tabular-nums; text-align: center; }
+  .hkm-showcase.hkm-steps .hkm-step-tabs { grid-area: tabs; display: flex; gap: 2px; min-inline-size: 0; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; border: 0; scrollbar-width: none; }
+  .hkm-showcase.hkm-steps .hkm-step-tabs::-webkit-scrollbar { display: none; }
+  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 10px; min-inline-size: 44px; min-block-size: 44px; padding: 10px 16px; border: 1px solid transparent; border-block-end: 0; border-radius: var(--hkm-step-tab-radius) var(--hkm-step-tab-radius) 0 0; background: transparent; color: var(--hkm-sc-muted); font-size: 0.9375rem; line-height: 1.4; font-weight: 550; text-align: start; white-space: nowrap; }
+  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab:hover { background: var(--hkm-step-tab-hover); color: var(--hkm-sc-fg); }
+  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab[aria-selected="true"] { border-color: var(--hkm-sc-line); background: var(--hkm-step-tab-selected); color: var(--hkm-sc-fg); }
+  /* A preview pinned to its own theme lends that theme to the selected tab,
+   * so a dark window on a light page still reads as one frame. */
+  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme="dark"]) .hkm-step-tabs .hkm-tab[aria-selected="true"] { color-scheme: dark; }
+  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme="light"]) .hkm-step-tabs .hkm-tab[aria-selected="true"] { color-scheme: light; }
+  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme]) .hkm-step-tabs .hkm-tab[aria-selected="true"] { color: var(--hkm-fg); }
+  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme]) .hkm-step-tabs .hkm-tab[aria-selected="true"] :is(.hkm-step-number, .hkm-step-label) { color: var(--hkm-fg); }
+  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme]) .hkm-step-tabs .hkm-tab[aria-selected="true"] .hkm-step-hint { color: var(--hkm-muted); }
+  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab:focus-visible { outline-offset: -3px; }
+  .hkm-showcase.hkm-steps .hkm-step-number { color: var(--hkm-sc-muted); font: 500 0.8125rem/1.4 var(--hkm-mono); }
+  .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"] .hkm-step-number { color: var(--hkm-sc-fg); }
+  .hkm-showcase .hkm-step-copy { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
+  .hkm-showcase .hkm-step-label { overflow: hidden; font: inherit; text-overflow: ellipsis; }
+  .hkm-showcase .hkm-step-hint { display: none; color: var(--hkm-sc-muted); font-size: 0.875rem; line-height: 1.45; font-weight: 400; }
+  .hkm-showcase .hkm-step-descriptions { grid-area: descriptions; display: grid; padding: 12px 4px 0; }
+  .hkm-showcase .hkm-step-description { grid-area: 1 / 1; margin: 0; color: var(--hkm-sc-muted); font-size: 0.875rem; line-height: 1.5; }
+  .hkm-showcase .hkm-step-description:not([data-hkm-active]) { visibility: hidden; }
+  .hkm-showcase .hkm-step-panel:focus-visible { outline: 2px solid var(--hkm-accent); outline-offset: -4px; }
+  /* A strip too narrow for every label keeps the selected label and shows
+   * numbers for the rest; each label stays the tab's accessible name. */
+  .hkm-showcase.hkm-steps .hkm-step-tabs[data-hkm-compact] .hkm-tab:not([aria-selected="true"]) { flex: none; justify-content: center; padding-inline: 12px; }
+  .hkm-showcase.hkm-steps .hkm-step-tabs[data-hkm-compact] .hkm-tab:not([aria-selected="true"]) .hkm-step-copy { display: none; }
+  @container hkm-showcase (max-width: 519px) {
+    .hkm-showcase.hkm-steps .hkm-step-nav { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 4px; }
+    .hkm-showcase.hkm-steps .hkm-step-button { inline-size: 40px; min-inline-size: 40px; }
+    .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab { gap: 8px; padding-inline: 12px; font-size: 0.875rem; }
+  }
+  @container hkm-showcase (min-width: 720px) {
+    .hkm-showcase .hkm-step-layout { grid-template-columns: minmax(200px, 0.72fr) minmax(0, 1.6fr); grid-template-areas: "controls stage"; align-items: stretch; }
+    .hkm-showcase.hkm-steps .hkm-step-controls { margin-block-end: 0; margin-inline-end: -1px; }
+    .hkm-showcase.hkm-steps .hkm-step-stage { align-self: stretch; border-start-start-radius: 0; }
+    .hkm-showcase.hkm-steps .hkm-step-nav { grid-template-areas: "tabs tabs tabs" "back count next"; align-items: center; row-gap: 14px; column-gap: 6px; }
+    .hkm-showcase.hkm-steps .hkm-step-button { margin: 0; }
+    .hkm-showcase .hkm-step-count { display: block; }
+    .hkm-showcase.hkm-steps .hkm-step-tabs { flex-direction: column; gap: 2px; overflow: visible; }
+    .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab { display: grid; flex: none; grid-template-columns: 2.5ch minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px 16px; border: 1px solid transparent; border-inline-end: 0; border-radius: var(--hkm-step-tab-radius) 0 0 var(--hkm-step-tab-radius); white-space: normal; }
+    .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab[aria-selected="true"] { border-color: var(--hkm-sc-line); }
+    .hkm-showcase.hkm-steps .hkm-step-number { padding-block-start: 0.1rem; }
+    .hkm-showcase .hkm-step-label { overflow: visible; }
+    .hkm-showcase .hkm-step-hint { display: block; }
+    .hkm-showcase .hkm-step-descriptions { display: none; }
+  }
   .hkm-showcase.hkm-steps .hkm-step-announcement { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
   .hkm-showcase:is(.hkm-steps, .hkm-modes) .hkm-showcase-caption { margin-block-start: 1rem; }
 
@@ -2679,7 +2785,8 @@
 
     .hkm-showcase .hkm-tab[aria-selected="true"],
     .hkm-showcase .hkm-segmented button[aria-pressed="true"],
-    .hkm-showcase .hkm-tab[data-hkm-done] .hkm-step-number,
+    .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"],
+    .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab[aria-selected="true"],
     .hkm-root .hkm-popover-item[data-hkm-selected],
     .hkm-root .hkm-work-mark {
       forced-color-adjust: none;
@@ -2687,6 +2794,19 @@
       color: HighlightText;
     }
 
+    .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"] :is(.hkm-step-number, .hkm-step-hint) {
+      color: HighlightText;
+    }
+
+    /* Fill stages reserve their authored field for the live preview. Keep the
+     * selected tab in the system pair even when that fill rule is authored by
+     * a consumer layer with a stronger declaration. */
+    .hkm-showcase[data-hkm-fit="fill"].hkm-steps .hkm-tab[aria-selected="true"] {
+      forced-color-adjust: none;
+      background: Highlight !important;
+      color: HighlightText !important;
+    }
+
     .hkm-showcase .hkm-segmented button[aria-pressed="true"]:disabled {
       background: ButtonFace;
       color: GrayText;
@@ -2708,3 +2828,18 @@
     }
   }
 }
+
+/* Consumer layers and palette variable chains can add stronger declarations
+ * after the legacy component layer. Keep the system selection pair as the
+ * final forced-colors contract. */
+@media (forced-colors: active) {
+  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab[aria-selected="true"] {
+    forced-color-adjust: none;
+    background: Highlight !important;
+    color: HighlightText !important;
+  }
+
+  .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"] :is(.hkm-step-number, .hkm-step-hint) {
+    color: HighlightText !important;
+  }
+}

package/src/provider-marks.generated.ts

@@ -29,6 +29,10 @@ export const providerMarkAssets = {
     glyph: { viewBox: "0 0 24 24", body: "<path d=\"M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z\"></path>" },
     art: null,
   },
+  "apple": {
+    glyph: { viewBox: "0 0 24 24", body: "<path d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"/>" },
+    art: null,
+  },
   "beeper": {
     glyph: { viewBox: "62 47 114 143", body: "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M62.2222 87.1665C62.2222 65.2221 79.9305 47.1665 102.312 47.1665H135.466C157.607 47.1665 175.555 65.0257 175.555 87.1665C175.529 99.0909 170.321 109.363 163.073 116.194L155.477 123.764C166.539 130.217 175.464 140.342 175.464 154.072C175.464 174.631 158.797 189.389 138.238 189.389H82.2222V121.819C70.3819 114.91 62.2222 101.987 62.2222 87.1665ZM102.312 58.2776C86.1111 58.2776 73.3333 71.2984 73.3333 87.1665C73.3333 103.035 86.1111 116.055 102.312 116.055H116.115L108.437 154.875L155.269 108.286C160.634 103.286 164.444 95.7229 164.444 87.1665C164.444 71.0554 151.25 58.104 135.466 58.2776H102.312Z\" fill=\"currentColor\"/>" },
     art: { viewBox: "0 0 240 241", body: "<g clip-path=\"url(#clip0_2816_41661)\"> <rect width=\"240\" height=\"240\" transform=\"translate(0 0.5)\" fill=\"url(#paint0_linear_2816_41661)\"/> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M62.2222 87.1665C62.2222 65.2221 79.9305 47.1665 102.312 47.1665H135.466C157.607 47.1665 175.555 65.0257 175.555 87.1665C175.529 99.0909 170.321 109.363 163.073 116.194L155.477 123.764C166.539 130.217 175.464 140.342 175.464 154.072C175.464 174.631 158.797 189.389 138.238 189.389H82.2222V121.819C70.3819 114.91 62.2222 101.987 62.2222 87.1665ZM102.312 58.2776C86.1111 58.2776 73.3333 71.2984 73.3333 87.1665C73.3333 103.035 86.1111 116.055 102.312 116.055H116.115L108.437 154.875L155.269 108.286C160.634 103.286 164.444 95.7229 164.444 87.1665C164.444 71.0554 151.25 58.104 135.466 58.2776H102.312Z\" fill=\"white\"/> </g> <defs> <linearGradient id=\"paint0_linear_2816_41661\" x1=\"240\" y1=\"-20.4739\" x2=\"182.953\" y2=\"299.878\" gradientUnits=\"userSpaceOnUse\"> <stop stop-color=\"#6953F2\"/> <stop offset=\"1\" stop-color=\"#0C52F9\"/> <stop offset=\"1\" stop-color=\"#0C52F9\"/> </linearGradient> <clipPath id=\"clip0_2816_41661\"> <rect y=\"0.5\" width=\"240\" height=\"240\" rx=\"120\" fill=\"white\"/> </clipPath> </defs>" },
@@ -81,6 +85,10 @@ export const providerMarkAssets = {
     glyph: { viewBox: "0 0 24 24", body: "<path d=\"M5.285 0A5.273 5.273 0 0 0 0 5.285v13.43A5.273 5.273 0 0 0 5.285 24h13.43A5.273 5.273 0 0 0 24 18.715V5.285A5.273 5.273 0 0 0 18.715 0ZM12 4.154a8.809 7.337 0 0 1 8.809 7.338A8.809 7.337 0 0 1 12 18.828a8.809 7.337 0 0 1-2.492-.303A8.656 7.337 0 0 1 5.93 19.93a9.929 7.337 0 0 0 1.54-2.155 8.809 7.337 0 0 1-4.279-6.283A8.809 7.337 0 0 1 12 4.154\"/>" },
     art: null,
   },
+  "linkedin": {
+    glyph: { viewBox: "0 0 16 16", body: "<path d=\"M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z\"/>" },
+    art: null,
+  },
   "mem0": {
     glyph: { viewBox: "0 0 100 100", body: "<g fill=\"currentColor\" clip-path=\"url(#mem0-clip)\"><path d=\"M50.004 41.547a8.446 8.446 0 0 0-8.45 8.449 8.446 8.446 0 0 0 8.45 8.449 8.447 8.447 0 0 0 8.449-8.45 8.446 8.446 0 0 0-8.45-8.448m.042-16.531a2.513 2.513 0 0 0 2.463-2.553A2.486 2.486 0 0 0 49.955 20a2.486 2.486 0 0 0-2.462 2.553 2.486 2.486 0 0 0 2.552 2.463m-.089 49.963a2.486 2.486 0 0 0-2.463 2.552 2.486 2.486 0 0 0 2.552 2.463 2.513 2.513 0 0 0 2.463-2.552 2.486 2.486 0 0 0-2.553-2.463M32.372 32.3a2.513 2.513 0 0 0-.065-3.547 2.487 2.487 0 0 0-3.548.065 2.487 2.487 0 0 0 .065 3.548 2.487 2.487 0 0 0 3.548-.065m35.262 35.394a2.487 2.487 0 0 0 .065 3.548 2.487 2.487 0 0 0 3.548-.065 2.513 2.513 0 0 0-.065-3.548 2.487 2.487 0 0 0-3.548.065m.065-35.329c.98.944 2.572.946 3.548-.065a2.487 2.487 0 0 0-.065-3.548 2.487 2.487 0 0 0-3.548.065 2.487 2.487 0 0 0 .065 3.548M32.307 67.63a2.487 2.487 0 0 0-3.548.065 2.487 2.487 0 0 0 .065 3.548c.98.944 2.572.946 3.548-.065a2.487 2.487 0 0 0-.065-3.548m45.046-20.136a2.487 2.487 0 0 0-2.364 2.647 2.514 2.514 0 0 0 2.646 2.364 2.487 2.487 0 0 0 2.364-2.646 2.484 2.484 0 0 0-2.646-2.362zM22.65 52.501a2.487 2.487 0 0 0 2.365-2.646 2.485 2.485 0 0 0-2.646-2.362 2.487 2.487 0 0 0-2.365 2.646 2.515 2.515 0 0 0 2.646 2.364zm23.463-16.915a4.37 4.37 0 0 0 6.053 1.152c1.125-.765 1.819-2.005 1.904-3.403.062-.908.261-2.196 1.268-2.89 1.03-.655 2.293-.335 3.154-.04 1.32.467 2.732.313 3.875-.425a4.32 4.32 0 0 0 1.894-2.743 4.32 4.32 0 0 0-.597-3.28l-.174-.26a4.37 4.37 0 0 0-6.053-1.152c-1.126.764-1.82 2.003-1.904 3.402-.063.908-.262 2.196-1.269 2.89-1.029.655-2.293.335-3.154.04-1.317-.467-2.731-.313-3.874.425a4.36 4.36 0 0 0-1.3 6.022l.175.262zm-9.602 40.709a4.37 4.37 0 0 0 6.053 1.152c1.126-.765 1.82-2.005 1.904-3.403.063-.908.262-2.197 1.269-2.89 1.029-.655 2.292-.335 3.154-.04 1.32.467 2.731.313 3.874-.425a4.32 4.32 0 0 0 1.895-2.743 4.32 4.32 0 0 0-.597-3.28l-.175-.26a4.37 4.37 0 0 0-6.053-1.152c-1.125.764-1.819 2.003-1.904 3.401-.062.909-.261 2.197-1.268 2.89-1.03.656-2.293.336-3.154.041-1.318-.468-2.732-.313-3.875.425a4.36 4.36 0 0 0-1.3 6.022l.175.262zM57.42 37.048q-.08.434-.076.872a4.37 4.37 0 0 0 3.548 4.217c1.338.252 2.705-.137 3.75-1.067.686-.6 1.735-1.372 2.939-1.15 1.19.261 1.86 1.38 2.261 2.199.604 1.261 1.714 2.15 3.045 2.434a4.33 4.33 0 0 0 3.28-.604 4.32 4.32 0 0 0 1.892-2.745l.062-.309q.082-.435.076-.872a4.37 4.37 0 0 0-3.548-4.217c-1.337-.253-2.702.137-3.749 1.067-.687.6-1.738 1.371-2.94 1.15-1.19-.262-1.86-1.38-2.26-2.2-.605-1.26-1.714-2.149-3.043-2.433a4.36 4.36 0 0 0-5.172 3.349l-.062.309zm-35.539 22.05q-.08.435-.076.873a4.37 4.37 0 0 0 3.548 4.216c1.338.253 2.704-.136 3.75-1.067.686-.6 1.735-1.37 2.938-1.15 1.19.262 1.862 1.38 2.262 2.2.604 1.261 1.714 2.15 3.045 2.433A4.33 4.33 0 0 0 40.627 66a4.32 4.32 0 0 0 1.892-2.744l.063-.31q.081-.433.076-.871a4.37 4.37 0 0 0-3.548-4.217c-1.337-.253-2.702.136-3.749 1.067-.686.6-1.738 1.371-2.94 1.15-1.19-.262-1.86-1.38-2.26-2.2-.605-1.261-1.714-2.149-3.043-2.433a4.36 4.36 0 0 0-5.172 3.349l-.062.308zm42.525-13.01a4.5 4.5 0 0 0-.671.563 4.37 4.37 0 0 0-.472 5.49c.767 1.125 2.009 1.816 3.404 1.897.909.06 2.197.26 2.893 1.264.657 1.027.34 2.29.045 3.154-.466 1.32-.31 2.731.431 3.874a4.33 4.33 0 0 0 2.745 1.89 4.33 4.33 0 0 0 3.28-.601l.261-.175q.365-.25.671-.563a4.37 4.37 0 0 0 .472-5.49c-.767-1.123-2.006-1.816-3.404-1.897-.909-.06-2.2-.26-2.893-1.264-.657-1.026-.34-2.29-.044-3.154.465-1.32.308-2.731-.432-3.872a4.36 4.36 0 0 0-6.024-1.288l-.262.174zM23.687 36.55a4.5 4.5 0 0 0-.671.564 4.37 4.37 0 0 0-.472 5.49c.767 1.125 2.009 1.816 3.405 1.897.908.06 2.196.26 2.892 1.264.658 1.026.34 2.29.045 3.154-.465 1.32-.309 2.731.432 3.874a4.32 4.32 0 0 0 2.744 1.89 4.33 4.33 0 0 0 3.28-.601l.261-.175q.365-.25.672-.563a4.37 4.37 0 0 0 .472-5.49c-.768-1.123-2.007-1.816-3.405-1.897-.908-.06-2.2-.26-2.892-1.264-.658-1.027-.34-2.29-.045-3.154.465-1.32.308-2.731-.432-3.872a4.36 4.36 0 0 0-6.024-1.289l-.262.175zm39.268 20.868a4.4 4.4 0 0 0-.873-.076 4.37 4.37 0 0 0-4.217 3.548c-.252 1.338.137 2.705 1.067 3.75.6.686 1.372 1.735 1.15 2.939-.261 1.19-1.38 1.86-2.199 2.261-1.261.604-2.15 1.714-2.433 3.045a4.33 4.33 0 0 0 .603 3.28 4.32 4.32 0 0 0 2.745 1.892l.309.062q.435.082.872.076a4.37 4.37 0 0 0 4.217-3.547c.253-1.338-.136-2.703-1.067-3.75-.6-.686-1.371-1.738-1.15-2.94.262-1.19 1.38-1.86 2.2-2.26 1.26-.605 2.149-1.714 2.433-3.043a4.36 4.36 0 0 0-3.349-5.172l-.308-.062zM40.9 21.88a4.4 4.4 0 0 0-.872-.077 4.37 4.37 0 0 0-4.217 3.548c-.253 1.338.136 2.704 1.067 3.75.6.686 1.371 1.735 1.15 2.939-.262 1.19-1.38 1.86-2.2 2.261-1.26.604-2.149 1.714-2.433 3.045a4.33 4.33 0 0 0 .604 3.28 4.32 4.32 0 0 0 2.745 1.892l.308.062q.435.081.873.076a4.37 4.37 0 0 0 4.216-3.548c.253-1.337-.136-2.702-1.067-3.749-.6-.687-1.37-1.738-1.15-2.94.262-1.19 1.38-1.86 2.2-2.26 1.261-.605 2.15-1.714 2.433-3.043a4.36 4.36 0 0 0-3.348-5.172l-.31-.062z\"/></g><defs><clipPath id=\"mem0-clip\"><path fill=\"currentColor\" d=\"M20 20h60v59.998H20z\"/></clipPath></defs>" },
     art: { viewBox: "0 0 100 100", body: "<rect width=\"100\" height=\"100\" fill=\"#CBB2FF\" rx=\"12\"/><g fill=\"#09090B\" clip-path=\"url(#mem0-clip)\"><path d=\"M50.004 41.547a8.446 8.446 0 0 0-8.45 8.449 8.446 8.446 0 0 0 8.45 8.449 8.447 8.447 0 0 0 8.449-8.45 8.446 8.446 0 0 0-8.45-8.448m.042-16.531a2.513 2.513 0 0 0 2.463-2.553A2.486 2.486 0 0 0 49.955 20a2.486 2.486 0 0 0-2.462 2.553 2.486 2.486 0 0 0 2.552 2.463m-.089 49.963a2.486 2.486 0 0 0-2.463 2.552 2.486 2.486 0 0 0 2.552 2.463 2.513 2.513 0 0 0 2.463-2.552 2.486 2.486 0 0 0-2.553-2.463M32.372 32.3a2.513 2.513 0 0 0-.065-3.547 2.487 2.487 0 0 0-3.548.065 2.487 2.487 0 0 0 .065 3.548 2.487 2.487 0 0 0 3.548-.065m35.262 35.394a2.487 2.487 0 0 0 .065 3.548 2.487 2.487 0 0 0 3.548-.065 2.513 2.513 0 0 0-.065-3.548 2.487 2.487 0 0 0-3.548.065m.065-35.329c.98.944 2.572.946 3.548-.065a2.487 2.487 0 0 0-.065-3.548 2.487 2.487 0 0 0-3.548.065 2.487 2.487 0 0 0 .065 3.548M32.307 67.63a2.487 2.487 0 0 0-3.548.065 2.487 2.487 0 0 0 .065 3.548c.98.944 2.572.946 3.548-.065a2.487 2.487 0 0 0-.065-3.548m45.046-20.136a2.487 2.487 0 0 0-2.364 2.647 2.514 2.514 0 0 0 2.646 2.364 2.487 2.487 0 0 0 2.364-2.646 2.484 2.484 0 0 0-2.646-2.362zM22.65 52.501a2.487 2.487 0 0 0 2.365-2.646 2.485 2.485 0 0 0-2.646-2.362 2.487 2.487 0 0 0-2.365 2.646 2.515 2.515 0 0 0 2.646 2.364zm23.463-16.915a4.37 4.37 0 0 0 6.053 1.152c1.125-.765 1.819-2.005 1.904-3.403.062-.908.261-2.196 1.268-2.89 1.03-.655 2.293-.335 3.154-.04 1.32.467 2.732.313 3.875-.425a4.32 4.32 0 0 0 1.894-2.743 4.32 4.32 0 0 0-.597-3.28l-.174-.26a4.37 4.37 0 0 0-6.053-1.152c-1.126.764-1.82 2.003-1.904 3.402-.063.908-.262 2.196-1.269 2.89-1.029.655-2.293.335-3.154.04-1.317-.467-2.731-.313-3.874.425a4.36 4.36 0 0 0-1.3 6.022l.175.262zm-9.602 40.709a4.37 4.37 0 0 0 6.053 1.152c1.126-.765 1.82-2.005 1.904-3.403.063-.908.262-2.197 1.269-2.89 1.029-.655 2.292-.335 3.154-.04 1.32.467 2.731.313 3.874-.425a4.32 4.32 0 0 0 1.895-2.743 4.32 4.32 0 0 0-.597-3.28l-.175-.26a4.37 4.37 0 0 0-6.053-1.152c-1.125.764-1.819 2.003-1.904 3.401-.062.909-.261 2.197-1.268 2.89-1.03.656-2.293.336-3.154.041-1.318-.468-2.732-.313-3.875.425a4.36 4.36 0 0 0-1.3 6.022l.175.262zM57.42 37.048q-.08.434-.076.872a4.37 4.37 0 0 0 3.548 4.217c1.338.252 2.705-.137 3.75-1.067.686-.6 1.735-1.372 2.939-1.15 1.19.261 1.86 1.38 2.261 2.199.604 1.261 1.714 2.15 3.045 2.434a4.33 4.33 0 0 0 3.28-.604 4.32 4.32 0 0 0 1.892-2.745l.062-.309q.082-.435.076-.872a4.37 4.37 0 0 0-3.548-4.217c-1.337-.253-2.702.137-3.749 1.067-.687.6-1.738 1.371-2.94 1.15-1.19-.262-1.86-1.38-2.26-2.2-.605-1.26-1.714-2.149-3.043-2.433a4.36 4.36 0 0 0-5.172 3.349l-.062.309zm-35.539 22.05q-.08.435-.076.873a4.37 4.37 0 0 0 3.548 4.216c1.338.253 2.704-.136 3.75-1.067.686-.6 1.735-1.37 2.938-1.15 1.19.262 1.862 1.38 2.262 2.2.604 1.261 1.714 2.15 3.045 2.433A4.33 4.33 0 0 0 40.627 66a4.32 4.32 0 0 0 1.892-2.744l.063-.31q.081-.433.076-.871a4.37 4.37 0 0 0-3.548-4.217c-1.337-.253-2.702.136-3.749 1.067-.686.6-1.738 1.371-2.94 1.15-1.19-.262-1.86-1.38-2.26-2.2-.605-1.261-1.714-2.149-3.043-2.433a4.36 4.36 0 0 0-5.172 3.349l-.062.308zm42.525-13.01a4.5 4.5 0 0 0-.671.563 4.37 4.37 0 0 0-.472 5.49c.767 1.125 2.009 1.816 3.404 1.897.909.06 2.197.26 2.893 1.264.657 1.027.34 2.29.045 3.154-.466 1.32-.31 2.731.431 3.874a4.33 4.33 0 0 0 2.745 1.89 4.33 4.33 0 0 0 3.28-.601l.261-.175q.365-.25.671-.563a4.37 4.37 0 0 0 .472-5.49c-.767-1.123-2.006-1.816-3.404-1.897-.909-.06-2.2-.26-2.893-1.264-.657-1.026-.34-2.29-.044-3.154.465-1.32.308-2.731-.432-3.872a4.36 4.36 0 0 0-6.024-1.288l-.262.174zM23.687 36.55a4.5 4.5 0 0 0-.671.564 4.37 4.37 0 0 0-.472 5.49c.767 1.125 2.009 1.816 3.405 1.897.908.06 2.196.26 2.892 1.264.658 1.026.34 2.29.045 3.154-.465 1.32-.309 2.731.432 3.874a4.32 4.32 0 0 0 2.744 1.89 4.33 4.33 0 0 0 3.28-.601l.261-.175q.365-.25.672-.563a4.37 4.37 0 0 0 .472-5.49c-.768-1.123-2.007-1.816-3.405-1.897-.908-.06-2.2-.26-2.892-1.264-.658-1.027-.34-2.29-.045-3.154.465-1.32.308-2.731-.432-3.872a4.36 4.36 0 0 0-6.024-1.289l-.262.175zm39.268 20.868a4.4 4.4 0 0 0-.873-.076 4.37 4.37 0 0 0-4.217 3.548c-.252 1.338.137 2.705 1.067 3.75.6.686 1.372 1.735 1.15 2.939-.261 1.19-1.38 1.86-2.199 2.261-1.261.604-2.15 1.714-2.433 3.045a4.33 4.33 0 0 0 .603 3.28 4.32 4.32 0 0 0 2.745 1.892l.309.062q.435.082.872.076a4.37 4.37 0 0 0 4.217-3.547c.253-1.338-.136-2.703-1.067-3.75-.6-.686-1.371-1.738-1.15-2.94.262-1.19 1.38-1.86 2.2-2.26 1.26-.605 2.149-1.714 2.433-3.043a4.36 4.36 0 0 0-3.349-5.172l-.308-.062zM40.9 21.88a4.4 4.4 0 0 0-.872-.077 4.37 4.37 0 0 0-4.217 3.548c-.253 1.338.136 2.704 1.067 3.75.6.686 1.371 1.735 1.15 2.939-.262 1.19-1.38 1.86-2.2 2.261-1.26.604-2.149 1.714-2.433 3.045a4.33 4.33 0 0 0 .604 3.28 4.32 4.32 0 0 0 2.745 1.892l.308.062q.435.081.873.076a4.37 4.37 0 0 0 4.216-3.548c.253-1.337-.136-2.702-1.067-3.749-.6-.687-1.37-1.738-1.15-2.94.262-1.19 1.38-1.86 2.2-2.26 1.261-.605 2.15-1.714 2.433-3.043a4.36 4.36 0 0 0-3.348-5.172l-.31-.062z\"/></g><defs><clipPath id=\"mem0-clip\"><path fill=\"#fff\" d=\"M20 20h60v59.998H20z\"/></clipPath></defs>" },

package/src/provider-marks.ts

@@ -31,6 +31,7 @@ const MARK_SPECS = {
   alibabacloud: { accent: "#ff6a00", aliases: ["alibaba", "alibaba cloud"], kind: "vendor", name: "Alibaba Cloud" },
   amp: { accent: "#f34e3f", aliases: ["amp"], kind: "agent", name: "Amp" },
   anthropic: { accent: "#d97757", aliases: ["anthropic"], kind: "vendor", name: "Anthropic" },
+  apple: { accent: "#000000", aliases: ["apple", "apple contacts", "macos contacts"], kind: "vendor", name: "Apple" },
   beeper: { accent: "#6953f2", aliases: ["beeper", "beeper chat"], kind: "vendor", name: "Beeper" },
   claude: { accent: "#d97757", aliases: ["claude"], kind: "vendor", name: "Claude" },
   claudecode: { accent: "#d97757", aliases: ["claude code", "claude-code"], kind: "agent", name: "Claude Code" },
@@ -44,6 +45,7 @@ const MARK_SPECS = {
   githubcopilot: { accent: "#1f2328", aliases: ["github copilot", "github-copilot", "copilot"], kind: "agent", name: "GitHub Copilot" },
   goose: { accent: "#0e7c86", aliases: ["goose", "block goose"], kind: "agent", name: "Goose" },
   imessage: { accent: "#34da50", aliases: ["imessage", "apple messages"], kind: "vendor", name: "iMessage" },
+  linkedin: { accent: "#0a66c2", aliases: ["linkedin", "linked in", "linkedin export"], kind: "vendor", name: "LinkedIn" },
   mem0: { accent: "#cbb2ff", aliases: ["mem0", "memzero"], kind: "vendor", name: "Mem0" },
   meta: { accent: "#0082fb", aliases: ["meta", "meta ai", "llama"], kind: "vendor", name: "Meta" },
   mistral: { accent: "#fa500f", aliases: ["mistral", "mistral ai"], kind: "vendor", name: "Mistral" },

package/src/react/design-gallery.tsx

@@ -22,6 +22,9 @@ import {
 import { Chart01Icon, CodeIcon, DashboardSquare01Icon } from "@hugeicons/core-free-icons";
 import { useState } from "react";
 
+import { BrowserFrame, SampleText } from "../mockups/index.js";
+import { StepThrough } from "../mockups/client.js";
+
 import { AnimatedRailStage } from "./animated-rail-stage.js";
 import { AgentCommandTabs, AgentSetupPrompt } from "./agent-setup-prompt.js";
 import { AppShell } from "./app-shell.js";
@@ -127,6 +130,7 @@ export const designGalleryRecipeCoverage = [
   "platform install commands",
   "production preview notice",
   "relative time",
+  "responsive product walkthroughs",
   "status pages",
   "syntax highlighting",
 ] as const;
@@ -167,6 +171,29 @@ const foilDeckExamples = [
   { label: "Facet frame", ornament: "facets", preset: "max" },
 ] as const;
 
+/** The example illustrates job state without exposing implementation commands. */
+function GalleryJobPreview({ state }: Readonly<{ state: "ready" | "running" | "saved" }>) {
+  const completed = state === "saved";
+  return (
+    <BrowserFrame describe={`A conceptual job interface shows a weekly report ${state === "ready" ? "ready to run" : state === "running" ? "being prepared" : "saved beside its source"}.`} url="relay.example/jobs/weekly-report">
+      <div className="design-gallery__walkthrough-preview">
+        <p className="design-gallery__walkthrough-context">WORKSPACE / JOBS</p>
+        <p className="design-gallery__walkthrough-title"><SampleText>Weekly report</SampleText><span className="design-gallery__walkthrough-state">{state === "ready" ? "Ready" : completed ? "Saved" : "Running"}</span></p>
+        <dl className="design-gallery__walkthrough-facts">
+          <div><dt>Source</dt><dd><SampleText>orders.csv</SampleText></dd></div>
+          <div><dt>Run</dt><dd><SampleText>{state === "ready" ? "On demand" : "run-042"}</SampleText></dd></div>
+        </dl>
+        <ol className="design-gallery__walkthrough-checks">
+          <li><span>Check input</span><span>{state === "ready" ? "Waiting" : "Complete"}</span></li>
+          <li><span>Build report</span><span>{state === "ready" ? "Waiting" : completed ? "Complete" : "In progress"}</span></li>
+          <li><span>Save output</span><span>{completed ? "Complete" : "Waiting"}</span></li>
+        </ol>
+        <div className="design-gallery__walkthrough-result"><span>{completed ? "Saved report" : "Output"}</span><strong><SampleText>{completed ? "weekly-report.md" : "Weekly report"}</SampleText></strong><span>{completed ? "12 sections · Source attached" : "Available after the run finishes"}</span></div>
+      </div>
+    </BrowserFrame>
+  );
+}
+
 /** Product-neutral executable reference for the public composition layer. */
 export function DesignSystemGallery({
   isNestedInMain = false,
@@ -420,6 +447,13 @@ export function DesignSystemGallery({
               { command: "codex mcp add relay -- relay serve", id: "codex", label: "Codex", mark: "codex" },
             ]} label="Relay agent commands" />
           </MarketingSection>
+          <MarketingSection heading="Show the result at each step." headingId="gallery-walkthrough" headingLevel={3} label="Walkthrough" summary="Use short labels and visible explanations beside a compact illustration of what changes.">
+            <StepThrough fit="fill" label="Run a Relay job" steps={[
+              { id: "choose", label: "Choose a job", hint: "Pick a saved job and review the file it reads before starting the run.", render: () => <GalleryJobPreview state="ready" /> },
+              { id: "run", label: "Watch the run", hint: "See the input check, transformation, and saved output as separate stages.", render: () => <GalleryJobPreview state="running" /> },
+              { id: "inspect", label: "Read the result", hint: "Open the saved report with the run ID and source file beside it.", render: () => <GalleryJobPreview state="saved" /> },
+            ]} />
+          </MarketingSection>
           <MarketingPrimitives
             columns={3}
             heading="Three objects cover most work."

package/src/styles.css

@@ -19,5 +19,6 @@
 @import "./product-marketing.css";
 @import "./product-marketing-foundation.css";
 @import "./design-gallery.css";
+@import "./mockups.css";
 @import "./palette-bridge.css";
 @import "./lantern-material.css";

package/vendor/provider-marks/BOOTSTRAP-ICONS-LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-2024 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/vendor/provider-marks/UPSTREAM.md

@@ -47,6 +47,20 @@ it, and the `-color` artwork carries the vendor's brand fills.
   The downloaded package was checked against its npm SHA-512 integrity value
   `vo7/gojtNbh+dzKx6TGriI26O8MDn2MYUJUU4hKso6mTK1tFWl1OFPIg+D2BiAvXdyAy4z+gk/K1NvpYxh9D1A==`.
   Product names and marks remain the property of their respective owners.
+- `simple-icons/apple.svg`: the unmodified `icons/apple.svg` file from the
+  same `simple-icons` **15.20.0** package and integrity value above, under
+  the same CC0-1.0 license. Its icon metadata cites
+  [apple.com](https://www.apple.com) as the source, with brand color
+  `#000000`. It identifies Apple sources such as Apple Contacts.
+- `bootstrap-icons/linkedin.svg`: the unmodified `icons/linkedin.svg` file
+  from `bootstrap-icons` **1.13.1** (upstream `twbs/icons`, tag `v1.13.1`,
+  commit `ce0e49dd063243118a115f17ad1fe1fe7576d552`). Simple Icons no longer
+  publishes a LinkedIn mark. The downloaded package was checked against its
+  npm SHA-512 integrity value
+  `ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==`.
+  The complete MIT license is retained in `BOOTSTRAP-ICONS-LICENSE`. The tile
+  accent `#0A66C2` is LinkedIn's published brand blue. LinkedIn and its mark
+  remain the property of LinkedIn Corporation.
 - `beeper.svg`: Beeper's official adaptive icon from `beeper/static` at commit
   `7437e04747d7acd64db81c5bf78ef82efbaf45e8`,
   [`brand/Beeper_Adaptive_Icon_108dp.svg`](https://github.com/beeper/static/blob/7437e04747d7acd64db81c5bf78ef82efbaf45e8/brand/Beeper_Adaptive_Icon_108dp.svg),

package/vendor/provider-marks/bootstrap-icons/linkedin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
+  <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
+</svg>

package/vendor/provider-marks/simple-icons/apple.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apple</title><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>