@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/cjs/timeline.animation-dbb9c5ea.js

@@ -0,0 +1,107 @@
+'use strict';
+
+const fade_animation = require('./fade.animation-0d33d198.js');
+
+const useCollapse = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = fade_animation.index(node);
+    /**
+     * Will set the overflow to hidden, and animate the max height to 0. Make sure
+     * the element has no border or y padding set, otherwise the animation will
+     * not work as expected.
+     */
+    function collapse() {
+        return new Promise(resolve => {
+            const height = node.getBoundingClientRect().height;
+            nodeStyler.set({ overflow: 'hidden' });
+            fade_animation.animate({
+                from: height,
+                to: 0,
+                duration,
+                onUpdate: value => {
+                    nodeStyler.set({
+                        maxHeight: value,
+                    });
+                },
+                onComplete: () => {
+                    resolve();
+                },
+            });
+        });
+    }
+    /**
+     * Apply the collapsed styles without animating, useful when initial state
+     * is collapsed.
+     */
+    function setCollapsed() {
+        node.style.maxHeight = '0';
+        node.style.overflow = 'hidden';
+    }
+    /**
+     * Apply the expanded styles without animating, useful when initial state
+     * is expanded.
+     */
+    function setExpanded() {
+        node.style.maxHeight = '';
+        node.style.overflow = '';
+    }
+    /**
+     * Will set the overflow to hidden, and animate the max height to the value
+     * of the scrollHeight. Make sure the element has no border or y padding set,
+     * otherwise the animation will not work as expected. Once complete, the
+     * max-height and overflow style properties will be removed.
+     */
+    function expand() {
+        return new Promise(resolve => {
+            const scrollHeight = node.scrollHeight;
+            nodeStyler.set({
+                overflow: 'hidden',
+            });
+            fade_animation.animate({
+                from: 0,
+                to: scrollHeight,
+                duration,
+                onUpdate: value => {
+                    nodeStyler.set({
+                        maxHeight: value,
+                    });
+                },
+                onComplete: () => {
+                    node.style.removeProperty('max-height');
+                    node.style.removeProperty('overflow');
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        collapse,
+        expand,
+        setCollapsed,
+        setExpanded,
+    };
+};
+
+/**
+ * Will execute a series of animation promises in sequence.
+ * This is useful for chaining animations where each step depends on the
+ * previous one completing before starting the next.
+ *
+ * @param {Array<() => Promise<void>>} animations - The array of animation functions.
+ * @returns {Object} - An object with a `start` method to begin the timeline.
+ *
+ * @example
+ * const { fadeOut } = useFade(this.ref);
+ * const { collapse } = useCollapse(this.ref);
+ *
+ * timeline(fadeOut, collapse).start();
+ */
+const timeline = (...animations) => ({
+    start: () => {
+        return animations.reduce((promise, animation) => promise.then(() => animation()), Promise.resolve());
+    },
+});
+
+exports.timeline = timeline;
+exports.useCollapse = useCollapse;
+
+//# sourceMappingURL=timeline.animation-dbb9c5ea.js.map

package/dist/cjs/timeline.animation-dbb9c5ea.js.map

@@ -0,0 +1 @@
+{"file":"timeline.animation-dbb9c5ea.js","mappings":";;;;MAQM,WAAW,GAAG,CAClB,IAAiB,EACjB,EAAE,QAAQ,KAAsB,EAAE,QAAQ,EAAE,GAAG,EAAE;IAEjD,MAAM,UAAU,GAAGA,oBAAM,CAAC,IAAI,CAAC,CAAC;;;;;;IAOhC,SAAS,QAAQ;QACf,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAEnD,UAAU,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YAEvCC,sBAAO,CAAC;gBACN,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,CAAC;gBACL,QAAQ;gBACR,QAAQ,EAAE,KAAK;oBACb,UAAU,CAAC,GAAG,CAAC;wBACb,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAC;iBACJ;gBACD,UAAU,EAAE;oBACV,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;IAMD,SAAS,YAAY;QACnB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAChC;;;;;IAMD,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;KAC1B;;;;;;;IAQD,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YACvC,UAAU,CAAC,GAAG,CAAC;gBACb,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;YAEHA,sBAAO,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,EAAE,EAAE,YAAY;gBAChB,QAAQ;gBACR,QAAQ,EAAE,KAAK;oBACb,UAAU,CAAC,GAAG,CAAC;wBACb,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAC;iBACJ;gBACD,UAAU,EAAE;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;oBACxC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;oBACtC,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,OAAO;QACL,QAAQ;QACR,MAAM;QACN,YAAY;QACZ,WAAW;KACZ,CAAC;AACJ;;AChGA;;;;;;;;;;;;;;MAcM,QAAQ,GAAG,CAAC,GAAG,UAAsC,MAAM;IAC/D,KAAK,EAAE;QACL,OAAO,UAAU,CAAC,MAAM,CACtB,CAAC,OAAO,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,MAAM,SAAS,EAAE,CAAC,EACvD,OAAO,CAAC,OAAO,EAAE,CAClB,CAAC;KACH;CACF;;;;;","names":["styler","animate"],"sources":["src/animations/collapse.animation.ts","src/animations/timeline.animation.ts"],"sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type CollapseOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useCollapse = (\n  node: HTMLElement,\n  { duration }: CollapseOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will set the overflow to hidden, and animate the max height to 0. Make sure\n   * the element has no border or y padding set, otherwise the animation will\n   * not work as expected.\n   */\n  function collapse() {\n    return new Promise<void>(resolve => {\n      const height = node.getBoundingClientRect().height;\n\n      nodeStyler.set({ overflow: 'hidden' });\n\n      animate({\n        from: height,\n        to: 0,\n        duration,\n        onUpdate: value => {\n          nodeStyler.set({\n            maxHeight: value,\n          });\n        },\n        onComplete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  /**\n   * Apply the collapsed styles without animating, useful when initial state\n   * is collapsed.\n   */\n  function setCollapsed() {\n    node.style.maxHeight = '0';\n    node.style.overflow = 'hidden';\n  }\n\n  /**\n   * Apply the expanded styles without animating, useful when initial state\n   * is expanded.\n   */\n  function setExpanded() {\n    node.style.maxHeight = '';\n    node.style.overflow = '';\n  }\n\n  /**\n   * Will set the overflow to hidden, and animate the max height to the value\n   * of the scrollHeight. Make sure the element has no border or y padding set,\n   * otherwise the animation will not work as expected. Once complete, the\n   * max-height and overflow style properties will be removed.\n   */\n  function expand() {\n    return new Promise<void>(resolve => {\n      const scrollHeight = node.scrollHeight;\n      nodeStyler.set({\n        overflow: 'hidden',\n      });\n\n      animate({\n        from: 0,\n        to: scrollHeight,\n        duration,\n        onUpdate: value => {\n          nodeStyler.set({\n            maxHeight: value,\n          });\n        },\n        onComplete: () => {\n          node.style.removeProperty('max-height');\n          node.style.removeProperty('overflow');\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    collapse,\n    expand,\n    setCollapsed,\n    setExpanded,\n  };\n};\n\nexport { useCollapse };\n","/**\n * Will execute a series of animation promises in sequence.\n * This is useful for chaining animations where each step depends on the\n * previous one completing before starting the next.\n *\n * @param {Array<() => Promise<void>>} animations - The array of animation functions.\n * @returns {Object} - An object with a `start` method to begin the timeline.\n *\n * @example\n * const { fadeOut } = useFade(this.ref);\n * const { collapse } = useCollapse(this.ref);\n *\n * timeline(fadeOut, collapse).start();\n */\nconst timeline = (...animations: Array<() => Promise<void>>) => ({\n  start: () => {\n    return animations.reduce(\n      (promise, animation) => promise.then(() => animation()),\n      Promise.resolve(),\n    );\n  },\n});\n\nexport { timeline };\n"],"version":3}

package/dist/cjs/v4-7014b8b0.js

@@ -0,0 +1,67 @@
+'use strict';
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+var byteToHex = [];
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  //
+  // Note to future-self: No, you can't remove the `toLowerCase()` call.
+  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+  return getRandomValues(rnds8);
+}
+
+var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)();
+
+  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80;
+
+  // Copy bytes to buffer, if provided
+  if (buf) {
+    offset = offset || 0;
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+    return buf;
+  }
+  return unsafeStringify(rnds);
+}
+
+exports.v4 = v4;
+
+//# sourceMappingURL=v4-7014b8b0.js.map

package/dist/cjs/v4-7014b8b0.js.map

@@ -0,0 +1 @@
+{"file":"v4-7014b8b0.js","mappings":"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","names":[],"sources":["../../node_modules/uuid/dist/esm-browser/stringify.js","../../node_modules/uuid/dist/esm-browser/rng.js","../../node_modules/uuid/dist/esm-browser/native.js","../../node_modules/uuid/dist/esm-browser/v4.js"],"sourcesContent":["import validate from './validate.js';\n\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\nvar byteToHex = [];\nfor (var i = 0; i < 256; ++i) {\n  byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n  // Note: Be careful editing this code!  It's been tuned for performance\n  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n  //\n  // Note to future-self: No, you can't remove the `toLowerCase()` call.\n  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351\n  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n  var uuid = unsafeStringify(arr, offset);\n  // Consistency check for valid UUID.  If this throws, it's likely due to one\n  // of the following:\n  // - One or more input array values don't map to a hex octet (leading to\n  // \"undefined\" in the uuid)\n  // - Invalid input values for the RFC `version` or `variant` fields\n  if (!validate(uuid)) {\n    throw TypeError('Stringified UUID is invalid');\n  }\n  return uuid;\n}\nexport default stringify;","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\n\nvar getRandomValues;\nvar rnds8 = new Uint8Array(16);\nexport default function rng() {\n  // lazy load so that environments that need to polyfill have a chance to do so\n  if (!getRandomValues) {\n    // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation.\n    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);\n    if (!getRandomValues) {\n      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n    }\n  }\n  return getRandomValues(rnds8);\n}","var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default {\n  randomUUID\n};","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n  if (native.randomUUID && !buf && !options) {\n    return native.randomUUID();\n  }\n  options = options || {};\n  var rnds = options.random || (options.rng || rng)();\n\n  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n  rnds[6] = rnds[6] & 0x0f | 0x40;\n  rnds[8] = rnds[8] & 0x3f | 0x80;\n\n  // Copy bytes to buffer, if provided\n  if (buf) {\n    offset = offset || 0;\n    for (var i = 0; i < 16; ++i) {\n      buf[offset + i] = rnds[i];\n    }\n    return buf;\n  }\n  return unsafeStringify(rnds);\n}\nexport default v4;"],"version":3}

package/dist/collection/animations/collapse.animation.js

@@ -0,0 +1,82 @@
+import { animate } from "popmotion";
+import styler from "stylefire";
+const useCollapse = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = styler(node);
+    /**
+     * Will set the overflow to hidden, and animate the max height to 0. Make sure
+     * the element has no border or y padding set, otherwise the animation will
+     * not work as expected.
+     */
+    function collapse() {
+        return new Promise(resolve => {
+            const height = node.getBoundingClientRect().height;
+            nodeStyler.set({ overflow: 'hidden' });
+            animate({
+                from: height,
+                to: 0,
+                duration,
+                onUpdate: value => {
+                    nodeStyler.set({
+                        maxHeight: value,
+                    });
+                },
+                onComplete: () => {
+                    resolve();
+                },
+            });
+        });
+    }
+    /**
+     * Apply the collapsed styles without animating, useful when initial state
+     * is collapsed.
+     */
+    function setCollapsed() {
+        node.style.maxHeight = '0';
+        node.style.overflow = 'hidden';
+    }
+    /**
+     * Apply the expanded styles without animating, useful when initial state
+     * is expanded.
+     */
+    function setExpanded() {
+        node.style.maxHeight = '';
+        node.style.overflow = '';
+    }
+    /**
+     * Will set the overflow to hidden, and animate the max height to the value
+     * of the scrollHeight. Make sure the element has no border or y padding set,
+     * otherwise the animation will not work as expected. Once complete, the
+     * max-height and overflow style properties will be removed.
+     */
+    function expand() {
+        return new Promise(resolve => {
+            const scrollHeight = node.scrollHeight;
+            nodeStyler.set({
+                overflow: 'hidden',
+            });
+            animate({
+                from: 0,
+                to: scrollHeight,
+                duration,
+                onUpdate: value => {
+                    nodeStyler.set({
+                        maxHeight: value,
+                    });
+                },
+                onComplete: () => {
+                    node.style.removeProperty('max-height');
+                    node.style.removeProperty('overflow');
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        collapse,
+        expand,
+        setCollapsed,
+        setExpanded,
+    };
+};
+export { useCollapse };
+//# sourceMappingURL=collapse.animation.js.map

package/dist/collection/animations/collapse.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.animation.js","sourceRoot":"","sources":["../../src/animations/collapse.animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,MAAM,MAAM,WAAW,CAAC;AAO/B,MAAM,WAAW,GAAG,CAClB,IAAiB,EACjB,EAAE,QAAQ,KAAsB,EAAE,QAAQ,EAAE,GAAG,EAAE,EACjD,EAAE;IACF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC;;;;OAIG;IACH,SAAS,QAAQ;QACf,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAEnD,UAAU,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YAEvC,OAAO,CAAC;gBACN,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,CAAC;gBACL,QAAQ;gBACR,QAAQ,EAAE,KAAK,CAAC,EAAE;oBAChB,UAAU,CAAC,GAAG,CAAC;wBACb,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAC;gBACL,CAAC;gBACD,UAAU,EAAE,GAAG,EAAE;oBACf,OAAO,EAAE,CAAC;gBACZ,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,SAAS,YAAY;QACnB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACjC,CAAC;IAED;;;OAGG;IACH,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED;;;;;OAKG;IACH,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YACvC,UAAU,CAAC,GAAG,CAAC;gBACb,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;YAEH,OAAO,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,EAAE,EAAE,YAAY;gBAChB,QAAQ;gBACR,QAAQ,EAAE,KAAK,CAAC,EAAE;oBAChB,UAAU,CAAC,GAAG,CAAC;wBACb,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAC;gBACL,CAAC;gBACD,UAAU,EAAE,GAAG,EAAE;oBACf,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;oBACxC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;oBACtC,OAAO,EAAE,CAAC;gBACZ,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,QAAQ;QACR,MAAM;QACN,YAAY;QACZ,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type CollapseOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useCollapse = (\n  node: HTMLElement,\n  { duration }: CollapseOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will set the overflow to hidden, and animate the max height to 0. Make sure\n   * the element has no border or y padding set, otherwise the animation will\n   * not work as expected.\n   */\n  function collapse() {\n    return new Promise<void>(resolve => {\n      const height = node.getBoundingClientRect().height;\n\n      nodeStyler.set({ overflow: 'hidden' });\n\n      animate({\n        from: height,\n        to: 0,\n        duration,\n        onUpdate: value => {\n          nodeStyler.set({\n            maxHeight: value,\n          });\n        },\n        onComplete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  /**\n   * Apply the collapsed styles without animating, useful when initial state\n   * is collapsed.\n   */\n  function setCollapsed() {\n    node.style.maxHeight = '0';\n    node.style.overflow = 'hidden';\n  }\n\n  /**\n   * Apply the expanded styles without animating, useful when initial state\n   * is expanded.\n   */\n  function setExpanded() {\n    node.style.maxHeight = '';\n    node.style.overflow = '';\n  }\n\n  /**\n   * Will set the overflow to hidden, and animate the max height to the value\n   * of the scrollHeight. Make sure the element has no border or y padding set,\n   * otherwise the animation will not work as expected. Once complete, the\n   * max-height and overflow style properties will be removed.\n   */\n  function expand() {\n    return new Promise<void>(resolve => {\n      const scrollHeight = node.scrollHeight;\n      nodeStyler.set({\n        overflow: 'hidden',\n      });\n\n      animate({\n        from: 0,\n        to: scrollHeight,\n        duration,\n        onUpdate: value => {\n          nodeStyler.set({\n            maxHeight: value,\n          });\n        },\n        onComplete: () => {\n          node.style.removeProperty('max-height');\n          node.style.removeProperty('overflow');\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    collapse,\n    expand,\n    setCollapsed,\n    setExpanded,\n  };\n};\n\nexport { useCollapse };\n"]}

package/dist/collection/animations/fade.animation.js

@@ -0,0 +1,66 @@
+import { animate } from "popmotion";
+import styler from "stylefire";
+const useFade = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = styler(node);
+    /**
+     * Will animate the opacity to 1, and removes the opacity style attribute once
+     * complete.
+     */
+    function fadeIn() {
+        return new Promise(resolve => {
+            animate({
+                from: { opacity: 0 },
+                to: { opacity: 1 },
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ opacity: latest.opacity });
+                },
+                onComplete() {
+                    resolve();
+                    node.style.removeProperty('opacity');
+                },
+            });
+        });
+    }
+    /**
+     * Applies the fadeOut styles without animating, useful when initial state
+     * is hidden.
+     */
+    function setFadeOut() {
+        node.style.opacity = '0';
+    }
+    /**
+     * Applies the fadeIn styles without animating, useful when initial state
+     * is visible.
+     */
+    function setFadeIn() {
+        node.style.opacity = '1';
+    }
+    /**
+     * Will animate the opacity to 0, once complete, the opacity style attribute
+     * will stay on the element.
+     */
+    function fadeOut() {
+        return new Promise(resolve => {
+            animate({
+                from: { opacity: 1 },
+                to: { opacity: 0 },
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ opacity: latest.opacity });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        fadeIn,
+        fadeOut,
+        setFadeOut,
+        setFadeIn,
+    };
+};
+export { useFade };
+//# sourceMappingURL=fade.animation.js.map

package/dist/collection/animations/fade.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade.animation.js","sourceRoot":"","sources":["../../src/animations/fade.animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,MAAM,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,GAAG,CACd,IAAiB,EACjB,EAAE,QAAQ,KAAkB,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7C,EAAE;IACF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBAClB,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC9C,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;gBACvC,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACH,SAAS,SAAS;QAChB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACH,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBAClB,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC9C,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;gBACZ,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,SAAS;KACV,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type FadeOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useFade = (\n  node: HTMLElement,\n  { duration }: FadeOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the opacity to 1, and removes the opacity style attribute once\n   * complete.\n   */\n  function fadeIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ opacity: latest.opacity });\n        },\n        onComplete() {\n          resolve();\n          node.style.removeProperty('opacity');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the fadeOut styles without animating, useful when initial state\n   * is hidden.\n   */\n  function setFadeOut() {\n    node.style.opacity = '0';\n  }\n\n  /**\n   * Applies the fadeIn styles without animating, useful when initial state\n   * is visible.\n   */\n  function setFadeIn() {\n    node.style.opacity = '1';\n  }\n\n  /**\n   * Will animate the opacity to 0, once complete, the opacity style attribute\n   * will stay on the element.\n   */\n  function fadeOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ opacity: latest.opacity });\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    fadeIn,\n    fadeOut,\n    setFadeOut,\n    setFadeIn,\n  };\n};\n\nexport { useFade };\n"]}

package/dist/collection/animations/grow.animation.js

@@ -0,0 +1,87 @@
+import { animate } from "popmotion";
+import styler from "stylefire";
+const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
+    const nodeStyler = styler(node);
+    /**
+     * Will animate the scale and optionally the opacity to make the element grow and fade in,
+     * and removes the scale and opacity style attributes once complete.
+     */
+    function growIn() {
+        return new Promise(resolve => {
+            animate({
+                from: { opacity: hasFade ? 0 : 1, scale: amount },
+                to: { opacity: 1, scale: 1 },
+                duration,
+                onUpdate(latest) {
+                    const updates = {
+                        scale: latest.scale,
+                    };
+                    if (hasFade) {
+                        updates['opacity'] = latest.opacity;
+                    }
+                    nodeStyler.set(updates);
+                },
+                onComplete() {
+                    resolve();
+                    if (hasFade) {
+                        node.style.removeProperty('opacity');
+                    }
+                    node.style.removeProperty('transform');
+                },
+            });
+        });
+    }
+    /**
+     * Applies the growOut styles without animating, useful when the initial
+     * state is hidden.
+     */
+    function setGrowOut() {
+        node.style.transform = `scale(${amount})`;
+        if (hasFade) {
+            node.style.opacity = '0';
+        }
+    }
+    /**
+     * Applies the growIn styles without animating, useful when the initial
+     * state is visible.
+     */
+    function setGrowIn() {
+        node.style.transform = `scale(1)`;
+        if (hasFade) {
+            node.style.opacity = '1';
+        }
+    }
+    /**
+     * Will animate the scale and optionally the opacity to make the element shrink and fade out,
+     * leaving the scale and opacity styles on the element.
+     */
+    function growOut() {
+        return new Promise(resolve => {
+            animate({
+                from: { opacity: 1, scale: 1 },
+                to: { opacity: hasFade ? 0 : 1, scale: amount },
+                duration,
+                onUpdate(latest) {
+                    const updates = {
+                        scale: latest.scale,
+                    };
+                    if (hasFade) {
+                        updates['opacity'] = latest.opacity;
+                    }
+                    nodeStyler.set(updates);
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        growIn,
+        growOut,
+        setGrowOut,
+        setGrowIn,
+    };
+};
+export { useGrow };
+//# sourceMappingURL=grow.animation.js.map

package/dist/collection/animations/grow.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grow.animation.js","sourceRoot":"","sources":["../../src/animations/grow.animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,MAAM,MAAM,WAAW,CAAC;AAW/B,MAAM,OAAO,GAAG,CACd,IAAiB,EACjB,EAAE,QAAQ,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,IAAI,KAAkB,EAAE,EAClE,EAAE;IACF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjD,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC5B,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAC;oBACF,IAAI,OAAO,EAAE,CAAC;wBACZ,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;oBACtC,CAAC;oBACD,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBAC1B,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,OAAO,EAAE,CAAC;wBACZ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;oBACvC,CAAC;oBACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;gBACzC,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,MAAM,GAAG,CAAC;QAC1C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QAC3B,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,SAAS,SAAS;QAChB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC;QAClC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QAC3B,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC9B,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBAC/C,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAC;oBACF,IAAI,OAAO,EAAE,CAAC;wBACZ,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;oBACtC,CAAC;oBACD,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBAC1B,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;gBACZ,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,SAAS;KACV,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type GrowOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n  /** The amount to scale the element by @default 0.8 */\n  amount?: number;\n  /** Whether to include a fade effect in the animation @default true */\n  hasFade?: boolean;\n};\n\nconst useGrow = (\n  node: HTMLElement,\n  { duration = 200, amount = 0.8, hasFade = true }: GrowOptions = {},\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element grow and fade in,\n   * and removes the scale and opacity style attributes once complete.\n   */\n  function growIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: hasFade ? 0 : 1, scale: amount },\n        to: { opacity: 1, scale: 1 },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n          if (hasFade) {\n            node.style.removeProperty('opacity');\n          }\n          node.style.removeProperty('transform');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the growOut styles without animating, useful when the initial\n   * state is hidden.\n   */\n  function setGrowOut() {\n    node.style.transform = `scale(${amount})`;\n    if (hasFade) {\n      node.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Applies the growIn styles without animating, useful when the initial\n   * state is visible.\n   */\n  function setGrowIn() {\n    node.style.transform = `scale(1)`;\n    if (hasFade) {\n      node.style.opacity = '1';\n    }\n  }\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element shrink and fade out,\n   * leaving the scale and opacity styles on the element.\n   */\n  function growOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1, scale: 1 },\n        to: { opacity: hasFade ? 0 : 1, scale: amount },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    growIn,\n    growOut,\n    setGrowOut,\n    setGrowIn,\n  };\n};\n\nexport { useGrow };\n"]}

package/dist/collection/animations/index.js

@@ -0,0 +1,5 @@
+export * from './collapse.animation';
+export * from './fade.animation';
+export * from './grow.animation';
+export * from './timeline.animation';
+//# sourceMappingURL=index.js.map

package/dist/collection/animations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/animations/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './collapse.animation';\nexport * from './fade.animation';\nexport * from './grow.animation';\nexport * from './timeline.animation';\n"]}

package/dist/collection/animations/timeline.animation.js

@@ -0,0 +1,21 @@
+/**
+ * Will execute a series of animation promises in sequence.
+ * This is useful for chaining animations where each step depends on the
+ * previous one completing before starting the next.
+ *
+ * @param {Array<() => Promise<void>>} animations - The array of animation functions.
+ * @returns {Object} - An object with a `start` method to begin the timeline.
+ *
+ * @example
+ * const { fadeOut } = useFade(this.ref);
+ * const { collapse } = useCollapse(this.ref);
+ *
+ * timeline(fadeOut, collapse).start();
+ */
+const timeline = (...animations) => ({
+    start: () => {
+        return animations.reduce((promise, animation) => promise.then(() => animation()), Promise.resolve());
+    },
+});
+export { timeline };
+//# sourceMappingURL=timeline.animation.js.map

package/dist/collection/animations/timeline.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.animation.js","sourceRoot":"","sources":["../../src/animations/timeline.animation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,QAAQ,GAAG,CAAC,GAAG,UAAsC,EAAE,EAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,GAAG,EAAE;QACV,OAAO,UAAU,CAAC,MAAM,CACtB,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,EACvD,OAAO,CAAC,OAAO,EAAE,CAClB,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["/**\n * Will execute a series of animation promises in sequence.\n * This is useful for chaining animations where each step depends on the\n * previous one completing before starting the next.\n *\n * @param {Array<() => Promise<void>>} animations - The array of animation functions.\n * @returns {Object} - An object with a `start` method to begin the timeline.\n *\n * @example\n * const { fadeOut } = useFade(this.ref);\n * const { collapse } = useCollapse(this.ref);\n *\n * timeline(fadeOut, collapse).start();\n */\nconst timeline = (...animations: Array<() => Promise<void>>) => ({\n  start: () => {\n    return animations.reduce(\n      (promise, animation) => promise.then(() => animation()),\n      Promise.resolve(),\n    );\n  },\n});\n\nexport { timeline };\n"]}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,35 @@
+{
+  "entries": [
+    "components/nv-menuitem/nv-menuitem.js",
+    "components/nv-alert/nv-alert.js",
+    "components/nv-avatar/nv-avatar.js",
+    "components/nv-badge/nv-badge.js",
+    "components/nv-base/nv-base.js",
+    "components/nv-button/nv-button.js",
+    "components/nv-col/nv-col.js",
+    "components/nv-fieldcheckbox/nv-fieldcheckbox.js",
+    "components/nv-fieldnumber/nv-fieldnumber.js",
+    "components/nv-fieldpassword/nv-fieldpassword.js",
+    "components/nv-fieldradio/nv-fieldradio.js",
+    "components/nv-fieldselect/nv-fieldselect.js",
+    "components/nv-fieldtext/nv-fieldtext.js",
+    "components/nv-fieldtextarea/nv-fieldtextarea.js",
+    "components/nv-fieldtoggle/nv-fieldtoggle.js",
+    "components/nv-icon/nv-icon.js",
+    "components/nv-iconbutton/nv-iconbutton.js",
+    "components/nv-loader/nv-loader.js",
+    "components/nv-menu/nv-menu.js",
+    "components/nv-popover/nv-popover.js",
+    "components/nv-row/nv-row.js",
+    "components/nv-stack/nv-stack.js",
+    "components/nv-tooltip/nv-tooltip.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.22.1",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": [],
+  "global": "global.js"
+}

package/dist/collection/components/nv-alert/nv-alert.css

@@ -0,0 +1,113 @@
+/* Variants */
+/* Define maps for feedback-related variables */
+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;
+}