@pure-ds/storybook 0.7.26 → 0.7.29

package/.storybook/addons/html-preview/Panel.jsx

@@ -109,13 +109,15 @@ const CheckIcon = () => (
 );
 
 export const Panel = ({ active }) => {
-  const [source, setSource] = useState({ markup: '', forms: [], omniboxes: [], treeviews: [], fabs: [] });
+  const [source, setSource] = useState({ markup: '', forms: [], omniboxes: [], treeviews: [], tags: [], fabs: [], pdsApiCalls: [] });
   const [copied, setCopied] = useState(false);
   const [highlightedMarkup, setHighlightedMarkup] = useState('');
   const [highlightedforms, setHighlightedforms] = useState([]);
   const [highlightedOmniboxes, setHighlightedOmniboxes] = useState([]);
   const [highlightedTreeviews, setHighlightedTreeviews] = useState([]);
+  const [highlightedTags, setHighlightedTags] = useState([]);
   const [highlightedFabs, setHighlightedFabs] = useState([]);
+  const [highlightedPdsApiCalls, setHighlightedPdsApiCalls] = useState([]);
   const shikiRef = useRef(null);
   
   // Get Storybook theme to detect light/dark mode
@@ -302,10 +304,79 @@ export const Panel = ({ active }) => {
     processTreeviews();
   }, [source.treeviews, shikiTheme]);
 
+  // Highlight tags options when source or theme changes
+  useEffect(() => {
+    if (!source.tags || source.tags.length === 0) {
+      setHighlightedTags([]);
+      return;
+    }
+
+    const highlightCode = async (code) => {
+      if (!code) return '';
+      const highlighter = shikiRef.current || await loadShiki();
+      if (highlighter) {
+        try {
+          return highlighter.codeToHtml(code, { lang: 'javascript', theme: shikiTheme });
+        } catch (err) {
+          return `<pre><code>${escapeHtml(code)}</code></pre>`;
+        }
+      }
+      return `<pre><code>${escapeHtml(code)}</code></pre>`;
+    };
+
+    const processTags = async () => {
+      const highlighted = await Promise.all(
+        source.tags.map(async (tagEntry, index) => ({
+          id: tagEntry.id ?? index,
+          label: tagEntry.label,
+          options: await highlightCode(tagEntry.options)
+        }))
+      );
+      setHighlightedTags(highlighted);
+    };
+
+    processTags();
+  }, [source.tags, shikiTheme]);
+
+  // Highlight PDS API snippets when source or theme changes
+  useEffect(() => {
+    if (!source.pdsApiCalls || source.pdsApiCalls.length === 0) {
+      setHighlightedPdsApiCalls([]);
+      return;
+    }
+
+    const highlightCode = async (code) => {
+      if (!code) return '';
+      const highlighter = shikiRef.current || await loadShiki();
+      if (highlighter) {
+        try {
+          return highlighter.codeToHtml(code, { lang: 'javascript', theme: shikiTheme });
+        } catch (err) {
+          return `<pre><code>${escapeHtml(code)}</code></pre>`;
+        }
+      }
+      return `<pre><code>${escapeHtml(code)}</code></pre>`;
+    };
+
+    const processPdsApiCalls = async () => {
+      const highlighted = await Promise.all(
+        source.pdsApiCalls.map(async (call, index) => ({
+          id: call.id ?? index,
+          heading: call.heading,
+          label: call.label,
+          code: await highlightCode(call.code)
+        }))
+      );
+      setHighlightedPdsApiCalls(highlighted);
+    };
+
+    processPdsApiCalls();
+  }, [source.pdsApiCalls, shikiTheme]);
+
   useChannel({
     [EVENTS.UPDATE_HTML]: (payload) => {
       if (typeof payload === 'string') {
-        setSource({ markup: payload || '', forms: [], omniboxes: [], treeviews: [], fabs: [] });
+        setSource({ markup: payload || '', forms: [], omniboxes: [], treeviews: [], tags: [], fabs: [], pdsApiCalls: [] });
         return;
       }
 
@@ -315,18 +386,20 @@ export const Panel = ({ active }) => {
           forms: Array.isArray(payload.forms) ? payload.forms : [],
           omniboxes: Array.isArray(payload.omniboxes) ? payload.omniboxes : [],
           treeviews: Array.isArray(payload.treeviews) ? payload.treeviews : [],
-          fabs: Array.isArray(payload.fabs) ? payload.fabs : []
+          tags: Array.isArray(payload.tags) ? payload.tags : [],
+          fabs: Array.isArray(payload.fabs) ? payload.fabs : [],
+          pdsApiCalls: Array.isArray(payload.pdsApiCalls) ? payload.pdsApiCalls : []
         });
         return;
       }
 
-      setSource({ markup: '', forms: [], omniboxes: [], treeviews: [], fabs: [] });
+      setSource({ markup: '', forms: [], omniboxes: [], treeviews: [], tags: [], fabs: [], pdsApiCalls: [] });
     }
   });
 
   // Request HTML update when panel becomes active
   React.useEffect(() => {
-    if (active && !source.markup && source.forms.length === 0 && source.omniboxes.length === 0 && source.treeviews.length === 0 && source.fabs.length === 0) {
+    if (active && !source.markup && source.forms.length === 0 && source.omniboxes.length === 0 && source.treeviews.length === 0 && source.tags.length === 0 && source.fabs.length === 0 && source.pdsApiCalls.length === 0) {
       // Trigger a re-extraction by emitting a request event
       // The decorator will pick this up on the next render cycle
       const container = document.querySelector('#storybook-root');
@@ -338,7 +411,7 @@ export const Panel = ({ active }) => {
         }, 100);
       }
     }
-  }, [active, source.markup, source.forms.length, source.omniboxes.length, source.treeviews.length, source.fabs.length]);
+  }, [active, source.markup, source.forms.length, source.omniboxes.length, source.treeviews.length, source.tags.length, source.fabs.length, source.pdsApiCalls.length]);
 
   const copyToClipboard = useCallback(async () => {
     try {
@@ -355,9 +428,11 @@ export const Panel = ({ active }) => {
   const hasforms = source.forms.length > 0;
   const hasOmniboxes = source.omniboxes.length > 0;
   const hasTreeviews = source.treeviews.length > 0;
+  const hasTags = source.tags.length > 0;
   const hasFabs = source.fabs.length > 0;
+  const hasPdsApiCalls = source.pdsApiCalls.length > 0;
 
-  if (!hasMarkup && !hasforms && !hasOmniboxes && !hasTreeviews && !hasFabs) {
+  if (!hasMarkup && !hasforms && !hasOmniboxes && !hasTreeviews && !hasTags && !hasFabs && !hasPdsApiCalls) {
     return (
       <Container>
         <EmptyState>
@@ -498,6 +573,52 @@ export const Panel = ({ active }) => {
         );
       })}
 
+      {hasTags && source.tags.map((sourceTags, index) => {
+        const key = sourceTags.id ?? index;
+        const highlightedTag = highlightedTags[index];
+        const heading = source.tags.length > 1 ? (sourceTags.label || `Tags ${index + 1}`) : 'pds-tags';
+
+        return (
+          <SectionWrapper key={key}>
+            <SectionHeading>{heading}</SectionHeading>
+
+            {sourceTags.options && (
+              <>
+                <Subheading>options</Subheading>
+                <CodeBlock
+                  $compact
+                  dangerouslySetInnerHTML={{
+                    __html: highlightedTag?.options || `<pre><code>${escapeHtml(sourceTags.options)}</code></pre>`
+                  }}
+                />
+              </>
+            )}
+          </SectionWrapper>
+        );
+      })}
+
+      {hasPdsApiCalls && source.pdsApiCalls.map((sourceCall, index) => {
+        const key = sourceCall.id ?? index;
+        const highlightedCall = highlightedPdsApiCalls[index];
+        const heading = sourceCall.heading || 'PDS API';
+
+        return (
+          <SectionWrapper key={key}>
+            <SectionHeading>{heading}</SectionHeading>
+
+            {sourceCall.label && <Subheading>{sourceCall.label}</Subheading>}
+            {sourceCall.code && (
+              <CodeBlock
+                $compact
+                dangerouslySetInnerHTML={{
+                  __html: highlightedCall?.code || `<pre><code>${escapeHtml(sourceCall.code)}</code></pre>`
+                }}
+              />
+            )}
+          </SectionWrapper>
+        );
+      })}
+
 
       {hasMarkup && (
         <CopyButton

package/.storybook/addons/html-preview/preview.js

@@ -157,6 +157,48 @@ function serializeForDisplay(value) {
   }
 }
 
+function collectPdsApiCalls(container) {
+  if (!container) return [];
+
+  const nodes = Array.from(container.querySelectorAll('*'));
+
+  return nodes
+    .map((element, index) => {
+      const source =
+        element.pdsCodeSource ||
+        element.pdsSource ||
+        element.dataset?.pdsCodeSource ||
+        element.getAttribute?.('data-pds-code-source') ||
+        '';
+
+      if (!source || typeof source !== 'string' || !source.trim()) {
+        return null;
+      }
+
+      const heading =
+        element.pdsCodeHeading ||
+        element.pdsHeading ||
+        element.dataset?.pdsCodeHeading ||
+        element.getAttribute?.('data-pds-code-heading') ||
+        'PDS API';
+
+      const label =
+        element.pdsCodeLabel ||
+        element.pdsLabel ||
+        element.dataset?.pdsCodeLabel ||
+        element.getAttribute?.('data-pds-code-label') ||
+        null;
+
+      return {
+        id: index,
+        heading,
+        label,
+        code: source,
+      };
+    })
+    .filter(Boolean);
+}
+
 /**
  * Generate realistic source code for pds-form elements
  */
@@ -273,6 +315,39 @@ function generatePdsTreeviewMarkup(treeviewElement) {
   return `<pds-treeview${formattedAttrs}></pds-treeview>`;
 }
 
+/**
+ * Generate realistic source code for pds-tags elements
+ */
+function generatePdsTagsMarkup(tagsElement) {
+  const attrs = [];
+
+  const stringAttrs = ['name', 'placeholder', 'value'];
+  stringAttrs.forEach((attr) => {
+    const value = tagsElement.getAttribute(attr);
+    if (value !== null && value !== undefined && value !== '') {
+      attrs.push(`${attr}="${value}"`);
+    }
+  });
+
+  if (tagsElement.hasAttribute('required')) {
+    attrs.push('required');
+  }
+
+  if (tagsElement.hasAttribute('disabled')) {
+    attrs.push('disabled');
+  }
+
+  if (tagsElement.options || tagsElement.settings) {
+    attrs.push('.options=${options}');
+  }
+
+  const formattedAttrs = attrs.length > 0
+    ? '\n  ' + attrs.join('\n  ') + '\n'
+    : '';
+
+  return `<pds-tags${formattedAttrs}></pds-tags>`;
+}
+
 /**
  * Generate realistic source code for pds-fab elements
  */
@@ -320,15 +395,17 @@ export const withHTMLExtractor = (storyFn, context) => {
     // Try to get HTML from the story container
     const container = document.querySelector('#storybook-root');
     if (container) {
-      // Check if this story has pds-form, pds-omnibox, pds-treeview, or pds-fab elements
+      // Check if this story has pds-form, pds-omnibox, pds-treeview, pds-tags, or pds-fab elements
       const pdsFormElements = Array.from(container.querySelectorAll('pds-form'));
       const pdsOmniboxElements = Array.from(container.querySelectorAll('pds-omnibox'));
       const pdsTreeviewElements = Array.from(container.querySelectorAll('pds-treeview'));
+      const pdsTagsElements = Array.from(container.querySelectorAll('pds-tags'));
       const pdsFabElements = Array.from(container.querySelectorAll('pds-fab'));
       const hasSpecialElements =
         pdsFormElements.length > 0 ||
         pdsOmniboxElements.length > 0 ||
         pdsTreeviewElements.length > 0 ||
+        pdsTagsElements.length > 0 ||
         pdsFabElements.length > 0;
 
       if (hasSpecialElements) {
@@ -360,6 +437,11 @@ export const withHTMLExtractor = (storyFn, context) => {
           markup += generatePdsTreeviewMarkup(treeview);
         });
 
+        // Add pds-tags markup
+        pdsTagsElements.forEach(tags => {
+          markup += generatePdsTagsMarkup(tags);
+        });
+
         // Add pds-fab markup
         pdsFabElements.forEach(fab => {
           markup += generatePdsFabMarkup(fab);
@@ -442,6 +524,30 @@ export const withHTMLExtractor = (storyFn, context) => {
           };
         });
 
+      const tags = pdsTagsElements
+        .map((tagElement, index) => {
+          const label =
+            tagElement.getAttribute?.('id') ||
+            tagElement.getAttribute?.('name') ||
+            (pdsTagsElements.length > 1 ? `Tags ${index + 1}` : 'Tags');
+
+          const optionsSource =
+            tagElement.getAttribute?.('data-options-source') ||
+            tagElement.dataset?.optionsSource ||
+            null;
+
+          const options =
+            optionsSource ||
+            serializeForDisplay(tagElement.options || tagElement.settings) ||
+            'const options = [];';
+
+          return {
+            id: index,
+            label,
+            options
+          };
+        });
+
       const fabs = pdsFabElements
         .map((fab, index) => {
           const label =
@@ -463,12 +569,16 @@ export const withHTMLExtractor = (storyFn, context) => {
         })
         .filter((entry) => entry.satellites);
 
+      const pdsApiCalls = collectPdsApiCalls(container);
+
       channel.emit(EVENTS.UPDATE_HTML, {
         markup: html || '',
         forms,
         omniboxes,
         treeviews,
-        fabs
+        tags,
+        fabs,
+        pdsApiCalls
       });
     }
   };

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-03-03T15:26:02.592Z",
+  "generatedAt": "2026-03-04T16:38:26.456Z",
   "sources": {
     "customElements": "custom-elements.json",
     "ontology": "src\\js\\pds-core\\pds-ontology.js",
@@ -2593,7 +2593,7 @@
           "attribute": null,
           "description": null,
           "type": null,
-          "default": "`\r\n      <style>\r\n        :host {\r\n          --rating-star-size: var(--spacing-lg);\r\n          --rating-star-gap: var(--spacing-2xs);\r\n          --rating-star-off: var(--color-text-muted);\r\n          --rating-star-on: var(--color-warning-500);\r\n          --rating-focus: var(--color-primary-500);\r\n          --rating-fill-pct: 0%;\r\n          display: inline-block;\r\n          inline-size: fit-content;\r\n          max-inline-size: 100%;\r\n          touch-action: none;\r\n        }\r\n\r\n        ::slotted(input[type=\"range\"]) {\r\n          position: absolute !important;\r\n          inset-inline-start: 0 !important;\r\n          inset-block-start: 0 !important;\r\n          inline-size: 1px !important;\r\n          block-size: 1px !important;\r\n          min-inline-size: 1px !important;\r\n          min-block-size: 1px !important;\r\n          margin: -1px !important;\r\n          border: 0 !important;\r\n          padding: 0 !important;\r\n          opacity: 0 !important;\r\n          overflow: hidden !important;\r\n          clip: rect(0 0 0 0) !important;\r\n          clip-path: inset(50%) !important;\r\n          white-space: nowrap !important;\r\n          appearance: none !important;\r\n          -webkit-appearance: none !important;\r\n          pointer-events: none !important;\r\n        }\r\n\r\n        .wrap {\r\n          position: relative;\r\n          display: inline-grid;\r\n          gap: var(--spacing-2xs);\r\n          align-items: center;\r\n          justify-items: start;\r\n          min-block-size: calc(var(--rating-star-size) + var(--spacing-xs));\r\n        }\r\n\r\n        .interactive {\r\n          display: inline-grid;\r\n          place-items: center start;\r\n          inline-size: 100%;\r\n          cursor: pointer;\r\n          user-select: none;\r\n          -webkit-tap-highlight-color: transparent;\r\n          touch-action: pan-x;\r\n        }\r\n\r\n        :host([disabled]) .interactive,\r\n        :host([readonly]) .interactive {\r\n          cursor: default;\r\n        }\r\n\r\n        :host([disabled]) {\r\n          opacity: 0.5;\r\n        }\r\n\r\n        .stars {\r\n          display: block;\r\n          inline-size: auto;\r\n          block-size: var(--rating-star-size);\r\n          overflow: visible;\r\n          transition: transform 220ms ease, opacity 220ms ease;\r\n        }\r\n\r\n        :host([data-in-view=\"false\"]) .stars {\r\n          opacity: 0;\r\n          transform: translateY(var(--spacing-xs)) scale(0.98);\r\n        }\r\n\r\n        :host([data-in-view=\"true\"]) .stars {\r\n          opacity: 1;\r\n          transform: translateY(0) scale(1);\r\n        }\r\n\r\n        input[type=\"range\"] {\r\n          position: absolute !important;\r\n          inset-inline-start: 0 !important;\r\n          inset-block-start: 0 !important;\r\n          inline-size: 1px !important;\r\n          block-size: 1px !important;\r\n          min-inline-size: 1px !important;\r\n          min-block-size: 1px !important;\r\n          margin: -1px !important;\r\n          border: 0 !important;\r\n          padding: 0 !important;\r\n          opacity: 0 !important;\r\n          overflow: hidden !important;\r\n          clip: rect(0 0 0 0) !important;\r\n          clip-path: inset(50%) !important;\r\n          white-space: nowrap !important;\r\n          appearance: none !important;\r\n          -webkit-appearance: none !important;\r\n          pointer-events: none !important;\r\n        }\r\n\r\n        :host(:focus-within) .interactive {\r\n          outline: 2px solid var(--rating-focus);\r\n          outline-offset: var(--spacing-3xs);\r\n          border-radius: var(--radius-sm);\r\n        }\r\n\r\n        @media (prefers-reduced-motion: reduce) {\r\n          .stars {\r\n            transition: none;\r\n          }\r\n        }\r\n      </style>\r\n\r\n      <div class=\"wrap\" part=\"control\">\r\n        <div class=\"interactive\" part=\"interactive\" aria-hidden=\"true\">\r\n          <svg class=\"stars\" part=\"stars\" focusable=\"false\" aria-hidden=\"true\"></svg>\r\n        </div>\r\n        <slot></slot>\r\n      </div>\r\n    `",
+          "default": "`\r\n      <style>\r\n        :host {\r\n          --rating-star-size: var(--spacing-lg);\r\n          --rating-star-gap: var(--spacing-2xs);\r\n          --rating-star-off: var(--color-text-muted);\r\n          --rating-star-on: var(--color-warning-500);\r\n          --rating-focus: var(--color-primary-500);\r\n          --rating-fill-pct: 0%;\r\n          display: inline-block;\r\n          inline-size: fit-content;\r\n          max-inline-size: 100%;\r\n          touch-action: none;\r\n        }\r\n\r\n        .wrap {\r\n          position: relative;\r\n          display: inline-grid;\r\n          gap: var(--spacing-2xs);\r\n          align-items: center;\r\n          justify-items: start;\r\n          min-block-size: calc(var(--rating-star-size) + var(--spacing-xs));\r\n        }\r\n\r\n        .interactive {\r\n          display: inline-grid;\r\n          place-items: center start;\r\n          inline-size: 100%;\r\n          cursor: pointer;\r\n          user-select: none;\r\n          -webkit-tap-highlight-color: transparent;\r\n          touch-action: pan-x;\r\n        }\r\n\r\n        :host([disabled]) .interactive,\r\n        :host([readonly]) .interactive {\r\n          cursor: default;\r\n        }\r\n\r\n        :host([disabled]) {\r\n          opacity: 0.5;\r\n        }\r\n\r\n        .stars {\r\n          display: block;\r\n          inline-size: auto;\r\n          block-size: var(--rating-star-size);\r\n          overflow: visible;\r\n          transition: transform 220ms ease, opacity 220ms ease;\r\n        }\r\n\r\n        :host([data-in-view=\"false\"]) .stars {\r\n          opacity: 0;\r\n          transform: translateY(var(--spacing-xs)) scale(0.98);\r\n        }\r\n\r\n        :host([data-in-view=\"true\"]) .stars {\r\n          opacity: 1;\r\n          transform: translateY(0) scale(1);\r\n        }\r\n\r\n        input[type=\"range\"] {\r\n          position: absolute !important;\r\n          inset-inline-start: 0 !important;\r\n          inset-block-start: 0 !important;\r\n          inline-size: 1px !important;\r\n          block-size: 1px !important;\r\n          min-inline-size: 1px !important;\r\n          min-block-size: 1px !important;\r\n          margin: -1px !important;\r\n          border: 0 !important;\r\n          padding: 0 !important;\r\n          opacity: 0 !important;\r\n          overflow: hidden !important;\r\n          clip: rect(0 0 0 0) !important;\r\n          clip-path: inset(50%) !important;\r\n          white-space: nowrap !important;\r\n          appearance: none !important;\r\n          -webkit-appearance: none !important;\r\n          pointer-events: none !important;\r\n        }\r\n\r\n        :host(:focus-within) .interactive {\r\n          outline: 2px solid var(--rating-focus);\r\n          outline-offset: var(--spacing-3xs);\r\n          border-radius: var(--radius-sm);\r\n        }\r\n\r\n        @media (prefers-reduced-motion: reduce) {\r\n          .stars {\r\n            transition: none;\r\n          }\r\n        }\r\n      </style>\r\n\r\n      <div class=\"wrap\" part=\"control\">\r\n        <div class=\"interactive\" part=\"interactive\" aria-hidden=\"true\">\r\n          <svg class=\"stars\" part=\"stars\" focusable=\"false\" aria-hidden=\"true\"></svg>\r\n        </div>\r\n        <input class=\"native-input\" type=\"range\" />\r\n      </div>\r\n    `",
           "reflects": false,
           "privacy": "public"
         },
@@ -3522,6 +3522,200 @@
       ],
       "notes": []
     },
+    "pds-tags": {
+      "tag": "pds-tags",
+      "className": "PdsTags",
+      "displayName": "pds-tags",
+      "storyTitle": "Components/pds-tags",
+      "category": "Components",
+      "description": "Form-associated multi-select tags control built on top of `pds-omnibox`.\r\n\r\nUsers select suggestions from the omnibox and each selection is rendered as a removable\r\nchip. The component keeps selection state synchronized across:\r\n- the `value` attribute (comma-separated ids)\r\n- the `value` property (`string[]`)\r\n- form value via ElementInternals\r\n\r\nThe `options` object uses the same structure as `pds-omnibox.settings`.\r\nSee `pds-omnibox` JSDoc for the full options schema.\r\nBefore applying it, the component deep-merges internal defaults:\r\n- `hideCategory: true`\r\n- `itemGrid: \"0 1fr 0\"`\r\n- `iconHandler: () => \"\"`\r\n\r\nWhen `required` is set, at least one selected value is required for validity.",
+      "docsDescription": "Compound multi-select built with pds-omnibox. Select/unselect values from suggestions and manage them as tags.",
+      "pdsTags": [
+        "autocomplete",
+        "autodocs",
+        "forms",
+        "multiselect",
+        "pds-tags"
+      ],
+      "ontology": null,
+      "stories": [],
+      "sourceModule": "public/assets/pds/components/pds-tags.js",
+      "superclass": "HTMLElement",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Form field name; selected values are submitted under this name",
+          "type": "string",
+          "default": null,
+          "fieldName": null,
+          "property": "name"
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder shown in omnibox input (default: \"Search tags...\")",
+          "type": "string",
+          "default": null,
+          "fieldName": null,
+          "property": "placeholder"
+        },
+        {
+          "name": "value",
+          "description": "Comma-separated selected item ids",
+          "type": "string",
+          "default": null,
+          "fieldName": null,
+          "property": "value"
+        },
+        {
+          "name": "options",
+          "description": "JSON object with the same shape as `pds-omnibox.settings`",
+          "type": "string",
+          "default": null,
+          "fieldName": null,
+          "property": "options"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables omnibox interaction and chip remove actions",
+          "type": "boolean",
+          "default": null,
+          "fieldName": null,
+          "property": "disabled"
+        },
+        {
+          "name": "required",
+          "description": "Requires at least one selected value for validity",
+          "type": "boolean",
+          "default": null,
+          "fieldName": null,
+          "property": "required"
+        }
+      ],
+      "properties": [
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables omnibox interaction and chip remove actions",
+          "type": null,
+          "default": null,
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "formAssociated",
+          "attribute": null,
+          "description": null,
+          "type": "boolean",
+          "default": "true",
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "Form field name; selected values are submitted under this name",
+          "type": null,
+          "default": null,
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "options",
+          "attribute": "options",
+          "description": "Omnibox options object (see `pds-omnibox.js` typedef)",
+          "type": "PdsOmniboxSettings|null",
+          "default": null,
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Placeholder shown in omnibox input (default: \"Search tags...\")",
+          "type": null,
+          "default": null,
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Requires at least one selected value for validity",
+          "type": null,
+          "default": null,
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Selected option ids (array form)",
+          "type": "string[]",
+          "default": null,
+          "reflects": false,
+          "privacy": "public"
+        }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "description": null,
+          "parameters": [],
+          "return": null
+        },
+        {
+          "name": "formDisabledCallback",
+          "description": null,
+          "parameters": [
+            {
+              "name": "disabled",
+              "type": null,
+              "description": null
+            }
+          ],
+          "return": null
+        },
+        {
+          "name": "formResetCallback",
+          "description": null,
+          "parameters": [],
+          "return": null
+        },
+        {
+          "name": "formStateRestoreCallback",
+          "description": null,
+          "parameters": [
+            {
+              "name": "state",
+              "type": null,
+              "description": null
+            }
+          ],
+          "return": null
+        },
+        {
+          "name": "reportValidity",
+          "description": null,
+          "parameters": [],
+          "return": null
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "Fired whenever selection changes",
+          "type": "Event"
+        },
+        {
+          "name": "input",
+          "description": "Fired whenever selection changes",
+          "type": "Event"
+        }
+      ],
+      "slots": [],
+      "cssParts": [],
+      "notes": []
+    },
     "pds-theme": {
       "tag": "pds-theme",
       "className": "PdsTheme",
@@ -7399,7 +7593,14 @@
         "multiselect",
         "pds-tags"
       ],
-      "pdsParameters": {},
+      "pdsParameters": {
+        "tags": [
+          "forms",
+          "autocomplete",
+          "multiselect",
+          "pds-tags"
+        ]
+      },
       "stories": [],
       "files": [
         "packages\\pds-storybook\\stories\\components\\PdsTags.stories.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pure-ds/storybook",
-  "version": "0.7.26",
+  "version": "0.7.29",
   "description": "Storybook showcase for Pure Design System with live configuration",
   "type": "module",
   "private": false,
@@ -38,7 +38,7 @@
     "pds:build-icons": "pds-build-icons"
   },
   "peerDependencies": {
-    "@pure-ds/core": "^0.7.26"
+    "@pure-ds/core": "^0.7.29"
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",