@dso-toolkit/core 45.0.0 → 45.1.0

package/dist/cjs/dso-accordion-section.cjs.entry.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4066351a.js');
+
+const accordionSectionCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host(:not([open])) .dso-section-body{display:none}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px;padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#8b4a6a;border-radius:4px}:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body{background-color:#d1b7c4}:host(.dso-accordion-compact) .dso-section-handle{border:1px solid transparent}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact),:host(.dso-accordion-compact) .dso-section-body{border:0;border-top:1px solid #ccc}:host(.dso-accordion-compact):last-child{border-bottom:1px solid #ccc}:host(.dso-accordion-compact)+dso-accordion-section{margin-top:0}:host(.dso-accordion-compact) .dso-section-body{margin-top:0}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#191919}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5;color:#191919}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#191919}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-conclusion.dso-nested-accordion[open]){background-color:#fff;border:2px solid #f2f2f2}";
+
+let AccordionSection = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.heading = 'h2';
+    this.open = false;
+    this.hasNestedSection = false;
+  }
+  componentWillLoad() {
+    const accordion = this.host.parentElement;
+    if (isAccordion(accordion)) {
+      this.accordion = accordion;
+      accordion.getState().then(state => {
+        this.accordionState = state;
+        index.forceUpdate(this.host);
+      });
+    }
+  }
+  componentDidLoad() {
+    this.hasNestedSection = this.host.querySelector('dso-accordion') !== null;
+  }
+  /** Toggle this section */
+  async toggleSection() {
+    var _a;
+    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host);
+  }
+  async toggle(e) {
+    var _a;
+    e === null || e === void 0 ? void 0 : e.preventDefault();
+    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e);
+  }
+  render() {
+    if (!this.accordionState) {
+      return;
+    }
+    const { variant, reverseAlign } = this.accordionState;
+    const hasAddons = this.status || this.state || this.icon || this.attachmentCount;
+    return (index.h(index.Host, { class: {
+        'dso-accordion-section': true,
+        ['dso-accordion-' + variant]: true,
+        'dso-nested-accordion': this.hasNestedSection,
+      } }, index.h(Handle, { heading: this.heading }, index.h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign
+      ? (index.h(index.Fragment, null, hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, index.h(HandleIcon, { icon: this.icon }))), index.h("span", null, this.handleTitle), index.h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' })))
+      : (index.h(index.Fragment, null, index.h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' }), this.state && index.h("span", { class: "sr-only" }, stateMap[this.state]), index.h("span", null, this.handleTitle), hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, this.status && index.h("span", { class: "dso-status" }, this.status), index.h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), index.h("div", { class: "dso-section-body", style: this.open ? {} : { display: 'none' } }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+function isAccordion(element) {
+  return element instanceof HTMLElement && 'getState' in element;
+}
+const Handle = ({ heading }, children) => {
+  switch (heading) {
+    default:
+    case 'h2':
+      return index.h("h2", { class: "dso-section-handle" }, children);
+    case 'h3':
+      return index.h("h3", { class: "dso-section-handle" }, children);
+    case 'h4':
+      return index.h("h4", { class: "dso-section-handle" }, children);
+    case 'h5':
+      return index.h("h5", { class: "dso-section-handle" }, children);
+  }
+};
+const HandleElement = ({ handleUrl, onClick, open }, children) => {
+  if (handleUrl) {
+    return (index.h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+  }
+  return (index.h("button", { type: "button", onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+};
+const HandleIcon = ({ state, icon, attachmentCount }) => {
+  if (state) {
+    return index.h(HandleStateIcon, { state: state });
+  }
+  if (attachmentCount) {
+    return index.h("dso-attachments-counter", { count: attachmentCount });
+  }
+  if (icon) {
+    return index.h("dso-icon", { icon: icon });
+  }
+};
+const stateMap = {
+  success: 'succes:',
+  info: 'info:',
+  warning: 'waarschuwing:',
+  danger: 'fout:'
+};
+const HandleStateIcon = ({ state }) => {
+  if (state === 'danger') {
+    return (index.h("dso-icon", { icon: "status-danger" }));
+  }
+  if (state === 'success') {
+    return (index.h("dso-icon", { icon: "status-success" }));
+  }
+  if (state === 'info') {
+    return (index.h("dso-icon", { icon: "status-info" }));
+  }
+  if (state === 'warning') {
+    return (index.h("dso-icon", { icon: "status-warning" }));
+  }
+};
+AccordionSection.style = accordionSectionCss;
+
+exports.dso_accordion_section = AccordionSection;

package/dist/cjs/dso-accordion.cjs.entry.js

@@ -0,0 +1,297 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4066351a.js');
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof index.getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = index.getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(index.forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(index.forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const accordionCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}";
+
+let Accordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.dsoToggleSection = index.createEvent(this, "dsoToggleSection", 7);
+    this.variant = 'default';
+    /** Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements */
+    this.reverseAlign = false;
+    /** Allows multiple sections to be open at the same time. */
+    this.allowMultipleOpen = false;
+    const { state } = createStore({
+      variant: this.variant || 'default',
+      reverseAlign: this.reverseAlign,
+    });
+    this.accordionState = state;
+  }
+  updateVariant(variant = 'default') {
+    this.accordionState.variant = variant || 'default';
+  }
+  updateReverseAlign(reverseAlign) {
+    this.accordionState.reverseAlign = reverseAlign;
+  }
+  watchAllowMultiple(allowMultipleOpen) {
+    if (!allowMultipleOpen) {
+      const openSections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section[open]'));
+      // By removing the first section, it is kept open;
+      openSections.shift();
+      openSections.forEach(section => this.controlOpenAttribute(section, false));
+    }
+  }
+  async getState() {
+    return this.accordionState;
+  }
+  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section. */
+  async toggleSection(sectionElement, event) {
+    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
+    if (typeof sectionElement === 'number') {
+      sectionElement = sections[sectionElement];
+    }
+    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
+      return;
+    }
+    const sectionIsOpen = this.isSectionOpen(sectionElement);
+    if (this.allowMultipleOpen) {
+      this.controlOpenAttribute(sectionElement, !sectionIsOpen);
+      this.emitToggleEvent(sectionElement, sections, event);
+      return;
+    }
+    if (sectionIsOpen) {
+      this.controlOpenAttribute(sectionElement, false);
+      this.emitToggleEvent(sectionElement, sections, event);
+      return;
+    }
+    await this.closeOpenSections();
+    this.controlOpenAttribute(sectionElement, true);
+    this.emitToggleEvent(sectionElement, sections, event);
+  }
+  /** Closes all sections belonging to this accordion. */
+  async closeOpenSections() {
+    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
+    const openSections = sections.filter(s => this.isSectionOpen(s));
+    openSections.forEach(section => this.controlOpenAttribute(section, false));
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        'dso-accordion': true
+      } }, index.h("slot", null)));
+  }
+  emitToggleEvent(sectionElement, sections, e) {
+    this.dsoToggleSection.emit({
+      originalEvent: e,
+      section: {
+        element: sectionElement,
+        open: this.isSectionOpen(sectionElement),
+      },
+      sections,
+    });
+  }
+  isSectionOpen(sectionElement) {
+    return typeof sectionElement.getAttribute('open') === 'string';
+  }
+  controlOpenAttribute(sectionElement, setAttribute) {
+    if (setAttribute) {
+      sectionElement.setAttribute('open', '');
+    }
+    else {
+      sectionElement.removeAttribute('open');
+    }
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "variant": ["updateVariant"],
+    "reverseAlign": ["updateReverseAlign"],
+    "allowMultipleOpen": ["watchAllowMultiple"]
+  }; }
+};
+Accordion.style = accordionCss;
+
+exports.dso_accordion = Accordion;

package/dist/cjs/dso-alert.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a7c679a.js');
+const index = require('./index-4066351a.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 
-const alertCss = "@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}:host{display:block;--di-status-success:url(\"data:image/svg+xml,%3csvg id='status-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' fill='%2339870c'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' fill='white'/%3e %3c/g%3e %3cpath d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z' fill='white'/%3e %3c/svg%3e\");--di-status-danger:url(\"data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' fill='white'/%3e %3c/svg%3e\");--di-status-warning:url(\"data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e\");--di-status-info:url(\"data:image/svg+xml,%3csvg id='status-info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' fill='%232b5780'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' fill='white'/%3e %3c/g%3e %3cpath d='M11%2c8a1%2c1%2c0%2c1%2c1%2c1%2c1A1%2c1%2c0%2c0%2c1%2c11%2c8Zm2%2c8.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z' fill='white'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\")}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}.alert:not(:first-child){margin-top:24px}.alert::before{content:\"\";left:15px;position:absolute;top:15px}.alert.alert-success{color:#191919;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-success::before{background:var(--dso-icon, var(--di-status-success)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-danger{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-danger::before{background:var(--dso-icon, var(--di-status-danger)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-warning{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-warning::before{background:var(--dso-icon, var(--di-status-warning)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-info{color:#191919;background-color:#e1ecf7;border-color:#e1ecf7}.alert.alert-info::before{background:var(--dso-icon, var(--di-status-info)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}";
+const alertCss = "@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}:host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#191919;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-danger{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#191919;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
 
 let Alert = class {
   constructor(hostRef) {
@@ -16,7 +16,7 @@ let Alert = class {
     if (!status) {
       throw new Error(`Invalid status ${this.status}`);
     }
-    return (index.h("div", { class: clsx_m.clsx('alert', `alert-${this.status}`), role: this.roleAlert ? 'alert' : undefined }, index.h("span", { class: "sr-only" }, status, ":"), index.h("slot", null)));
+    return (index.h("div", { class: clsx_m.clsx('alert', `alert-${this.status}`), role: this.roleAlert ? 'alert' : undefined }, index.h("dso-icon", { icon: 'status-' + this.status }), index.h("span", { class: "sr-only" }, status, ":"), index.h("slot", null)));
   }
 };
 Alert.statusMap = new Map([

package/dist/cjs/dso-attachments-counter.cjs.entry.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a7c679a.js');
+const index = require('./index-4066351a.js');
 
-const attachmentsCounterCss = ":host{display:inline-block;--di-paperclip-grijs:url(\"data:image/svg+xml,%3csvg id='paperclip' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M21.88%2c8.94%2c10%2c20.6A4.63%2c4.63%2c0%2c0%2c1%2c6.62%2c22h0a5.78%2c5.78%2c0%2c0%2c1-4.05-1.81%2c5.34%2c5.34%2c0%2c0%2c1%2c0-7.56l9.3-9.26a1%2c1%2c0%2c1%2c1%2c1.48%2c1.48l-9.3%2c9.26h0a3.26%2c3.26%2c0%2c0%2c0%2c0%2c4.6%2c3.79%2c3.79%2c0%2c0%2c0%2c2.58%2c1.21%2c2.55%2c2.55%2c0%2c0%2c0%2c1.85-.81h0L20.4%2c7.46a1.83%2c1.83%2c0%2c0%2c0%2c.5-1.39%2c2.24%2c2.24%2c0%2c0%2c0-.63-1.44%2c1.85%2c1.85%2c0%2c0%2c0-2.61%2c0h0L7.43%2c14.73a.48.48%2c0%2c0%2c0%2c0%2c.67.48.48%2c0%2c0%2c0%2c.34.14.46.46%2c0%2c0%2c0%2c.34-.14l7.36-7.28a1%2c1%2c0%2c0%2c1%2c1.48%2c0A1%2c1%2c0%2c0%2c1%2c17%2c9.6h0L9.6%2c16.88h0a2.66%2c2.66%2c0%2c0%2c1-3.65%2c0%2c2.55%2c2.55%2c0%2c0%2c1%2c0-3.63L16.17%2c3.15a4%2c4%2c0%2c0%2c1%2c5.59%2c0A4.31%2c4.31%2c0%2c0%2c1%2c23%2c6%2c3.89%2c3.89%2c0%2c0%2c1%2c21.88%2c8.94Z'/%3e %3c/svg%3e\");--di-paperclip-wit:url(\"data:image/svg+xml,%3csvg id='paperclip' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M21.88%2c8.94%2c10%2c20.6A4.63%2c4.63%2c0%2c0%2c1%2c6.62%2c22h0a5.78%2c5.78%2c0%2c0%2c1-4.05-1.81%2c5.34%2c5.34%2c0%2c0%2c1%2c0-7.56l9.3-9.26a1%2c1%2c0%2c1%2c1%2c1.48%2c1.48l-9.3%2c9.26h0a3.26%2c3.26%2c0%2c0%2c0%2c0%2c4.6%2c3.79%2c3.79%2c0%2c0%2c0%2c2.58%2c1.21%2c2.55%2c2.55%2c0%2c0%2c0%2c1.85-.81h0L20.4%2c7.46a1.83%2c1.83%2c0%2c0%2c0%2c.5-1.39%2c2.24%2c2.24%2c0%2c0%2c0-.63-1.44%2c1.85%2c1.85%2c0%2c0%2c0-2.61%2c0h0L7.43%2c14.73a.48.48%2c0%2c0%2c0%2c0%2c.67.48.48%2c0%2c0%2c0%2c.34.14.46.46%2c0%2c0%2c0%2c.34-.14l7.36-7.28a1%2c1%2c0%2c0%2c1%2c1.48%2c0A1%2c1%2c0%2c0%2c1%2c17%2c9.6h0L9.6%2c16.88h0a2.66%2c2.66%2c0%2c0%2c1-3.65%2c0%2c2.55%2c2.55%2c0%2c0%2c1%2c0-3.63L16.17%2c3.15a4%2c4%2c0%2c0%2c1%2c5.59%2c0A4.31%2c4.31%2c0%2c0%2c1%2c23%2c6%2c3.89%2c3.89%2c0%2c0%2c1%2c21.88%2c8.94Z'/%3e %3c/svg%3e\")}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}.dso-attachments::after{background:var(--dso-icon, var(--di-paperclip-grijs)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;content:\"\";display:inline-block}";
+const attachmentsCounterCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}";
 
 let AttachmentsCounter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h("span", { class: "dso-attachments" }, this.count, " ", index.h("span", { class: "sr-only" }, "bijlage", this.count !== 1 ? 'n' : '')));
+    return (index.h("span", { class: "dso-attachments" }, this.count, " ", index.h("span", { class: "sr-only" }, "bijlage", this.count !== 1 ? 'n' : ''), index.h("dso-icon", { icon: "paperclip" })));
   }
 };
 AttachmentsCounter.style = attachmentsCounterCss;

package/dist/cjs/dso-autosuggest.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a7c679a.js');
+const index = require('./index-4066351a.js');
 const index$1 = require('./index-794ad37a.js');
 const v4 = require('./v4-8e8d6fbc.js');
 

package/dist/cjs/dso-badge.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a7c679a.js');
+const index = require('./index-4066351a.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 
 const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}";

package/dist/cjs/dso-banner.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a7c679a.js');
+const index = require('./index-4066351a.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 
-const bannerCss = ":host{display:block;--di-status-danger:url(\"data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' fill='white'/%3e %3c/svg%3e\");--di-status-warning:url(\"data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\")}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}";
+const bannerCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}";
 
 let Banner = class {
   constructor(hostRef) {

package/dist/cjs/dso-date-picker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a7c679a.js');
+const index = require('./index-4066351a.js');
 const createIdentifier = require('./create-identifier-fa070b11.js');
 
 var DaysOfWeek;

package/dist/cjs/dso-dropdown-menu.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a7c679a.js');
-const index_esm = require('./index.esm-3520a2a6.js');
+const index = require('./index-4066351a.js');
+const index_esm = require('./index.esm-50325ea2.js');
 const v4 = require('./v4-8e8d6fbc.js');
 
-const dropdownMenuCss = ":host(:focus){outline:none}:host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";
+const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block;position:relative}";
 
 let DropdownMenu = class {
   constructor(hostRef) {