npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.31 → 3.0.0-beta.34 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.31 → 3.0.0-beta.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (452) hide show

package/dist/collection/dev/dev-components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dev-components.js","sourceRoot":"","sources":["../../src/dev/dev-components.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nexport const DevComponents: FunctionalComponent = () => (\n <div>\n <div class=\"flex gap-4 items-start mb-20\">\n <nv-menu>\n <nv-button slot=\"trigger\">Button</nv-button>\n <ul slot=\"content\">\n <nv-menuitem id=\"foo\" disabled data-testid=\"disabled-item\">\n Menu Item 1\n </nv-menuitem>\n <nv-menuitem id=\"bar\" data-testid=\"enabled-item\">\n Menu Item 2\n </nv-menuitem>\n </ul>\n </nv-menu>\n <nv-tooltip message=\"hello!\" group-name=\"tooltip-test\">\n <nv-button>Tooltip!</nv-button>\n <img\n slot=\"content\"\n class=\"rounded border-white\"\n src=\"https://picsum.photos/200/50\"\n alt=\"profile\"\n />\n </nv-tooltip>\n <nv-tooltip message=\"hello!\" group-name=\"tooltip-test\">\n <nv-button>Tooltip!</nv-button>\n <img\n slot=\"content\"\n class=\"rounded border-white\"\n src=\"https://picsum.photos/200/50\"\n alt=\"profile\"\n />\n </nv-tooltip>\n <nv-tooltip message=\"hello!\" group-name=\"tooltip-test\">\n <nv-button>Tooltip!</nv-button>\n <img\n slot=\"content\"\n class=\"rounded border-white\"\n src=\"https://picsum.photos/200/50\"\n alt=\"profile\"\n />\n </nv-tooltip>\n\n <nv-popover\n placement=\"bottom\"\n has-arrow\n group-name=\"test\"\n trigger-mode=\"click\"\n >\n <nv-button slot=\"trigger\">trigger popover</nv-button>\n\n <p slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </p>\n </nv-popover>\n <nv-popover\n placement=\"bottom\"\n has-arrow\n group-name=\"test\"\n trigger-mode=\"click\"\n >\n <nv-button slot=\"trigger\">trigger popover</nv-button>\n\n <p slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </p>\n </nv-popover>\n\n <nv-menu>\n <nv-button slot=\"trigger\">\n <nv-icon name=\"menu\" slot=\"leading-icon\"></nv-icon>Menu\n </nv-button>\n\n <ul slot=\"content\">\n <nv-menuitem icon=\"user\" shortcut=\"⌘K\" disabled>\n Item 1\n </nv-menuitem>\n\n <nv-menuitem icon=\"bulb\" disabled>\n Item 2\n </nv-menuitem>\n\n <nv-menuitem icon=\"bulb\">Item 3</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Item 4</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Item 5</nv-menuitem>\n\n <hr />\n\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem slot=\"trigger\" hasSubmenu>\n submenu\n </nv-menuitem>\n\n <ul slot=\"content\">\n <nv-menuitem icon=\"bulb\">Sub Item 1</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 2</nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem icon=\"bulb\" slot=\"trigger\" hasSubmenu>\n submenu\n </nv-menuitem>\n\n <ul slot=\"content\">\n <nv-menuitem icon=\"bulb\">Sub Item 1</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 2</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 3</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 4</nv-menuitem>\n </ul>\n </nv-menu>\n <nv-menuitem icon=\"bulb\">Sub Item 4</nv-menuitem>\n </ul>\n </nv-menu>\n\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem slot=\"trigger\" hasSubmenu>\n submenu\n </nv-menuitem>\n\n <ul slot=\"content\">\n <nv-menuitem icon=\"bulb\">Sub Item 1</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 2</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 3</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 4</nv-menuitem>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n </div>\n\n <nv-row>\n <nv-col size={4}>Col-4</nv-col>\n <nv-col size={8}>Col-8</nv-col>\n </nv-row>\n\n <div class=\"grid grid-cols-5 gap-4\">\n <nv-badge></nv-badge>\n <nv-badge label=\"Label\"></nv-badge>\n <nv-badge lead-icon=\"user\"></nv-badge>\n <nv-badge label=\"Icon slot\">\n <nv-icon slot=\"leading-icon\" name=\"user\">\n {' '}\n </nv-icon>\n </nv-badge>\n <nv-badge label=\"Icon slot\" lead-icon=\"home\">\n <nv-icon slot=\"leading-icon\" name=\"search\">\n {' '}\n </nv-icon>\n </nv-badge>\n <nv-badge label=\"Icon slot\">\n <nv-icon slot=\"leading-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-search\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M8 9h8\" />\n <path d=\"M8 13h5\" />\n <path d=\"M11.008 19.195l-3.008 1.805v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5\" />\n <path d=\"M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" />\n <path d=\"M20.2 20.2l1.8 1.8\" />\n </svg>\n </nv-icon>\n </nv-badge>\n <nv-badge dismissible label=\"hello\"></nv-badge>\n <nv-badge color=\"1\" label=\"Badge color 1\" leadIcon=\"user\"></nv-badge>\n <nv-badge color=\"2\" label=\"Badge color 2\" leadIcon=\"search\"></nv-badge>\n <nv-badge color=\"3\" label=\"Badge color 3\"></nv-badge>\n <nv-badge color=\"4\" label=\"Badge color 4\"></nv-badge>\n <nv-badge color=\"5\" label=\"Badge color 5\"></nv-badge>\n <nv-badge color=\"6\" label=\"Badge color 6\"></nv-badge>\n <nv-badge color=\"7\" label=\"Badge color 7\"></nv-badge>\n <nv-badge color=\"8\" label=\"Badge color 8\"></nv-badge>\n <nv-badge color=\"9\" label=\"Badge color 9\"></nv-badge>\n <nv-badge color=\"10\" label=\"Badge color 10\"></nv-badge>\n </div>\n </div>\n);\n"]}
1	+ {"version":3,"file":"dev-components.js","sourceRoot":"","sources":["../../src/dev/dev-components.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nexport const DevComponents: FunctionalComponent = () => (\n <div>\n <div class=\"py-10 flex justify-center\">\n <nv-breadcrumbs>\n <nv-breadcrumb tooltip=\"Home\">\n <a href=\"#\">\n <nv-icon name=\"home\"></nv-icon>\n </a>\n </nv-breadcrumb>\n\n <nv-breadcrumb>\n <a href=\"#\">Dev</a>\n </nv-breadcrumb>\n\n <nv-breadcrumb type=\"collapsed\" tooltip=\"Show more\">\n <li>\n <a href=\"#\">Home</a>\n </li>\n <li>\n <a href=\"#\">About</a>\n </li>\n <li>\n <a href=\"#\">Contact</a>\n </li>\n </nv-breadcrumb>\n\n <nv-breadcrumb current>\n <a href=\"#\">Current Page</a>\n </nv-breadcrumb>\n </nv-breadcrumbs>\n </div>\n <div class=\"flex gap-4 items-start mb-20\">\n <nv-menu>\n <nv-button slot=\"trigger\">Button</nv-button>\n <ul slot=\"content\">\n <nv-menuitem id=\"foo\" disabled data-testid=\"disabled-item\">\n Menu Item 1\n </nv-menuitem>\n <nv-menuitem id=\"bar\" data-testid=\"enabled-item\">\n Menu Item 2\n </nv-menuitem>\n </ul>\n </nv-menu>\n <nv-tooltip message=\"hello!\" group-name=\"tooltip-test\">\n <nv-button>Tooltip!</nv-button>\n <img\n slot=\"content\"\n class=\"rounded border-white\"\n src=\"https://picsum.photos/200/50\"\n alt=\"profile\"\n />\n </nv-tooltip>\n <nv-tooltip message=\"hello!\" group-name=\"tooltip-test\">\n <nv-button>Tooltip!</nv-button>\n <img\n slot=\"content\"\n class=\"rounded border-white\"\n src=\"https://picsum.photos/200/50\"\n alt=\"profile\"\n />\n </nv-tooltip>\n <nv-tooltip message=\"hello!\" group-name=\"tooltip-test\">\n <nv-button>Tooltip!</nv-button>\n <img\n slot=\"content\"\n class=\"rounded border-white\"\n src=\"https://picsum.photos/200/50\"\n alt=\"profile\"\n />\n </nv-tooltip>\n\n <nv-popover\n placement=\"bottom\"\n has-arrow\n // group-name=\"test\"\n trigger-mode=\"click\"\n >\n <nv-button slot=\"trigger\">trigger popover</nv-button>\n\n <p slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </p>\n </nv-popover>\n <nv-popover\n placement=\"bottom\"\n has-arrow\n group-name=\"test\"\n trigger-mode=\"click\"\n >\n <nv-button slot=\"trigger\">trigger popover</nv-button>\n\n <p slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </p>\n </nv-popover>\n\n <nv-menu>\n <nv-button slot=\"trigger\">\n <nv-icon name=\"menu\" slot=\"leading-icon\"></nv-icon>Menu\n </nv-button>\n\n <ul slot=\"content\">\n <nv-menuitem icon=\"user\" shortcut=\"⌘K\" disabled>\n Item 1\n </nv-menuitem>\n\n <nv-menuitem icon=\"bulb\" disabled>\n Item 2\n </nv-menuitem>\n\n <nv-menuitem icon=\"bulb\">Item 3</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Item 4</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Item 5</nv-menuitem>\n\n <hr />\n\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem slot=\"trigger\" hasSubmenu>\n submenu\n </nv-menuitem>\n\n <ul slot=\"content\">\n <nv-menuitem icon=\"bulb\">Sub Item 1</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 2</nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem icon=\"bulb\" slot=\"trigger\" hasSubmenu>\n submenu\n </nv-menuitem>\n\n <ul slot=\"content\">\n <nv-menuitem icon=\"bulb\">Sub Item 1</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 2</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 3</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 4</nv-menuitem>\n </ul>\n </nv-menu>\n <nv-menuitem icon=\"bulb\">Sub Item 4</nv-menuitem>\n </ul>\n </nv-menu>\n\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem slot=\"trigger\" hasSubmenu>\n submenu\n </nv-menuitem>\n\n <ul slot=\"content\">\n <nv-menuitem icon=\"bulb\">Sub Item 1</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 2</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 3</nv-menuitem>\n <nv-menuitem icon=\"bulb\">Sub Item 4</nv-menuitem>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n </div>\n\n <nv-row>\n <nv-col size={4}>Col-4</nv-col>\n <nv-col size={8}>Col-8</nv-col>\n </nv-row>\n\n <div class=\"grid grid-cols-5 gap-4\">\n <nv-badge></nv-badge>\n <nv-badge label=\"Label\"></nv-badge>\n <nv-badge lead-icon=\"user\"></nv-badge>\n <nv-badge label=\"Icon slot\">\n <nv-icon slot=\"leading-icon\" name=\"user\">\n {' '}\n </nv-icon>\n </nv-badge>\n <nv-badge label=\"Icon slot\" lead-icon=\"home\">\n <nv-icon slot=\"leading-icon\" name=\"search\">\n {' '}\n </nv-icon>\n </nv-badge>\n <nv-badge label=\"Icon slot\">\n <nv-icon slot=\"leading-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-search\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M8 9h8\" />\n <path d=\"M8 13h5\" />\n <path d=\"M11.008 19.195l-3.008 1.805v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5\" />\n <path d=\"M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" />\n <path d=\"M20.2 20.2l1.8 1.8\" />\n </svg>\n </nv-icon>\n </nv-badge>\n <nv-badge dismissible label=\"hello\"></nv-badge>\n <nv-badge color=\"1\" label=\"Badge color 1\" leadIcon=\"user\"></nv-badge>\n <nv-badge color=\"2\" label=\"Badge color 2\" leadIcon=\"search\"></nv-badge>\n <nv-badge color=\"3\" label=\"Badge color 3\"></nv-badge>\n <nv-badge color=\"4\" label=\"Badge color 4\"></nv-badge>\n <nv-badge color=\"5\" label=\"Badge color 5\"></nv-badge>\n <nv-badge color=\"6\" label=\"Badge color 6\"></nv-badge>\n <nv-badge color=\"7\" label=\"Badge color 7\"></nv-badge>\n <nv-badge color=\"8\" label=\"Badge color 8\"></nv-badge>\n <nv-badge color=\"9\" label=\"Badge color 9\"></nv-badge>\n <nv-badge color=\"10\" label=\"Badge color 10\"></nv-badge>\n </div>\n </div>\n);\n"]}

package/dist/collection/templates/navigation.docs.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { h } from "@stencil/core";
+const NavigationDocs = {
+    subcomponents: ['nv-icon'],
+    stories: [
+        {
+            name: 'Tabs',
+            description: 'A navigation bar using a tab view so it’s easy to jump between sections like the Login page, Forms, and Typos. Each tab has its own icon and a clear border that shows you which one’s active.',
+            template: (h("nav", { "data-class": "flex flex-1 justify-between items-center bg-level-00 px-6 pt-4 border-b border-low" }, h("ul", { "data-class": "flex space-x-6 nv-tabs" }, h("li", null, h("a", { href: "/login", "data-class": "nv-link pb-2 border-b-2 flex items-center gap-x-1" }, h("nv-icon", { name: "lock", size: "md" }), "Login page")), h("li", null, h("a", { href: "/form", "data-class": "nv-link selected pb-2 border-b-2 flex items-center gap-x-1" }, h("nv-icon", { name: "chart-dots", size: "md" }), "Forms")), h("li", null, h("a", { href: "/typo", "data-class": "nv-link pb-2 border-b-2 flex items-center gap-x-1" }, h("nv-icon", { name: "feather", size: "md" }), "Typos"))))),
+        },
+    ],
+};
+export default NavigationDocs;
+//# sourceMappingURL=navigation.docs.js.map

package/dist/collection/templates/navigation.docs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"navigation.docs.js","sourceRoot":"","sources":["../../src/templates/navigation.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,MAAM,cAAc,GAA2B;IAC7C,aAAa,EAAE,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,WAAW,EACT,gMAAgM;YAClM,QAAQ,EAAE,CACR,yBAAgB,oFAAoF;gBAClG,wBAAe,wBAAwB;oBACrC;wBACE,SACE,IAAI,EAAC,QAAQ,gBACF,mDAAmD;4BAE9D,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAW;yCACvC,CACD;oBACL;wBACE,SACE,IAAI,EAAC,OAAO,gBACD,4DAA4D;4BAEvE,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAW;oCAC7C,CACD;oBACL;wBACE,SACE,IAAI,EAAC,OAAO,gBACD,mDAAmD;4BAE9D,eAAS,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAW;oCAC1C,CACD,CACF,CACD,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs, NovaTemplate } from '../nova-docs';\n\nconst NavigationDocs: NovaDocs<NovaTemplate> = {\n subcomponents: ['nv-icon'],\n stories: [\n {\n name: 'Tabs',\n description:\n 'A navigation bar using a tab view so it’s easy to jump between sections like the Login page, Forms, and Typos. Each tab has its own icon and a clear border that shows you which one’s active.',\n template: (\n <nav data-class=\"flex flex-1 justify-between items-center bg-level-00 px-6 pt-4 border-b border-low\">\n <ul data-class=\"flex space-x-6 nv-tabs\">\n <li>\n <a\n href=\"/login\"\n data-class=\"nv-link pb-2 border-b-2 flex items-center gap-x-1\"\n >\n <nv-icon name=\"lock\" size=\"md\"></nv-icon>Login page\n </a>\n </li>\n <li>\n <a\n href=\"/form\"\n data-class=\"nv-link selected pb-2 border-b-2 flex items-center gap-x-1\"\n >\n <nv-icon name=\"chart-dots\" size=\"md\"></nv-icon>Forms\n </a>\n </li>\n <li>\n <a\n href=\"/typo\"\n data-class=\"nv-link pb-2 border-b-2 flex items-center gap-x-1\"\n >\n <nv-icon name=\"feather\" size=\"md\"></nv-icon>Typos\n </a>\n </li>\n </ul>\n </nav>\n ),\n },\n ],\n};\n\nexport default NavigationDocs;\n"]}

package/dist/collection/utils/constants.js CHANGED Viewed

@@ -42,6 +42,11 @@ export var ButtonType;
     ButtonType["Reset"] = "reset";
     ButtonType["Button"] = "button";
 })(ButtonType || (ButtonType = {}));
+export var IconButtonShape;
+(function (IconButtonShape) {
+    IconButtonShape["Square"] = "square";
+    IconButtonShape["Rounded"] = "rounded";
+})(IconButtonShape || (IconButtonShape = {}));
 export var LoaderColors;
 (function (LoaderColors) {
     LoaderColors["High"] = "brand";

package/dist/collection/utils/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"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","sourcesContent":["export enum FeedbackColors {\n Information = 'information',\n Warning = 'warning',\n Success = 'success',\n Error = 'error',\n Neutral = 'neutral',\n}\nexport enum DeprecatedSemanticColors {\n Neutral = 'neutral',\n Primary = 'primary',\n Secondary = 'secondary',\n Success = 'success',\n Error = 'error',\n}\nexport enum SemanticSizes {\n ExtraSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n ExtraLarge = 'xl',\n}\nexport enum ButtonSize {\n ExtraSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n}\nexport enum ButtonEmphasis {\n High = 'high',\n Medium = 'medium',\n Low = 'low',\n Lower = 'lower',\n}\nexport enum ButtonType {\n Submit = 'submit',\n Reset = 'reset',\n Button = 'button',\n}\nexport enum LoaderColors {\n High = 'brand',\n Low = 'white',\n}\nexport enum FieldLabelPlacement {\n Before = 'before',\n After = 'after',\n}\n\nexport enum TextInputAutocomplete {\n On = 'on',\n Off = 'off',\n Section = 'section-*',\n Shipping = 'shipping',\n Billing = 'billing',\n Home = 'home',\n Work = 'work',\n Mobile = 'mobile',\n Fax = 'fax',\n Pager = 'pager',\n Tel = 'tel',\n TelCountryCode = 'tel-country-code',\n TelNational = 'tel-national',\n TelAreaCode = 'tel-area-code',\n TelLocal = 'tel-local',\n TelLocalPrefix = 'tel-local-prefix',\n TelLocalSuffix = 'tel-local-suffix',\n TelExtension = 'tel-extension',\n Email = 'email',\n IMProtocol = 'impp',\n Name = 'name',\n HonorificPrefix = 'honorific-prefix',\n GivenName = 'given-name',\n AdditionalName = 'additional-name',\n FamilyName = 'family-name',\n HonorificSuffix = 'honorific-suffix',\n Nickname = 'nickname',\n Username = 'username',\n NewPassword = 'new-password',\n CurrentPassword = 'current-password',\n OneTimeCode = 'one-time-code',\n OrganizationTitle = 'organization-title',\n Organization = 'organization',\n StreetAddress = 'street-address',\n AddressLine1 = 'address-line1',\n AddressLine2 = 'address-line2',\n AddressLine3 = 'address-line3',\n AddressLevel4 = 'address-level4',\n AddressLevel3 = 'address-level3',\n AddressLevel2 = 'address-level2',\n AddressLevel1 = 'address-level1',\n Country = 'country',\n CountryName = 'country-name',\n PostalCode = 'postal-code',\n CCName = 'cc-name',\n CCGivenName = 'cc-given-name',\n CCAdditionalName = 'cc-additional-name',\n CCFamilyName = 'cc-family-name',\n CCNumber = 'cc-number',\n CCExp = 'cc-exp',\n CCExpMonth = 'cc-exp-month',\n CCExpYear = 'cc-exp-year',\n CCCSC = 'cc-csc',\n CCType = 'cc-type',\n TransactionCurrency = 'transaction-currency',\n TransactionAmount = 'transaction-amount',\n Language = 'language',\n Bday = 'bday',\n BdayDay = 'bday-day',\n BdayMonth = 'bday-month',\n BdayYear = 'bday-year',\n Sex = 'sex',\n Url = 'url',\n Photo = 'photo',\n}\n"]}
1	+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"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","sourcesContent":["export enum FeedbackColors {\n Information = 'information',\n Warning = 'warning',\n Success = 'success',\n Error = 'error',\n Neutral = 'neutral',\n}\nexport enum DeprecatedSemanticColors {\n Neutral = 'neutral',\n Primary = 'primary',\n Secondary = 'secondary',\n Success = 'success',\n Error = 'error',\n}\nexport enum SemanticSizes {\n ExtraSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n ExtraLarge = 'xl',\n}\nexport enum ButtonSize {\n ExtraSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n}\nexport enum ButtonEmphasis {\n High = 'high',\n Medium = 'medium',\n Low = 'low',\n Lower = 'lower',\n}\nexport enum ButtonType {\n Submit = 'submit',\n Reset = 'reset',\n Button = 'button',\n}\nexport enum IconButtonShape {\n Square = 'square',\n Rounded = 'rounded',\n}\nexport enum LoaderColors {\n High = 'brand',\n Low = 'white',\n}\nexport enum FieldLabelPlacement {\n Before = 'before',\n After = 'after',\n}\n\nexport enum TextInputAutocomplete {\n On = 'on',\n Off = 'off',\n Section = 'section-*',\n Shipping = 'shipping',\n Billing = 'billing',\n Home = 'home',\n Work = 'work',\n Mobile = 'mobile',\n Fax = 'fax',\n Pager = 'pager',\n Tel = 'tel',\n TelCountryCode = 'tel-country-code',\n TelNational = 'tel-national',\n TelAreaCode = 'tel-area-code',\n TelLocal = 'tel-local',\n TelLocalPrefix = 'tel-local-prefix',\n TelLocalSuffix = 'tel-local-suffix',\n TelExtension = 'tel-extension',\n Email = 'email',\n IMProtocol = 'impp',\n Name = 'name',\n HonorificPrefix = 'honorific-prefix',\n GivenName = 'given-name',\n AdditionalName = 'additional-name',\n FamilyName = 'family-name',\n HonorificSuffix = 'honorific-suffix',\n Nickname = 'nickname',\n Username = 'username',\n NewPassword = 'new-password',\n CurrentPassword = 'current-password',\n OneTimeCode = 'one-time-code',\n OrganizationTitle = 'organization-title',\n Organization = 'organization',\n StreetAddress = 'street-address',\n AddressLine1 = 'address-line1',\n AddressLine2 = 'address-line2',\n AddressLine3 = 'address-line3',\n AddressLevel4 = 'address-level4',\n AddressLevel3 = 'address-level3',\n AddressLevel2 = 'address-level2',\n AddressLevel1 = 'address-level1',\n Country = 'country',\n CountryName = 'country-name',\n PostalCode = 'postal-code',\n CCName = 'cc-name',\n CCGivenName = 'cc-given-name',\n CCAdditionalName = 'cc-additional-name',\n CCFamilyName = 'cc-family-name',\n CCNumber = 'cc-number',\n CCExp = 'cc-exp',\n CCExpMonth = 'cc-exp-month',\n CCExpYear = 'cc-exp-year',\n CCCSC = 'cc-csc',\n CCType = 'cc-type',\n TransactionCurrency = 'transaction-currency',\n TransactionAmount = 'transaction-amount',\n Language = 'language',\n Bday = 'bday',\n BdayDay = 'bday-day',\n BdayMonth = 'bday-month',\n BdayYear = 'bday-year',\n Sex = 'sex',\n Url = 'url',\n Photo = 'photo',\n}\n"]}

package/dist/components/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { u as useGrow } from './p-c08a278d.js';
-export { e as eventUtils } from './p-c08a278d.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-0caa4741.js';
-export { c as constants } from './p-a15ddd42.js';
+import { u as useGrow } from './p-3a65a05e.js';
+export { e as eventUtils } from './p-3a65a05e.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-3b209e94.js';
+export { c as constants } from './p-74407727.js';
 import { u as useCollapse, t as timeline } from './p-42301d8f.js';
 import { u as useFade } from './p-1daca48a.js';

package/dist/components/nv-alert.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-0caa4741.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-3b209e94.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { F as FeedbackColors } from './p-a15ddd42.js';
+import { F as FeedbackColors } from './p-74407727.js';
 import { u as useCollapse, t as timeline } from './p-42301d8f.js';
 import { u as useFade } from './p-1daca48a.js';
-import { d as defineCustomElement$2 } from './p-39e93e5b.js';
+import { d as defineCustomElement$2 } from './p-a61d9ce8.js';
 const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
 const NvAlertStyle0 = nvAlertCss;
@@ -137,7 +137,7 @@ const NvAlert$1 = /*@__PURE__*/ proxyCustomElement(class NvAlert extends H {
     //#region RENDER
     render() {
         var _a;
-        return (h(Host, { key: '6df6a1c8f72ca1291f3ba03242225fb63b43e6dd', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: '51b6e7d130b4c81e1de48c511dfe2edc52de5bfb', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: 'dac06159b49e2a6caf48245a8131dcd6d530c346', class: "content" }, this.heading && h("p", { key: '8fb6805d964174a0c5808e49152f4c047cba1f82', class: "heading" }, this.heading), this.message && h("p", { key: 'ff5a70d54c760651e3cfa7dfff40095d9599e448', class: "message" }, this.message), h("slot", { key: '546aff25cadda8a402e2b45b2f4f039a7e3a7ecc' })), this.dismissible && (h("button", { key: 'a43b47df76ede8cf646b9c8430532848b73008f4', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: 'cef62db2b2234101c49a44c80ebfa9224220ec0b', name: "x", size: "sm" })))));
+        return (h(Host, { key: 'e14c9a07c3127a8ac3b1881e055526b82a93ff83', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: 'c4aaf00e4b18891dd6053f1529f7a6267386c647', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '9df1b181179cd21361bae2ae347a02dbe07cee63', class: "content" }, this.heading && h("p", { key: '53a21fe4139260bd9aca34cefbb194024a3a1afb', class: "heading" }, this.heading), this.message && h("p", { key: 'eb58482e492f4aff15ccb300f3e89c70544c66d9', class: "message" }, this.message), h("slot", { key: '2762850b8d37f8c53447321a80f2d12d81c8b6f6' })), this.dismissible && (h("button", { key: '8827d5cbffe2f3757111f09806672514c10f7942', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: '398ee6b8fc57eb994b30d7194ea69cd251ae5076', name: "x", size: "sm" })))));
     }
     get ref() { return this; }
     static get watchers() { return {

package/dist/components/nv-avatar.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-0caa4741.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-3b209e94.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { S as SemanticSizes } from './p-a15ddd42.js';
-import { d as defineCustomElement$2 } from './p-39e93e5b.js';
+import { S as SemanticSizes } from './p-74407727.js';
+import { d as defineCustomElement$2 } from './p-a61d9ce8.js';
-const nvAvatarCss = "nv-icon{display:inline-block;width:fit-content;height:fit-content;color:inherit}nv-icon>.nv-icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-icon>.nv-icon-sm{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-icon>.nv-icon-md{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-icon>.nv-icon-lg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-icon>.nv-icon-xl{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
+const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
 const NvAvatarStyle0 = nvAvatarCss;
 const NvAvatar$1 = /*@__PURE__*/ proxyCustomElement(class NvAvatar extends H {
@@ -58,7 +58,7 @@ const NvAvatar$1 = /*@__PURE__*/ proxyCustomElement(class NvAvatar extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8cd1fe9e804aa11e821c0983c28eefdbe2275235', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (h("slot", { name: "icon" }, h("nv-icon", { name: "user" })))));
+        return (h(Host, { key: '4543ac26e2c1d6d91de2c4671657e584486daefe', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (h("slot", { name: "icon" }, h("nv-icon", { name: "user" })))));
     }
     static get style() { return NvAvatarStyle0; }
 }, [4, "nv-avatar", {

package/dist/components/nv-avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-avatar.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,~~u7GAAu7G~~,CAAC;~~AAC58G~~,uBAAe,WAAW;;MCYbA,UAAQ;IALrB;;;;;;QA8GE,SAAI,GAAuB,IAAI,CAAC;;;;;QAOvB,UAAK,GAAW,GAAG,CAAC;KAuC9B;IAjGC,mBAAmB;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3B;QACD,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;SACrB;KACF;;;;;;;;;IA+CO,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACxC;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,gBACpD,IAAI,CAAC,GAAG,IAEnB,IAAI,CAAC,GAAG,IACP,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,IACnC,IAAI,CAAC,QAAQ,IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,KAEhC,YAAM,IAAI,EAAC,MAAM,IACf,eAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvAvatar"],"sources":["src/components/nv-avatar/nv-avatar.scss?tag=nv-avatar","src/components/nv-avatar/nv-avatar.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/~~nv-icon.scss~~\" as icon;\n\n/* Variants /\n$avatar-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$avatar-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/ Define maps for size-related variables /\n$avatar-size: (\n \"xs\": var(--avatar-xs-size),\n \"sm\": var(--avatar-sm-size),\n \"md\": var(--avatar-md-size),\n \"lg\": var(--avatar-lg-size),\n \"xl\": var(--avatar-xl-size)\n);\n\n$avatar-font-size: (\n \"xs\": var(--avatar-xs-font-size),\n \"sm\": var(--avatar-sm-font-size),\n \"md\": var(--avatar-md-font-size),\n \"lg\": var(--avatar-lg-font-size),\n \"xl\": var(--avatar-xl-font-size)\n);\n\n/ Define maps for color-related variables /\n$avatar-color-background: (\n \"1\": var(--components-avatar-background-1),\n \"2\": var(--components-avatar-background-2),\n \"3\": var(--components-avatar-background-3),\n \"4\": var(--components-avatar-background-4),\n \"5\": var(--components-avatar-background-5),\n \"6\": var(--components-avatar-background-6),\n \"7\": var(--components-avatar-background-7),\n \"8\": var(--components-avatar-background-8),\n \"9\": var(--components-avatar-background-9),\n \"10\": var(--components-avatar-background-10)\n);\n\n$avatar-color-content: (\n \"1\": var(--components-avatar-content-1),\n \"2\": var(--components-avatar-content-2),\n \"3\": var(--components-avatar-content-3),\n \"4\": var(--components-avatar-content-4),\n \"5\": var(--components-avatar-content-5),\n \"6\": var(--components-avatar-content-6),\n \"7\": var(--components-avatar-content-7),\n \"8\": var(--components-avatar-content-8),\n \"9\": var(--components-avatar-content-9),\n \"10\": var(--components-avatar-content-10)\n);\n\n@mixin avatar-base-styles() {\n align-items: center !important;\n background-color: var(--components-avatar-background-1);\n border-radius: var(--radius-rounded-full) !important;\n display: flex !important;\n flex-shrink: 0 !important;\n font-family: \"TT Norms Pro\", sans-serif;\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\n justify-content: center !important;\n leading-trim: both;\n line-height: 1 !important;\n text-align: center;\n text-edge: cap;\n text-transform: uppercase;\n}\n\n@mixin avatar-color($avatar-number) {\n background-color: map.get($avatar-color-background, $avatar-number);\n color: map.get($avatar-color-content, $avatar-number);\n}\n\n@mixin avatar-image-styles() {\n height: 100%;\n width: 100%;\n object-fit: cover;\n object-position: center;\n border-radius: 50%;\n}\n\n@mixin avatar-size-styles($size) {\n width: map.get($avatar-size, $size);\n height: map.get($avatar-size, $size);\n font-size: map.get($avatar-font-size, $size);\n line-height: map.get($avatar-font-size, $size);\n\n nv-icon > svg {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$~~icon~~-~~config~~, $size), size),\n map.get(map.get(icon.$~~icon~~-~~config~~, $size), stroke)\n );\n }\n}\n\nnv-avatar {\n @include avatar-base-styles();\n\n @each $color in $avatar-colors {\n &.avatar-color-#{$color} {\n @include avatar-color($color);\n }\n }\n\n img {\n @include avatar-image-styles();\n }\n\n @each $size in $avatar-sizes {\n &.avatar-#{$size} {\n @include avatar-size-styles($size);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes } from '../../utils/constants';\n\n/\n @slot icon - if you want to add an icon to the avatar, use this slot with an svg or nv-icon\n /\n@Component({\n tag: 'nv-avatar',\n styleUrl: 'nv-avatar.scss',\n shadow: false,\n})\nexport class NvAvatar {\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Set size to ExtraSmall to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly xsmall: boolean;\n\n /\n Set size to Small to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly small: boolean;\n\n /\n Set size to Medium to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly medium: boolean;\n\n /\n Set size to Large to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly large: boolean;\n\n /\n Set size to ExtraLarge to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly xlarge: boolean;\n\n /\n Set initials to the avatar.\n * @deprecated use initials instead.\n /\n\n @Prop()\n readonly text: string;\n\n /\n Set src to the avatar.\n * @deprecated use src instead.\n /\n @Prop()\n readonly url: string;\n\n componentWillRender() {\n if (this.xsmall) {\n this.size = SemanticSizes.ExtraSmall;\n }\n if (this.small) {\n this.size = SemanticSizes.Small;\n }\n if (this.medium) {\n this.size = SemanticSizes.Medium;\n }\n if (this.large) {\n this.size = SemanticSizes.Large;\n }\n if (this.xlarge) {\n this.size = SemanticSizes.ExtraLarge;\n }\n if (this.text) {\n this.initials = this.text;\n }\n if (this.url) {\n this.src = this.url;\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * If and image is provided, add an alt tag to describe it.\n /\n @Prop({ reflect: true })\n readonly alt: string;\n\n /\n Will insert an image into the avatar.\n /\n @Prop({ reflect: true, mutable: true })\n src: string;\n\n /\n Initials of the avatar. Usually use two letters\n * When filled with the src parameter, the text will not be rendered.\n /\n @Prop({ reflect: true, mutable: true })\n initials: string;\n\n /\n Define the size of the avatar. You can use t-shirt sizes.\n /\n @Prop({ reflect: true, mutable: true })\n size: `${SemanticSizes}` = 'md';\n\n /\n You can apply different colors on the Avatar.\n * Use a string number between 1 and 10.\n /\n @Prop({ reflect: true })\n readonly color: string = '1';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Makes sure the initials are trimmed to 2 letters.\n * @param {string} initials - The initials to be trimmed.\n * @returns {string} The trimmed initials.\n /\n private trimInitials(initials: string): string {\n return initials.trim().substring(0, 2);\n }\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`avatar-${this.size}`, `avatar-color-${this.color}`)}\n aria-label={this.alt}\n >\n {this.src ? (\n <img src={this.src} alt={this.alt} />\n ) : this.initials ? (\n this.trimInitials(this.initials)\n ) : (\n <slot name=\"icon\">\n <nv-icon name=\"user\" />\n </slot>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-avatar.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,y7FAAy7F,CAAC;AAC98F,uBAAe,WAAW;;MCYbA,UAAQ;IALrB;;;;;;QA8GE,SAAI,GAAuB,IAAI,CAAC;;;;;QAOvB,UAAK,GAAW,GAAG,CAAC;KAuC9B;IAjGC,mBAAmB;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3B;QACD,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;SACrB;KACF;;;;;;;;;IA+CO,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACxC;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,gBACpD,IAAI,CAAC,GAAG,IAEnB,IAAI,CAAC,GAAG,IACP,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,IACnC,IAAI,CAAC,QAAQ,IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,KAEhC,YAAM,IAAI,EAAC,MAAM,IACf,eAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvAvatar"],"sources":["src/components/nv-avatar/nv-avatar.scss?tag=nv-avatar","src/components/nv-avatar/nv-avatar.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/styles/mixins\" as icon;\n\n/* Variants /\n$avatar-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$avatar-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/ Define maps for size-related variables /\n$avatar-size: (\n \"xs\": var(--avatar-xs-size),\n \"sm\": var(--avatar-sm-size),\n \"md\": var(--avatar-md-size),\n \"lg\": var(--avatar-lg-size),\n \"xl\": var(--avatar-xl-size)\n);\n\n$avatar-font-size: (\n \"xs\": var(--avatar-xs-font-size),\n \"sm\": var(--avatar-sm-font-size),\n \"md\": var(--avatar-md-font-size),\n \"lg\": var(--avatar-lg-font-size),\n \"xl\": var(--avatar-xl-font-size)\n);\n\n/ Define maps for color-related variables /\n$avatar-color-background: (\n \"1\": var(--components-avatar-background-1),\n \"2\": var(--components-avatar-background-2),\n \"3\": var(--components-avatar-background-3),\n \"4\": var(--components-avatar-background-4),\n \"5\": var(--components-avatar-background-5),\n \"6\": var(--components-avatar-background-6),\n \"7\": var(--components-avatar-background-7),\n \"8\": var(--components-avatar-background-8),\n \"9\": var(--components-avatar-background-9),\n \"10\": var(--components-avatar-background-10)\n);\n\n$avatar-color-content: (\n \"1\": var(--components-avatar-content-1),\n \"2\": var(--components-avatar-content-2),\n \"3\": var(--components-avatar-content-3),\n \"4\": var(--components-avatar-content-4),\n \"5\": var(--components-avatar-content-5),\n \"6\": var(--components-avatar-content-6),\n \"7\": var(--components-avatar-content-7),\n \"8\": var(--components-avatar-content-8),\n \"9\": var(--components-avatar-content-9),\n \"10\": var(--components-avatar-content-10)\n);\n\n@mixin avatar-base-styles() {\n align-items: center !important;\n background-color: var(--components-avatar-background-1);\n border-radius: var(--radius-rounded-full) !important;\n display: flex !important;\n flex-shrink: 0 !important;\n font-family: \"TT Norms Pro\", sans-serif;\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\n justify-content: center !important;\n leading-trim: both;\n line-height: 1 !important;\n text-align: center;\n text-edge: cap;\n text-transform: uppercase;\n}\n\n@mixin avatar-color($avatar-number) {\n background-color: map.get($avatar-color-background, $avatar-number);\n color: map.get($avatar-color-content, $avatar-number);\n}\n\n@mixin avatar-image-styles() {\n height: 100%;\n width: 100%;\n object-fit: cover;\n object-position: center;\n border-radius: 50%;\n}\n\n@mixin avatar-size-styles($size) {\n width: map.get($avatar-size, $size);\n height: map.get($avatar-size, $size);\n font-size: map.get($avatar-font-size, $size);\n line-height: map.get($avatar-font-size, $size);\n\n nv-icon > svg {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, $size), size),\n map.get(map.get(icon.$size-variants, $size), stroke)\n );\n }\n}\n\nnv-avatar {\n @include avatar-base-styles();\n\n @each $color in $avatar-colors {\n &.avatar-color-#{$color} {\n @include avatar-color($color);\n }\n }\n\n img {\n @include avatar-image-styles();\n }\n\n @each $size in $avatar-sizes {\n &.avatar-#{$size} {\n @include avatar-size-styles($size);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes } from '../../utils/constants';\n\n/\n @slot icon - if you want to add an icon to the avatar, use this slot with an svg or nv-icon\n /\n@Component({\n tag: 'nv-avatar',\n styleUrl: 'nv-avatar.scss',\n shadow: false,\n})\nexport class NvAvatar {\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Set size to ExtraSmall to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly xsmall: boolean;\n\n /\n Set size to Small to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly small: boolean;\n\n /\n Set size to Medium to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly medium: boolean;\n\n /\n Set size to Large to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly large: boolean;\n\n /\n Set size to ExtraLarge to the avatar.\n * @deprecated use size instead.\n /\n @Prop()\n readonly xlarge: boolean;\n\n /\n Set initials to the avatar.\n * @deprecated use initials instead.\n /\n\n @Prop()\n readonly text: string;\n\n /\n Set src to the avatar.\n * @deprecated use src instead.\n /\n @Prop()\n readonly url: string;\n\n componentWillRender() {\n if (this.xsmall) {\n this.size = SemanticSizes.ExtraSmall;\n }\n if (this.small) {\n this.size = SemanticSizes.Small;\n }\n if (this.medium) {\n this.size = SemanticSizes.Medium;\n }\n if (this.large) {\n this.size = SemanticSizes.Large;\n }\n if (this.xlarge) {\n this.size = SemanticSizes.ExtraLarge;\n }\n if (this.text) {\n this.initials = this.text;\n }\n if (this.url) {\n this.src = this.url;\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * If and image is provided, add an alt tag to describe it.\n /\n @Prop({ reflect: true })\n readonly alt: string;\n\n /\n Will insert an image into the avatar.\n /\n @Prop({ reflect: true, mutable: true })\n src: string;\n\n /\n Initials of the avatar. Usually use two letters\n * When filled with the src parameter, the text will not be rendered.\n /\n @Prop({ reflect: true, mutable: true })\n initials: string;\n\n /\n Define the size of the avatar. You can use t-shirt sizes.\n /\n @Prop({ reflect: true, mutable: true })\n size: `${SemanticSizes}` = 'md';\n\n /\n You can apply different colors on the Avatar.\n * Use a string number between 1 and 10.\n /\n @Prop({ reflect: true })\n readonly color: string = '1';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Makes sure the initials are trimmed to 2 letters.\n * @param {string} initials - The initials to be trimmed.\n * @returns {string} The trimmed initials.\n /\n private trimInitials(initials: string): string {\n return initials.trim().substring(0, 2);\n }\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`avatar-${this.size}`, `avatar-color-${this.color}`)}\n aria-label={this.alt}\n >\n {this.src ? (\n <img src={this.src} alt={this.alt} />\n ) : this.initials ? (\n this.trimInitials(this.initials)\n ) : (\n <slot name=\"icon\">\n <nv-icon name=\"user\" />\n </slot>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-badge.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-0caa4741.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-3b209e94.js';
 import { c as clsx } from './p-8a1a6e56.js';
 import { u as useCollapse, t as timeline } from './p-42301d8f.js';
 import { u as useFade } from './p-1daca48a.js';
-import { d as defineCustomElement$2 } from './p-39e93e5b.js';
+import { d as defineCustomElement$2 } from './p-a61d9ce8.js';
-const nvBadgeCss = "nv-icon{display:inline-block;width:fit-content;height:fit-content;color:inherit}nv-icon>.nv-icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-icon>.nv-icon-sm{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-icon>.nv-icon-md{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-icon>.nv-icon-lg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-icon>.nv-icon-xl{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
+const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
 const NvBadgeStyle0 = nvBadgeCss;
 const NvBadge$1 = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
@@ -123,11 +123,11 @@ const NvBadge$1 = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '18d3a28777aa74117ccc68aa0c889ea716b90d56', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: 'f0b9bf1d1a32c72f9d8176300d06875f0258f068', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, h("slot", { key: '87ac2dd4ae3ba521d1a6b15394d79c85c1899102', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '22fbc091fe0c861e9a6ce12e5ba1b8d0e83ca7da', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: '040559657d6a337b2cd3ce265d2e99cdd0245324' }, this.label), this.dismissible && (h("button", { key: 'd0f992bdf748be5bf63d7a3e9864f96cad4dfae7', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '60915e33efb355a5e2820507fe2365ba4e602c26', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '967f6cceadd13f1a7758696b0ddb9b77d256caac', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '683ccf19e6281ab8fded9e217f61a67d835a7b37', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: 'e01b6071da8bdc73d7708e91c67afe9bc2819095' }, this.label), this.dismissible && (h("button", { key: 'f8040e70acd910c63fa377837fc13316a321366c', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '405cee0cdcdab3a470086ccbd3aa5b46c5e0e2ea', name: "x", size: "sm" })))));
     }
     get ref() { return this; }
     static get watchers() { return {

package/dist/components/nv-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-badge.js","mappings":"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","names":["NvBadge"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/nv-icon.scss\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants /\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/ Define maps for color-related variables /\n$color-rainbow-text: (\n \"1\": var(--color-rainbow-1-text),\n \"2\": var(--color-rainbow-2-text),\n \"3\": var(--color-rainbow-3-text),\n \"4\": var(--color-rainbow-4-text),\n \"5\": var(--color-rainbow-5-text),\n \"6\": var(--color-rainbow-6-text),\n \"7\": var(--color-rainbow-7-text),\n \"8\": var(--color-rainbow-8-text),\n \"9\": var(--color-rainbow-9-text),\n \"10\": var(--color-rainbow-10-text)\n);\n\n$color-rainbow-icon: (\n \"1\": var(--color-rainbow-1-icon),\n \"2\": var(--color-rainbow-2-icon),\n \"3\": var(--color-rainbow-3-icon),\n \"4\": var(--color-rainbow-4-icon),\n \"5\": var(--color-rainbow-5-icon),\n \"6\": var(--color-rainbow-6-icon),\n \"7\": var(--color-rainbow-7-icon),\n \"8\": var(--color-rainbow-8-icon),\n \"9\": var(--color-rainbow-9-icon),\n \"10\": var(--color-rainbow-10-icon)\n);\n\n$color-rainbow-background: (\n \"1\": var(--color-rainbow-1-background),\n \"2\": var(--color-rainbow-2-background),\n \"3\": var(--color-rainbow-3-background),\n \"4\": var(--color-rainbow-4-background),\n \"5\": var(--color-rainbow-5-background),\n \"6\": var(--color-rainbow-6-background),\n \"7\": var(--color-rainbow-7-background),\n \"8\": var(--color-rainbow-8-background),\n \"9\": var(--color-rainbow-9-background),\n \"10\": var(--color-rainbow-10-background)\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n height: fit-content;\n width: fit-content;\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n gap: var(--badge-gap-x);\n}\n\n@mixin badge-color($badge-number) {\n color: map.get($color-rainbow-text, $badge-number);\n background-color: map.get($color-rainbow-background, $badge-number);\n .close {\n @include focus-ring(var(--color-rainbow-#{$badge-number}-content), 0.2);\n }\n}\n\n@mixin icon-color($badge-number) {\n color: map.get($color-rainbow-icon, $badge-number);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$icon-config {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$icon-config, \"xs\"), size),\n map.get(map.get(icon.$icon-config, \"xs\"), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/\n @slot leading-icon - Icon before the label.\n /\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n /\n @Prop()\n readonly dismissal: boolean = false;\n\n /\n The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n /\n @Prop()\n readonly icon: string;\n\n /\n The location of the icon in the badge.\n * @deprecated only leadIcon now.\n /\n @Prop({ reflect: true })\n readonly iconLocation: 'left' \| 'right';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The color of the badge. Use a string between 1 to 10\n /\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /\n Main content of the badge.\n /\n @Prop({ reflect: true })\n readonly label?: string \| null = null;\n\n /\n The lead icon of the badge.\n /\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string \| null = null;\n\n /\n Whether the badge is dismissible.\n /\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /\n Controls the visibility of the badge. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean = this.hidden;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the badge is dismissed.\n /\n @Event()\n closeClicked: EventEmitter<MouseEvent>;\n\n /\n Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n /\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n /\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /\n Handles the icon prop change.\n * @param {string} icon - The new icon value.\n /\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /\n Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n /\n * Component will load.\n /\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the close button click.\n * @param {MouseEvent} originalEvent - The original event.\n /\n private readonly handleClose = (originalEvent?: MouseEvent) => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit(originalEvent);\n };\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible \|\| this.label,\n 'visually-hidden': this._isHidden,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && (\n <nv-icon\n slot=\"leading-icon\"\n name={this.leadIcon}\n size=\"sm\"\n ></nv-icon>\n )}\n </slot>\n {this.label && <span>{this.label}</span>}\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-badge.js","mappings":"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","names":["NvBadge"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/styles/mixins\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants /\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/ Define maps for color-related variables /\n$color-rainbow-text: (\n \"1\": var(--color-rainbow-1-text),\n \"2\": var(--color-rainbow-2-text),\n \"3\": var(--color-rainbow-3-text),\n \"4\": var(--color-rainbow-4-text),\n \"5\": var(--color-rainbow-5-text),\n \"6\": var(--color-rainbow-6-text),\n \"7\": var(--color-rainbow-7-text),\n \"8\": var(--color-rainbow-8-text),\n \"9\": var(--color-rainbow-9-text),\n \"10\": var(--color-rainbow-10-text)\n);\n\n$color-rainbow-icon: (\n \"1\": var(--color-rainbow-1-icon),\n \"2\": var(--color-rainbow-2-icon),\n \"3\": var(--color-rainbow-3-icon),\n \"4\": var(--color-rainbow-4-icon),\n \"5\": var(--color-rainbow-5-icon),\n \"6\": var(--color-rainbow-6-icon),\n \"7\": var(--color-rainbow-7-icon),\n \"8\": var(--color-rainbow-8-icon),\n \"9\": var(--color-rainbow-9-icon),\n \"10\": var(--color-rainbow-10-icon)\n);\n\n$color-rainbow-background: (\n \"1\": var(--color-rainbow-1-background),\n \"2\": var(--color-rainbow-2-background),\n \"3\": var(--color-rainbow-3-background),\n \"4\": var(--color-rainbow-4-background),\n \"5\": var(--color-rainbow-5-background),\n \"6\": var(--color-rainbow-6-background),\n \"7\": var(--color-rainbow-7-background),\n \"8\": var(--color-rainbow-8-background),\n \"9\": var(--color-rainbow-9-background),\n \"10\": var(--color-rainbow-10-background)\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n height: fit-content;\n width: fit-content;\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n gap: var(--badge-gap-x);\n}\n\n@mixin badge-color($badge-number) {\n color: map.get($color-rainbow-text, $badge-number);\n background-color: map.get($color-rainbow-background, $badge-number);\n .close {\n @include focus-ring(var(--color-rainbow-#{$badge-number}-content), 0.2);\n }\n}\n\n@mixin icon-color($badge-number) {\n color: map.get($color-rainbow-icon, $badge-number);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, \"xs\"), size),\n map.get(map.get(icon.$size-variants, \"xs\"), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/\n @slot leading-icon - Icon before the label.\n /\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n /\n @Prop()\n readonly dismissal: boolean = false;\n\n /\n The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n /\n @Prop()\n readonly icon: string;\n\n /\n The location of the icon in the badge.\n * @deprecated only leadIcon now.\n /\n @Prop({ reflect: true })\n readonly iconLocation: 'left' \| 'right';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The color of the badge. Use a string between 1 to 10\n /\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /\n Main content of the badge.\n /\n @Prop({ reflect: true })\n readonly label?: string \| null = null;\n\n /\n The lead icon of the badge.\n /\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string \| null = null;\n\n /\n Whether the badge is dismissible.\n /\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /\n Controls the visibility of the badge. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean = this.hidden;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the badge is dismissed.\n /\n @Event()\n closeClicked: EventEmitter<MouseEvent>;\n\n /\n Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n /\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n /\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /\n Handles the icon prop change.\n * @param {string} icon - The new icon value.\n /\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /\n Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n /\n * Component will load.\n /\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the close button click.\n * @param {MouseEvent} originalEvent - The original event.\n /\n private readonly handleClose = (originalEvent?: MouseEvent) => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit(originalEvent);\n };\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible \|\| this.label,\n 'visually-hidden': this._isHidden,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && (\n <nv-icon\n slot=\"leading-icon\"\n name={this.leadIcon}\n size=\"sm\"\n ></nv-icon>\n )}\n </slot>\n {this.label && <span>{this.label}</span>}\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-base.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-0caa4741.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-3b209e94.js';
 const classes = {
     'w-full': 'w-full',
@@ -18,7 +18,6 @@ const NvBaseComponent = /*@__PURE__*/ proxyCustomElement(class NvBaseComponent e
     }
     componentDidLoad() {
         this.mutationObserver = new MutationObserver(mutations => {
-            console.log(mutations);
             mutations.forEach(mutation => {
                 if (mutation.type === 'attributes') {
                     const target = mutation.target;
@@ -62,7 +61,7 @@ const NvBaseComponent = /*@__PURE__*/ proxyCustomElement(class NvBaseComponent e
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b337eb1cfbe80ce8cefdb00a9d0d1fbb153869ba', style: { display: 'block' } }, h("slot", { key: '575c8605510de2b97bf202809492dd5e2ba4a285' })));
+        return (h(Host, { key: '81da4e7fd653192079ab22a607d1f525b504f3e4', style: { display: 'block' } }, h("slot", { key: 'e766e4b073b16d367c473b02c94448cf835a4921' })));
     }
     get el() { return this; }
 }, [4, "nv-base"]);

package/dist/components/nv-base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-base.js","mappings":";;AAEA,MAAM,OAAO,GAA2B;IACtC,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,WAAW;IACxB,aAAa,EAAE,aAAa;CAC7B,CAAC;MAUW,eAAe;;;;;;;IAQ1B,iBAAiB;QACf,IAAI,CAAC,2BAA2B,EAAE,CAAC;KACpC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,SAAS;YACpD,~~OAAO,CAAC,GAAG,CAAC,~~SAAS,CAAC,~~CAAC;YACvB,SAAS,CAAC,~~OAAO,CAAC,QAAQ;gBACxB,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAqB,CAAC;oBAE9C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa;wBACxC,IAAI,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;4BACtC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;yBAC9C;6BAAM;4BACL,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;yBACjD;qBACF,CAAC,CAAC;iBACJ;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;SACpC;KACF;;;;IAMO,2BAA2B;QACjC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa;YACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC;YAChE,QAAQ,CAAC,OAAO,CAAC,OAAO;gBACtB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;aAC/C,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAEO,eAAe;QACrB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACrC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;YACrC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAC/B,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-base/nv-base.tsx"],"sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\nconst classes: Record<string, string> = {\n 'w-full': 'w-full',\n 'wFull': 'w-full',\n 'is-active': 'is-active',\n 'is-selected': 'is-selected',\n};\n\n/*\n @slot default - render children\n * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.\n /\n@Component({\n tag: 'nv-base',\n shadow: false,\n})\nexport class NvBaseComponent {\n @Element() el: HTMLNvBaseElement;\n\n private mutationObserver: MutationObserver;\n\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.applyClassesOnInitialRender();\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(mutations => {\n ~~console.log(~~mutations~~);\n mutations~~.forEach(mutation => {\n if (mutation.type === 'attributes') {\n const target = mutation.target as HTMLElement;\n\n Object.keys(classes).forEach(attributeName => {\n if (target.hasAttribute(attributeName)) {\n target.classList.add(classes[attributeName]);\n } else {\n target.classList.remove(classes[attributeName]);\n }\n });\n }\n });\n });\n this.observeElements();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region METHODS\n\n private applyClassesOnInitialRender() {\n Object.keys(classes).forEach(attributeName => {\n const elements = this.el.querySelectorAll(`[${attributeName}]`);\n elements.forEach(element => {\n element.classList.add(classes[attributeName]);\n });\n });\n }\n\n private observeElements() {\n this.mutationObserver.observe(this.el, {\n attributes: true,\n attributeFilter: Object.keys(classes),\n subtree: true,\n });\n }\n\n //#endregion METHODS\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host style={{ display: 'block' }}>\n <slot></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-base.js","mappings":";;AAEA,MAAM,OAAO,GAA2B;IACtC,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,WAAW;IACxB,aAAa,EAAE,aAAa;CAC7B,CAAC;MAUW,eAAe;;;;;;;IAQ1B,iBAAiB;QACf,IAAI,CAAC,2BAA2B,EAAE,CAAC;KACpC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,SAAS;YACpD,SAAS,CAAC,OAAO,CAAC,QAAQ;gBACxB,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAqB,CAAC;oBAE9C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa;wBACxC,IAAI,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;4BACtC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;yBAC9C;6BAAM;4BACL,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;yBACjD;qBACF,CAAC,CAAC;iBACJ;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;SACpC;KACF;;;;IAMO,2BAA2B;QACjC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa;YACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC;YAChE,QAAQ,CAAC,OAAO,CAAC,OAAO;gBACtB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;aAC/C,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAEO,eAAe;QACrB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACrC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;YACrC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAC/B,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-base/nv-base.tsx"],"sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\nconst classes: Record<string, string> = {\n 'w-full': 'w-full',\n 'wFull': 'w-full',\n 'is-active': 'is-active',\n 'is-selected': 'is-selected',\n};\n\n/*\n @slot default - render children\n * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.\n /\n@Component({\n tag: 'nv-base',\n shadow: false,\n})\nexport class NvBaseComponent {\n @Element() el: HTMLNvBaseElement;\n\n private mutationObserver: MutationObserver;\n\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.applyClassesOnInitialRender();\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes') {\n const target = mutation.target as HTMLElement;\n\n Object.keys(classes).forEach(attributeName => {\n if (target.hasAttribute(attributeName)) {\n target.classList.add(classes[attributeName]);\n } else {\n target.classList.remove(classes[attributeName]);\n }\n });\n }\n });\n });\n this.observeElements();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region METHODS\n\n private applyClassesOnInitialRender() {\n Object.keys(classes).forEach(attributeName => {\n const elements = this.el.querySelectorAll(`[${attributeName}]`);\n elements.forEach(element => {\n element.classList.add(classes[attributeName]);\n });\n });\n }\n\n private observeElements() {\n this.mutationObserver.observe(this.el, {\n attributes: true,\n attributeFilter: Object.keys(classes),\n subtree: true,\n });\n }\n\n //#endregion METHODS\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host style={{ display: 'block' }}>\n <slot></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-breadcrumb.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface NvBreadcrumb extends Components.NvBreadcrumb, HTMLElement {}
+export const NvBreadcrumb: {
+    prototype: NvBreadcrumb;
+    new (): NvBreadcrumb;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-breadcrumb.js ADDED Viewed

@@ -0,0 +1,83 @@
+import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-3b209e94.js';
+import { d as defineCustomElement$4 } from './p-a61d9ce8.js';
+import { d as defineCustomElement$3 } from './p-ce67d70c.js';
+import { d as defineCustomElement$2 } from './p-e7131c30.js';
+const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:inherit;gap:var(--spacing-1)}nv-breadcrumb>a{display:inline-flex;align-self:center;color:inherit}nv-breadcrumb[current]:not([current=false]){color:var(--color-interaction-link-high-text)}";
+const NvBreadcrumbStyle0 = nvBreadcrumbCss;
+const NvBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NvBreadcrumb extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs
+         * in a dropdown. Use default for a single item. When passing multiple items
+         * as collapsed, make sure to wrap you links in list tags
+         */
+        this.type = 'default';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        // Force a re-render to pass the popoverTrigger ref to the popovers
+        if (this.type === 'collapsed')
+            forceUpdate(this);
+    }
+    componentWillLoad() {
+        if (this.type === 'default' && this.tooltip) {
+            this.popoverTrigger = Array.from(this.el.children).find(child => child.getAttribute('slot') === null);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '44aca9cb5e3a794ca8bae895b96c0c8bba146fa9', role: "listitem", "aria-current": this.current ? 'location' : undefined }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '4a3ab4872fe69a361be4699a54ecb17175fe7a77', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: '286cc8222a28f70c72e4d4496ba105c82721a2fe', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: 'c3bc55b938e5a3ec5f90f5f50aefa9fcb75463f8', slot: "content" }, h("slot", { key: '2533b6026d20fc818caa3146580b1ffd4d0aa98c' })))), h("slot", { key: '4f3c160421ca81596f7c131592b797b544f43f98', name: "separator" }, h("nv-icon", { key: 'e7bdab55acbba96b7149e929affd6b07acb13afb', name: 'chevron-right', "data-scope": "separator" }))));
+    }
+    get el() { return this; }
+    static get style() { return NvBreadcrumbStyle0; }
+}, [4, "nv-breadcrumb", {
+        "type": [513],
+        "tooltip": [513],
+        "current": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-breadcrumb", "nv-icon", "nv-popover", "nv-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-breadcrumb":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvBreadcrumb$1);
+            }
+            break;
+        case "nv-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "nv-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nv-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const NvBreadcrumb = NvBreadcrumb$1;
+const defineCustomElement = defineCustomElement$1;
+export { NvBreadcrumb, defineCustomElement };
+//# sourceMappingURL=nv-breadcrumb.js.map

package/dist/components/nv-breadcrumb.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"nv-breadcrumb.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,iPAAiP,CAAC;AAC1Q,2BAAe,eAAe;;MCWjBA,cAAY;IALzB;;;;;;;;;;QAkBW,SAAI,GAA4B,SAAS,CAAC;KAgFpD;;;;IA5DC,gBAAgB;;QAEd,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;SACH;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,IAElD,IAAI,CAAC,IAAI,KAAK,WAAW,IACxB,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,KAE3D,eAAa,CACd,EAEA,IAAI,CAAC,OAAO,KACX,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf,EAEA,IAAI,CAAC,IAAI,KAAK,WAAW,KACxB,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,IAEnC,2DAAI,IAAI,EAAC,SAAS,IAChB,8DAAa,CACV,CACM,CACd,EAED,6DAAM,IAAI,EAAC,WAAW,IACpB,gEACE,IAAI,EAAE,eAAkC,gBAC7B,WAAW,GACb,CACN,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvBreadcrumb"],"sources":["src/components/nv-breadcrumb/nv-breadcrumb.scss?tag=nv-breadcrumb","src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"sourcesContent":["@mixin root-styles() {\n display: flex;\n align-items: center;\n color: inherit;\n gap: var(--spacing-1);\n}\n\n@mixin link-styles() {\n display: inline-flex;\n align-self: center;\n color: inherit;\n}\n\n@mixin current-styles() {\n color: var(--color-interaction-link-high-text);\n}\n\nnv-breadcrumb {\n @include root-styles();\n\n & > a {\n @include link-styles();\n }\n\n &[current]:not([current=\"false\"]) {\n @include current-styles();\n }\n}\n","import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n * @slot separator - The separator between breadcrumb items.\n */\n@Component({\n tag: 'nv-breadcrumb',\n styleUrl: 'nv-breadcrumb.scss',\n shadow: false,\n})\nexport class NvBreadcrumb {\n @Element() el: HTMLNvBreadcrumbElement;\n private popoverTrigger!: Element;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n * in a dropdown. Use default for a single item. When passing multiple items\n * as collapsed, make sure to wrap you links in list tags\n */\n @Prop({ reflect: true })\n readonly type: 'collapsed' | 'default' = 'default';\n\n /**\n * Add an optional tooltip to provide extra information about the breadcrumb.\n */\n @Prop({ reflect: true })\n readonly tooltip: string;\n\n /**\n * Use this to highlight the breadcrumb as the current page in your\n * navigation. It also makes the page clearer to screen readers with\n * aria-current=\"location\".\n */\n @Prop({ reflect: true })\n readonly current: boolean;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad() {\n // Force a re-render to pass the popoverTrigger ref to the popovers\n if (this.type === 'collapsed') forceUpdate(this);\n }\n\n componentWillLoad() {\n if (this.type === 'default' && this.tooltip) {\n this.popoverTrigger = Array.from(this.el.children).find(\n child => child.getAttribute('slot') === null,\n );\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"listitem\"\n aria-current={this.current ? 'location' : undefined}\n >\n {this.type === 'collapsed' ? (\n <button ref={el => (this.popoverTrigger = el)}>...</button>\n ) : (\n <slot></slot>\n )}\n\n {this.tooltip && (\n <nv-tooltip\n message={this.tooltip}\n triggerElement={this.popoverTrigger}\n placement=\"top\"\n ></nv-tooltip>\n )}\n\n {this.type === 'collapsed' && (\n <nv-popover\n triggerMode=\"click\"\n groupName=\"breadcrumbs\"\n triggerElement={this.popoverTrigger}\n >\n <ul slot=\"content\">\n <slot></slot>\n </ul>\n </nv-popover>\n )}\n\n <slot name=\"separator\">\n <nv-icon\n name={'chevron-right' satisfies IconName}\n data-scope=\"separator\"\n ></nv-icon>\n </slot>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-breadcrumbs.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface NvBreadcrumbs extends Components.NvBreadcrumbs, HTMLElement {}
+export const NvBreadcrumbs: {
+    prototype: NvBreadcrumbs;
+    new (): NvBreadcrumbs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-breadcrumbs.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-3b209e94.js';
+const nvBreadcrumbsCss = "nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";
+const NvBreadcrumbsStyle0 = nvBreadcrumbsCss;
+const NvBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class NvBreadcrumbs extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '5ab0f09cb86a92464ffcd06d8129543539bdcddf', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: 'a7624a2400d9a91ec477694bbd3600960e198981' }, h("slot", { key: '7c4102ceebe110377bf212e0695bdec6b455ea74' }))));
+    }
+    static get style() { return NvBreadcrumbsStyle0; }
+}, [4, "nv-breadcrumbs"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-breadcrumbs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-breadcrumbs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvBreadcrumbs$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const NvBreadcrumbs = NvBreadcrumbs$1;
+const defineCustomElement = defineCustomElement$1;
+export { NvBreadcrumbs, defineCustomElement };
+//# sourceMappingURL=nv-breadcrumbs.js.map