wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/basic-dropdown/vds-basic-dropdown.stories.js

@@ -24,7 +24,11 @@ export default {
         },
         autoPosition: {
             control: "boolean"
-        }
+        },
+        position: {
+            options: ["top", "bottom", "left", "right", "top-start", "top-end", "bottom-start", "bottom-end"],
+            control: { type: "select" }
+        },
     },
 };
 const styles = `
@@ -53,6 +57,7 @@ const codeTemplate = (args) => {
             match-width="${args.matchWidth}"
             auto-position="${args.autoPosition}"
             backdrop="${args.backdrop}"
+            position="${args.position}"
         >
             <vds-dropdown-group-header size="${args.size}">Carnivores</vds-dropdown-group-header>
             <vds-dropdown-item value="lion" label="Lion" size="${args.size}"></vds-dropdown-item>
@@ -106,7 +111,8 @@ BasicUsage.args = {
     maxHeight: "200px",
     matchWidth: true,
     backdrop: true,
-    autoPosition: false
+    autoPosition: false,
+    position: "bottom"
 };
 const codeTemplateWithIcons = (args) => {
     return `
@@ -124,6 +130,7 @@ const codeTemplateWithIcons = (args) => {
             dynamic-informative-icon="${args.dynamicInformativeIcon}"
             match-width="${args.matchWidth}"
             auto-position="${args.autoPosition}"
+            position="${args.position}"
         >
             <vds-dropdown-group-header size="${args.size}">My Group</vds-dropdown-group-header>
             <vds-dropdown-item informative-icon="add" value="Item 1" label="Item 1" size="${args.size}"></vds-dropdown-item>
@@ -145,7 +152,8 @@ BasicWithIconsUsage.args = {
     informativeIcon: "add",
     dynamicInformativeIcon: false,
     matchWidth: true,
-    autoPosition: false
+    autoPosition: false,
+    position: "bottom"
 };
 const codeTemplateWithPredefinedItem = (args) => {
     return `
@@ -162,6 +170,7 @@ const codeTemplateWithPredefinedItem = (args) => {
             event="${args.event}"
             match-width="${args.matchWidth}"
             auto-position="${args.autoPosition}"
+            position="${args.position}"
         >
             <vds-dropdown-group-header size="${args.size}">My Group</vds-dropdown-group-header>
             <vds-dropdown-item value="Item-1" label="Item 1" is-active="true" is-selected="true" size="${args.size}"></vds-dropdown-item>
@@ -181,6 +190,7 @@ const codeTemplateWithPredefinedItem = (args) => {
             event="${args.event}"
             match-width="${args.matchWidth}"
             auto-position="${args.autoPosition}"
+            position="${args.position}"
         >
             <vds-dropdown-group-header size="${args.size}">My Group</vds-dropdown-group-header>
             <vds-dropdown-item value="Item-1" label="Item 1" size="${args.size}"></vds-dropdown-item>
@@ -201,7 +211,8 @@ BasicWithPredefinedItemUsage.args = {
     isRequired: false,
     event: "click",
     matchWidth: true,
-    autoPosition: false
+    autoPosition: false,
+    position: "bottom"
 };
 const codeTemplateWithItemCheckmarkUsage = (args) => {
     return `
@@ -218,6 +229,7 @@ const codeTemplateWithItemCheckmarkUsage = (args) => {
             event="${args.event}"
             match-width="${args.matchWidth}"
             auto-position="${args.autoPosition}"
+            position="${args.position}"
         >
             <vds-dropdown-group-header size="${args.size}">My Group</vds-dropdown-group-header>
             <vds-dropdown-item has-checkmark="true" value="Item-1" label="Item 1" is-selected="true" size="${args.size}"></vds-dropdown-item>
@@ -238,6 +250,249 @@ BasicWithItemCheckmarkUsage.args = {
     isRequired: false,
     event: "click",
     matchWidth: true,
-    autoPosition: false
+    autoPosition: false,
+    position: "bottom"
+};
+const codeTemplateAutopositionUsage = (args) => {
+    return `
+    <style>
+        .container {
+            padding: 1000px 0 100px 0;
+        }
+        vds-basic-dropdown {
+            margin: auto;
+            width: 300px;
+        }
+        p {
+            padding: 5px;
+        }
+    </style>
+    <p>Scroll the story viewport to see the dropdown autoposition behavior when there is not enough space in the viewport.</p>
+    <div class="container">
+        <vds-basic-dropdown
+            size="${args.size}"
+            value="${args.value}"
+            placeholder="${args.placeholder}"
+            ${args.disabled ? "disabled" : ""}
+            ${args.isReadonly ? "is-readonly" : ""}
+            ${args.error ? "error" : ""}
+            is-required="${args.isRequired}"
+            event="${args.event}"
+            match-width="${args.matchWidth}"
+            ${args.autoPosition ? "auto-position='true'" : ""}
+            position="${args.position}"
+        >
+            <vds-dropdown-group-header size="${args.size}">My Group</vds-dropdown-group-header>
+            <vds-dropdown-item has-checkmark="true" value="Item-1" label="Item 1" is-selected="true" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item has-checkmark="true" value="Item-2" label="Item 2 with more content" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item has-checkmark="true" value="Item-3" label="Item 3" size="${args.size}"></vds-dropdown-item>
+        </vds-basic-dropdown>
+    </div>
+`;
+};
+export const AutopositionUsage = codeTemplateAutopositionUsage.bind({});
+AutopositionUsage.args = {
+    size: "medium",
+    value: "Item-1",
+    placeholder: "Placeholder",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    event: "click",
+    matchWidth: true,
+    autoPosition: true,
+    position: "bottom"
+};
+const codeCustomContentItemsTemplate = (args) => {
+    return `
+    <style>${styles}</style>
+    <style>
+        .custom-carnivores { background: #ffebee; }
+        .custom-primates { background: #e8f5e9; }
+        .custom-rodents { background: #e3f2fd; }
+        .custom-ungulates { background: #fff3e0; }
+        .custom-cetaceans { background: #ede7f6; }
+        .custom-content {
+            padding: 8px 16px;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-weight: 500;
+            height: 100px;
+        }
+        .custom-content img {
+            width: 50px;
+            height: 50px;
+            object-fit: contain;
+        }
+    </style>
+    <div class="container">
+        <vds-basic-dropdown
+            class="animal-dropdown"
+            size="${args.size}"
+            value="${args.value}"
+            placeholder="${args.placeholder}"
+            ${args.disabled ? "disabled" : ""}
+            ${args.isReadonly ? "is-readonly" : ""}
+            ${args.error ? "error" : ""}
+            is-required="${args.isRequired}"
+            event="${args.event}"
+            show-clear-button="${args.showClearButton}"
+            max-height="${args.maxHeight}"
+            match-width="${args.matchWidth}"
+            auto-position="${args.autoPosition}"
+            backdrop="${args.backdrop}"
+            position="${args.position}"
+        >
+            <vds-dropdown-group-header size="${args.size}">Carnivores</vds-dropdown-group-header>
+            <vds-dropdown-item type="custom" value="lion" label="Lion" size="${args.size}">
+                <div class="custom-content custom-carnivores">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" alt="Lion" /> Lion
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="tiger" label="Tiger" size="${args.size}">
+                <div class="custom-content custom-carnivores">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Tiger.50.jpg" alt="Tiger" /> Tiger
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="leopard" label="Leopard" size="${args.size}">
+                <div class="custom-content custom-carnivores">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Male_cheetah_facing_left_in_South_Africa.jpg/3840px-Male_cheetah_facing_left_in_South_Africa.jpg" alt="Leopard" /> Leopard
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="cheetah" label="Cheetah" size="${args.size}">
+                <div class="custom-content custom-carnivores">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Male_cheetah_facing_left_in_South_Africa.jpg/3840px-Male_cheetah_facing_left_in_South_Africa.jpg" alt="Cheetah" /> Cheetah
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="wolf" label="Wolf" size="${args.size}">
+                <div class="custom-content custom-carnivores">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Eurasian_wolf_2.jpg" alt="Wolf" /> Wolf
+                </div>
+            </vds-dropdown-item>
+
+            <vds-dropdown-group-header size="${args.size}">Primates</vds-dropdown-group-header>
+            <vds-dropdown-item type="custom" value="chimpanzee" label="Chimpanzee" size="${args.size}">
+                <div class="custom-content custom-primates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/015_Chimpanzee_at_Kibale_forest_National_Park_Photo_by_Giles_Laurent.jpg/1280px-015_Chimpanzee_at_Kibale_forest_National_Park_Photo_by_Giles_Laurent.jpg" alt="Chimpanzee" /> Chimpanzee
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="gorilla" label="Gorilla" size="${args.size}">
+                <div class="custom-content custom-primates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Gorille_des_plaines_de_l%27ouest_%C3%A0_l%27Espace_Zoologique.jpg/1280px-Gorille_des_plaines_de_l%27ouest_%C3%A0_l%27Espace_Zoologique.jpg" alt="Gorilla" /> Gorilla
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="orangutan" label="Orangutan" size="${args.size}">
+                <div class="custom-content custom-primates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Orang_Utan%2C_Semenggok_Forest_Reserve%2C_Sarawak%2C_Borneo%2C_Malaysia.JPG/1280px-Orang_Utan%2C_Semenggok_Forest_Reserve%2C_Sarawak%2C_Borneo%2C_Malaysia.JPG" alt="Orangutan" /> Orangutan
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="monkey" label="Monkey" size="${args.size}">
+                <div class="custom-content custom-primates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/4/43/Bonnet_macaque_%28Macaca_radiata%29_Photograph_By_Shantanu_Kuveskar.jpg" alt="Monkey" /> Monkey
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="human" label="Human" size="${args.size}">
+                <div class="custom-content custom-primates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Akha_cropped_hires.JPG" alt="Human" /> Human
+                </div>
+            </vds-dropdown-item>
+
+            <vds-dropdown-group-header size="${args.size}">Rodents</vds-dropdown-group-header>
+            <vds-dropdown-item type="custom" value="rat" label="Rat" size="${args.size}">
+                <div class="custom-content custom-rodents">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/Brown_Rat_%28Rattus_norvegicus%29.jpg" alt="Rat" /> Rat
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="mouse" label="Mouse" size="${args.size}">
+                <div class="custom-content custom-rodents">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/%D0%9C%D1%8B%D1%88%D1%8C_2.jpg" alt="Mouse" /> Mouse
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="squirrel" label="Squirrel" size="${args.size}">
+                <div class="custom-content custom-rodents">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Sciuridae.jpg" alt="Squirrel" /> Squirrel
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="hamster" label="Hamster" size="${args.size}">
+                <div class="custom-content custom-rodents">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/European_hamster_%28Cricetus_cricetus%29_Meidling.jpg/3840px-European_hamster_%28Cricetus_cricetus%29_Meidling.jpg" alt="Hamster" /> Hamster
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="guinea pig" label="Guinea Pig" size="${args.size}">
+                <div class="custom-content custom-rodents">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/3/30/George_the_amazing_guinea_pig.jpg" alt="Guinea Pig" /> Guinea Pig
+                </div>
+            </vds-dropdown-item>
+
+            <vds-dropdown-group-header size="${args.size}">Ungulates</vds-dropdown-group-header>
+            <vds-dropdown-item type="custom" value="elephant" label="Elephant" size="${args.size}">
+                <div class="custom-content custom-ungulates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/African_Bush_Elephant.jpg/1280px-African_Bush_Elephant.jpg" alt="Elephant" /> Elephant
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="giraffe" label="Giraffe" size="${args.size}">
+                <div class="custom-content custom-ungulates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Giraffe_standing.jpg" alt="Giraffe" /> Giraffe
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="zebra" label="Zebra" size="${args.size}">
+                <div class="custom-content custom-ungulates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/Plains_Zebra_Equus_quagga_cropped.jpg" alt="Zebra" /> Zebra
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="horse" label="Horse" size="${args.size}">
+                <div class="custom-content custom-ungulates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Horse" /> Horse
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="rhino" label="Rhino" size="${args.size}">
+                <div class="custom-content custom-ungulates">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Rhino_collage.png" alt="Rhino" /> Rhino
+                </div>
+            </vds-dropdown-item>
+
+            <vds-dropdown-group-header size="${args.size}">Cetaceans</vds-dropdown-group-header>
+            <vds-dropdown-item type="custom" value="whale" label="Whale" size="${args.size}">
+                <div class="custom-content custom-cetaceans">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Southern_right_whale.jpg" alt="Whale" /> Whale
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="dolphin" label="Dolphin" size="${args.size}">
+                <div class="custom-content custom-cetaceans">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/1/10/Tursiops_truncatus_01.jpg" alt="Dolphin" /> Dolphin
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="porpoise" label="Porpoise" size="${args.size}">
+                <div class="custom-content custom-cetaceans">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/73/Phocoena_phocoena.2.jpg" alt="Porpoise" /> Porpoise
+                </div>
+            </vds-dropdown-item>
+            <vds-dropdown-item type="custom" value="orca" label="Orca" size="${args.size}">
+                <div class="custom-content custom-cetaceans">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/1/10/Tursiops_truncatus_01.jpg" alt="Orca" /> Orca
+                </div>
+            </vds-dropdown-item>
+        </vds-basic-dropdown>
+    </div>
+`;
+};
+export const CustomContentItemsUsage = codeCustomContentItemsTemplate.bind({});
+CustomContentItemsUsage.args = {
+    size: "medium",
+    value: "",
+    placeholder: "Placeholder",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    event: "click",
+    showClearButton: true,
+    maxHeight: "500px",
+    matchWidth: true,
+    backdrop: true,
+    autoPosition: false,
+    position: "bottom"
 };
-//# sourceMappingURL=vds-basic-dropdown.stories.js.map

package/dist/collection/components/basic-dropdown/vds-basic-dropdown.utils.js

@@ -90,25 +90,29 @@ export const getSelectedLabel = (dropdownContent, value) => {
     }
 };
 export const scrollToSelectedValue = (dropdownContent, value) => {
-    if (!dropdownContent) {
+    if (!dropdownContent || typeof value !== "string")
         return;
-    }
     try {
         const container = dropdownContent.querySelector("slot");
-        const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
-        let selectedItem = null;
-        Array.from(dropdownItems || []).forEach(item => {
-            if (typeof value === "string" && item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") === value) {
-                selectedItem = item;
+        const dropdownItems = container && typeof container.assignedElements === "function" ? container.assignedElements() : [];
+        const selectedItem = Array.from(dropdownItems).find(item => item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") === value);
+        if (selectedItem) {
+            const scroller = dropdownContent.querySelector('.vds-dropdown__content') || dropdownContent;
+            if (scroller && typeof scroller.getBoundingClientRect === 'function' && typeof selectedItem.getBoundingClientRect === 'function') {
+                const scrollerRect = scroller.getBoundingClientRect();
+                const itemRect = selectedItem.getBoundingClientRect();
+                const offsetTop = itemRect.top - scrollerRect.top + scroller.scrollTop;
+                const targetScroll = Math.max(0, offsetTop - (scroller.clientHeight / 2) + (itemRect.height / 2));
+                scroller.scrollTop = targetScroll;
+            }
+            else {
+                try {
+                    selectedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                }
+                catch (e) {
+                    console.warn("[ScrollToSelectedValue] scrollIntoView failed", e);
+                }
             }
-        });
-        // Scroll to option when is single value
-        if (typeof value === "string" && selectedItem) {
-            selectedItem.scrollIntoView({
-                behavior: "instant",
-                block: "center",
-                inline: "center",
-            });
         }
     }
     catch (error) {
@@ -116,7 +120,7 @@ export const scrollToSelectedValue = (dropdownContent, value) => {
     }
 };
 /**
- * Gets thje selected text items in a dropdown.
+ * Gets the selected text items in a dropdown.
  *
  * @param {HTMLElement} dropdownContent The dropdown content element.
  * @param {string[]|string} value The selected value or an array of selected values.
@@ -232,4 +236,15 @@ export const updateContainerWidth = (dropdownTrigger, matchWidth, dropdownConten
         console.warn("[updateContainerWidth]", error);
     }
 };
-//# sourceMappingURL=vds-basic-dropdown.utils.js.map
+/**
+ * Returns focusable dropdown items that can be navigated
+ * ignores dropdown group headers and disabled items.
+
+ * @returns {HTMLElement[]} An array of focusable dropdown items.
+ */
+export const getDropdownFocusableItems = (hostEl) => {
+    return Array.from(hostEl.querySelectorAll('vds-dropdown-item:not([disabled])')).map(dropdownItem => {
+        var _a, _b;
+        return (_b = (_a = dropdownItem === null || dropdownItem === void 0 ? void 0 : dropdownItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) !== null && _b !== void 0 ? _b : null;
+    }).filter((btn) => btn !== null);
+};

package/dist/collection/components/breadcrumb-item/vds-breadcrumbs-item.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,17 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
 :host {
   display: inline-block;
 }

package/dist/collection/components/breadcrumb-item/vds-breadcrumbs-item.js

@@ -1,14 +1,31 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
+/**
+ * @component vds-breadcrumbs-item
+ * @description A breadcrumb navigation item component that displays a single step in a breadcrumb trail. Supports disabled and active states for navigation hierarchy indication.
+ * @slot - The content of the breadcrumb item (typically text or a link)
+ */
 export class VdsBreadcrumbItem {
     constructor() {
-        /** Sets the breacrumb item in disabled state */
+        /**
+         * Sets the breadcrumb item in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Sets the breacrumb item in active state */
+        /**
+         * Sets the breadcrumb item in active state
+         * @type {boolean}
+         * @default false
+         */
         this.isActive = false;
     }
+    /**
+     * Renders the breadcrumb item component
+     * @returns {JSX.Element} The rendered breadcrumb item
+     */
     render() {
-        return (h(Host, { key: '63c8e06e2604f7521dc427e05138737d2e7ef1aa' }, h("div", { key: '5639c2421ccad343e57b6c9bb00bd760b188ecde', class: combineClasses("vds-breadcrumbs-item", this.disabled ? "vds-breadcrumbs-item--disabled" : "", this.isActive ? "vds-breadcrumbs-item--active" : "") }, h("slot", { key: '969475359db6669f0b797ec7c76f92d5c6c55d1c' }))));
+        return (h(Host, { key: '28445175222b730072e445207e62ff2f97a96b3a' }, h("div", { key: 'a95f944eb60a4aee8b9281a9705669508d8a2e82', class: combineClasses("vds-breadcrumbs-item", this.disabled ? "vds-breadcrumbs-item--disabled" : "", this.isActive ? "vds-breadcrumbs-item--active" : "") }, h("slot", { key: 'bf0fdb8fc960529880a0edd669fb6391ea4a2e44' }))));
     }
     static get is() { return "vds-breadcrumbs-item"; }
     static get encapsulation() { return "shadow"; }
@@ -35,8 +52,14 @@ export class VdsBreadcrumbItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the breacrumb item in disabled state"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the breadcrumb item in disabled state"
                 },
                 "getter": false,
                 "setter": false,
@@ -55,8 +78,14 @@ export class VdsBreadcrumbItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the breacrumb item in active state"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the breadcrumb item in active state"
                 },
                 "getter": false,
                 "setter": false,
@@ -67,4 +96,3 @@ export class VdsBreadcrumbItem {
         };
     }
 }
-//# sourceMappingURL=vds-breadcrumbs-item.js.map

package/dist/collection/components/breadcrumb-item/vds-breadcrumbs-item.stories.js

@@ -65,4 +65,3 @@ ${style}
 };
 export const MenuUsage = menuTemplate.bind({});
 MenuUsage.args = {};
-//# sourceMappingURL=vds-breadcrumbs-item.stories.js.map