@dso-toolkit/core 62.9.0 → 62.11.0

package/dist/collection/components/date-picker/date-picker.js

@@ -2,12 +2,24 @@ import { h } from "@stencil/core";
 import { parseToValueFormat, parseToDutchFormat } from "./date-utils";
 export class DsoDatePicker {
   constructor() {
-    this.handleBlur = (event) => {
-      event.stopPropagation();
-      this.dsoBlur.emit({
-        originalEvent: event,
+    this.handleBlur = (e) => {
+      e.stopPropagation();
+      const { target } = e;
+      if (!(target instanceof HTMLInputElement)) {
+        return;
+      }
+      const { validity } = target;
+      const { value, valueAsDate } = this.dateValues(target);
+      const error = this.validityToError(validity);
+      const event = {
         component: "dso-date-picker",
-      });
+        originalEvent: e,
+        validity,
+        value,
+        valueAsDate,
+        error,
+      };
+      this.dsoBlur.emit(event);
     };
     this.handleFocus = (event) => {
       event.stopPropagation();
@@ -35,28 +47,17 @@ export class DsoDatePicker {
       if (!(target instanceof HTMLInputElement)) {
         return;
       }
-      const { valueAsDate, validity } = target;
+      const { validity } = target;
+      const { value, valueAsDate } = this.dateValues(target);
+      const error = this.validityToError(validity);
       const event = {
         component: "dso-date-picker",
         originalEvent: e,
         validity,
-        value: parseToDutchFormat(valueAsDate),
-        valueAsDate: valueAsDate !== null && valueAsDate !== void 0 ? valueAsDate : undefined,
+        value,
+        valueAsDate,
+        error,
       };
-      if (validity.valueMissing) {
-        event.error = "required";
-      }
-      else if (validity.rangeUnderflow) {
-        event.error = "min-range";
-        event.valueAsDate = undefined;
-      }
-      else if (validity.rangeOverflow) {
-        event.error = "max-range";
-        event.valueAsDate = undefined;
-      }
-      else if (!validity.valid) {
-        event.error = "invalid";
-      }
       this.dsoDateChange.emit(event);
     };
     this.name = "dso-date";
@@ -70,6 +71,28 @@ export class DsoDatePicker {
     this.min = undefined;
     this.max = undefined;
   }
+  dateValues(target) {
+    const { valueAsDate, validity } = target;
+    return {
+      value: parseToDutchFormat(valueAsDate),
+      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,
+    };
+  }
+  validityToError(validity) {
+    if (validity.valueMissing) {
+      return "required";
+    }
+    if (validity.rangeUnderflow) {
+      return "min-range";
+    }
+    if (validity.rangeOverflow) {
+      return "max-range";
+    }
+    if (!validity.valid) {
+      return "invalid";
+    }
+    return undefined;
+  }
   render() {
     var _a;
     return (h("input", { type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
@@ -298,13 +321,13 @@ export class DsoDatePicker {
           "text": "Event emitted the date picker input is blurred."
         },
         "complexType": {
-          "original": "DatePickerFocusEvent",
-          "resolved": "DatePickerFocusEvent",
+          "original": "DatePickerBlurEvent",
+          "resolved": "DatePickerBlurEvent",
           "references": {
-            "DatePickerFocusEvent": {
+            "DatePickerBlurEvent": {
               "location": "import",
               "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerFocusEvent"
+              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerBlurEvent"
             }
           }
         }

package/dist/collection/components/date-picker/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n  tag: \"dso-date-picker\",\r\n  styleUrl: \"date-picker.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerElement;\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"dso-date\";\r\n\r\n  /**\r\n   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n   */\r\n  @Prop()\r\n  identifier: string | undefined;\r\n\r\n  /**\r\n   * Makes the date picker input component disabled. This prevents users from being able to\r\n   * interact with the input, and conveys its inactive state to assistive technologies.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop({ reflect: true })\r\n  required = false;\r\n\r\n  /**\r\n   * Is input invalid?\r\n   */\r\n  @Prop({ reflect: true })\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * ID of element that describes the input element\r\n   */\r\n  @Prop()\r\n  describedBy?: string;\r\n\r\n  /**\r\n   * Should the input be focused on load?\r\n   */\r\n  @Prop()\r\n  dsoAutofocus = false;\r\n\r\n  /**\r\n   * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n   */\r\n  @Prop({ reflect: true })\r\n  value = \"\";\r\n\r\n  /**\r\n   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the max property.\r\n   */\r\n  @Prop()\r\n  min: string | undefined;\r\n\r\n  /**\r\n   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the min property.\r\n   */\r\n  @Prop()\r\n  max: string | undefined;\r\n\r\n  /**\r\n   * Events section.\r\n   */\r\n\r\n  /**\r\n   * Event emitted when a date is selected.\r\n   */\r\n  @Event()\r\n  dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  /**\r\n   * Event emitted on key up in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted on key down in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  private handleBlur = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoBlur.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleKeyUp = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyUp.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyDown.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { valueAsDate, validity } = target;\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: valueAsDate ?? undefined,\r\n    };\r\n\r\n    if (validity.valueMissing) {\r\n      event.error = \"required\";\r\n    } else if (validity.rangeUnderflow) {\r\n      event.error = \"min-range\";\r\n      event.valueAsDate = undefined;\r\n    } else if (validity.rangeOverflow) {\r\n      event.error = \"max-range\";\r\n      event.valueAsDate = undefined;\r\n    } else if (!validity.valid) {\r\n      event.error = \"invalid\";\r\n    }\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        type=\"date\"\r\n        id={this.identifier}\r\n        class=\"dso-date__input\"\r\n        value={parseToValueFormat(this.value)}\r\n        name={this.name}\r\n        min={parseToValueFormat(this.min)}\r\n        max={parseToValueFormat(this.max)}\r\n        disabled={this.disabled || undefined}\r\n        required={this.required || undefined}\r\n        aria-autocomplete=\"none\"\r\n        aria-invalid={this.invalid?.toString()}\r\n        aria-describedby={this.describedBy}\r\n        autoComplete=\"off\"\r\n        autofocus={this.dsoAutofocus || undefined}\r\n        onBlur={this.handleBlur}\r\n        onFocus={this.handleFocus}\r\n        onKeyUp={this.handleKeyUp}\r\n        onKeyDown={this.handleKeyDown}\r\n        onChange={this.handleInputChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport {\r\n  DatePickerBlurEvent,\r\n  DatePickerChangeEvent,\r\n  DatePickerError,\r\n  DatePickerFocusEvent,\r\n  DatePickerKeyboardEvent,\r\n} from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n  tag: \"dso-date-picker\",\r\n  styleUrl: \"date-picker.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerElement;\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"dso-date\";\r\n\r\n  /**\r\n   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n   */\r\n  @Prop()\r\n  identifier: string | undefined;\r\n\r\n  /**\r\n   * Makes the date picker input component disabled. This prevents users from being able to\r\n   * interact with the input, and conveys its inactive state to assistive technologies.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop({ reflect: true })\r\n  required = false;\r\n\r\n  /**\r\n   * Is input invalid?\r\n   */\r\n  @Prop({ reflect: true })\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * ID of element that describes the input element\r\n   */\r\n  @Prop()\r\n  describedBy?: string;\r\n\r\n  /**\r\n   * Should the input be focused on load?\r\n   */\r\n  @Prop()\r\n  dsoAutofocus = false;\r\n\r\n  /**\r\n   * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n   */\r\n  @Prop({ reflect: true })\r\n  value = \"\";\r\n\r\n  /**\r\n   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the max property.\r\n   */\r\n  @Prop()\r\n  min: string | undefined;\r\n\r\n  /**\r\n   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the min property.\r\n   */\r\n  @Prop()\r\n  max: string | undefined;\r\n\r\n  /**\r\n   * Events section.\r\n   */\r\n\r\n  /**\r\n   * Event emitted when a date is selected.\r\n   */\r\n  @Event()\r\n  dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DatePickerBlurEvent>;\r\n\r\n  /**\r\n   * Event emitted on key up in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted on key down in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  private handleBlur = (e: FocusEvent) => {\r\n    e.stopPropagation();\r\n\r\n    const { target } = e;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerBlurEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoBlur.emit(event);\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleKeyUp = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyUp.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyDown.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n    const { valueAsDate, validity } = target;\r\n\r\n    return {\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n    };\r\n  }\r\n\r\n  private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n    if (validity.valueMissing) {\r\n      return \"required\";\r\n    }\r\n\r\n    if (validity.rangeUnderflow) {\r\n      return \"min-range\";\r\n    }\r\n\r\n    if (validity.rangeOverflow) {\r\n      return \"max-range\";\r\n    }\r\n\r\n    if (!validity.valid) {\r\n      return \"invalid\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        type=\"date\"\r\n        id={this.identifier}\r\n        class=\"dso-date__input\"\r\n        value={parseToValueFormat(this.value)}\r\n        name={this.name}\r\n        min={parseToValueFormat(this.min)}\r\n        max={parseToValueFormat(this.max)}\r\n        disabled={this.disabled || undefined}\r\n        required={this.required || undefined}\r\n        aria-autocomplete=\"none\"\r\n        aria-invalid={this.invalid?.toString()}\r\n        aria-describedby={this.describedBy}\r\n        autoComplete=\"off\"\r\n        autofocus={this.dsoAutofocus || undefined}\r\n        onBlur={this.handleBlur}\r\n        onFocus={this.handleFocus}\r\n        onKeyUp={this.handleKeyUp}\r\n        onKeyDown={this.handleKeyDown}\r\n        onChange={this.handleInputChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/document-component/document-component.css

@@ -695,24 +695,56 @@ a.dso-tertiary, a.dso-tertiary:visited {
 
 :host([wijzigactie=verwijderContainer]) .heading-container,
 :host(:where([wijzigactie=verwijder])) {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   background-color: #f5d8dc;
-  color: #000;
+  border-color: #f5d8dc;
+  color: #191919;
   text-decoration: line-through;
 }
-:host([wijzigactie=verwijderContainer]) .heading-container a,
-:host(:where([wijzigactie=verwijder])) a {
-  color: #000;
+:host([wijzigactie=verwijderContainer]) .heading-container a:is(.download, .download:hover, .download:focus-visible),
+:host(:where([wijzigactie=verwijder])) a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: url("./dso-icons.svg#img-download-zwart");
+}
+:host([wijzigactie=verwijderContainer]) .heading-container a:is(.extern, .extern:hover, .extern:focus-visible),
+:host(:where([wijzigactie=verwijder])) a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: url("./dso-icons.svg#img-external-link-zwart");
+}
+:host([wijzigactie=verwijderContainer]) .heading-container a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
+:host(:where([wijzigactie=verwijder])) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-call-zwart");
+}
+:host([wijzigactie=verwijderContainer]) .heading-container a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
+:host(:where([wijzigactie=verwijder])) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-email-zwart");
 }
 
 :host([wijzigactie=nieuweContainer]) .heading-container,
 :host([wijzigactie=voegtoe]) {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   background-color: #e4f1d4;
+  border-color: #e4f1d4;
+  color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
-  color: #000;
 }
-:host([wijzigactie=nieuweContainer]) .heading-container a,
-:host([wijzigactie=voegtoe]) a {
-  color: #000;
+:host([wijzigactie=nieuweContainer]) .heading-container a:is(.download, .download:hover, .download:focus-visible),
+:host([wijzigactie=voegtoe]) a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: url("./dso-icons.svg#img-download-zwart");
+}
+:host([wijzigactie=nieuweContainer]) .heading-container a:is(.extern, .extern:hover, .extern:focus-visible),
+:host([wijzigactie=voegtoe]) a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: url("./dso-icons.svg#img-external-link-zwart");
+}
+:host([wijzigactie=nieuweContainer]) .heading-container a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
+:host([wijzigactie=voegtoe]) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-call-zwart");
+}
+:host([wijzigactie=nieuweContainer]) .heading-container a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
+:host([wijzigactie=voegtoe]) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-email-zwart");
 }
 
 :host([filtered]) {
@@ -765,7 +797,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host(:not([not-collapsible])) .heading-element {
   cursor: pointer;
 }
-:host(:not([not-collapsible])) .heading-element:hover, :host(:not([not-collapsible])) .heading-element:focus {
+:host(:not([not-collapsible])) .heading-element:hover, :host(:not([not-collapsible])) .heading-element:focus-visible {
   color: var(--link-hover-color);
   text-decoration: underline;
 }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -3,13 +3,9 @@ import { h, Host } from "@stencil/core";
 import { tabbable } from "tabbable";
 import { v4 as uuidv4 } from "uuid";
 import { hasOverflow } from "../../utils/has-overflow";
+import { createFocusTrap } from "focus-trap";
 export class DropdownMenu {
   constructor() {
-    this.focusOutListener = (event) => {
-      if (!this.tabbables.includes(event.relatedTarget)) {
-        this.open = false;
-      }
-    };
     this.keyDownListener = (event) => {
       if (event.defaultPrevented) {
         return;
@@ -70,6 +66,32 @@ export class DropdownMenu {
   watchStrategy() {
     this.setStrategy();
   }
+  createTrap() {
+    var _a, _b;
+    this.trap = createFocusTrap(this.host, {
+      clickOutsideDeactivates: () => {
+        var _a;
+        this.open = false;
+        (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+        delete this.trap;
+        return true;
+      },
+      escapeDeactivates: (event) => {
+        var _a;
+        if (event instanceof KeyboardEvent) {
+          this.open = false;
+          (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+          delete this.trap;
+        }
+        return true;
+      },
+      tabbableOptions: {
+        getShadowRoot: true,
+      },
+      setReturnFocus: (_a = this.button) !== null && _a !== void 0 ? _a : false,
+      initialFocus: (_b = this.button) !== null && _b !== void 0 ? _b : false,
+    }).activate();
+  }
   setStrategy() {
     if (!this.popper) {
       return;
@@ -153,10 +175,15 @@ export class DropdownMenu {
     });
   }
   componentDidRender() {
-    var _a;
+    var _a, _b;
     this.setStrategy();
     if (this.open) {
       (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+      this.createTrap();
+    }
+    else {
+      (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
+      delete this.trap;
     }
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {
@@ -206,7 +233,7 @@ export class DropdownMenu {
     (_a = tabs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
   }
   render() {
-    return (h(Host, { onFocusout: this.focusOutListener, tabindex: this.open ? "-1" : undefined }, h("slot", { name: "toggle" }), h("div", { hidden: !this.open }, h("slot", null))));
+    return (h(Host, { tabindex: this.open ? "-1" : undefined }, h("slot", { name: "toggle" }), h("div", { hidden: !this.open }, h("slot", null))));
   }
   static get is() { return "dso-dropdown-menu"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  get tabbables(): FocusableElement[] {\r\n    return tabbable(this.host).filter((e) => e !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    this.button.addEventListener(\"click\", () => {\r\n      this.open = !this.open;\r\n    });\r\n\r\n    const options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n    }\r\n\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of tabbable(li)) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n    if (this.open) {\r\n      this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    }\r\n\r\n    this.tabbables.forEach((focusableElement) => {\r\n      focusableElement.removeEventListener(\"click\", this.escape);\r\n      if (this.open) {\r\n        focusableElement.addEventListener(\"click\", this.escape);\r\n      }\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.popper?.destroy();\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (!this.tabbables.includes(event.relatedTarget as FocusableElement)) {\r\n      this.open = false;\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(-1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private getActiveElement(root: Document | ShadowRoot = document): Element | null {\r\n    const activeEl = root.activeElement;\r\n\r\n    if (!activeEl) {\r\n      return null;\r\n    }\r\n\r\n    if (activeEl.shadowRoot) {\r\n      return this.getActiveElement(activeEl.shadowRoot);\r\n    }\r\n\r\n    return activeEl;\r\n  }\r\n\r\n  private tabInPopup(direction: number) {\r\n    const tabs = this.tabbables;\r\n    const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabs.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabs.length - 1;\r\n    }\r\n\r\n    tabs[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener} tabindex={this.open ? \"-1\" : undefined}>\r\n        <slot name=\"toggle\" />\r\n        <div hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  private trap?: FocusTrap;\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: () => {\r\n        this.open = false;\r\n        this.trap?.deactivate();\r\n        delete this.trap;\r\n\r\n        return true;\r\n      },\r\n      escapeDeactivates: (event) => {\r\n        if (event instanceof KeyboardEvent) {\r\n          this.open = false;\r\n          this.trap?.deactivate();\r\n          delete this.trap;\r\n        }\r\n\r\n        return true;\r\n      },\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      setReturnFocus: this.button ?? false,\r\n      initialFocus: this.button ?? false,\r\n    }).activate();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  get tabbables(): FocusableElement[] {\r\n    return tabbable(this.host).filter((e) => e !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    this.button.addEventListener(\"click\", () => {\r\n      this.open = !this.open;\r\n    });\r\n\r\n    const options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n      this.createTrap();\r\n    } else {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of tabbable(li)) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n    if (this.open) {\r\n      this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    }\r\n\r\n    this.tabbables.forEach((focusableElement) => {\r\n      focusableElement.removeEventListener(\"click\", this.escape);\r\n      if (this.open) {\r\n        focusableElement.addEventListener(\"click\", this.escape);\r\n      }\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.popper?.destroy();\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(-1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private getActiveElement(root: Document | ShadowRoot = document): Element | null {\r\n    const activeEl = root.activeElement;\r\n\r\n    if (!activeEl) {\r\n      return null;\r\n    }\r\n\r\n    if (activeEl.shadowRoot) {\r\n      return this.getActiveElement(activeEl.shadowRoot);\r\n    }\r\n\r\n    return activeEl;\r\n  }\r\n\r\n  private tabInPopup(direction: number) {\r\n    const tabs = this.tabbables;\r\n    const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabs.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabs.length - 1;\r\n    }\r\n\r\n    tabs[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host tabindex={this.open ? \"-1\" : undefined}>\r\n        <slot name=\"toggle\" />\r\n        <div hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/header/header.css

@@ -177,7 +177,7 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   padding: 16px 0;
   white-space: nowrap;
 }
-.dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active {
+.dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active {
   text-decoration: underline;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {

package/dist/collection/components/highlight-box/highlight-box.css

@@ -1,59 +1,10 @@
-:host {
-  display: block;
-  container-type: inline-size;
-  position: relative;
-  z-index: 1;
-}
-
-:host-context(.row.dso-equal-heights) {
-  height: 100%;
-  min-height: auto;
-}
-:host-context(.row.dso-equal-heights) > .dso-highlight-box {
-  min-height: auto;
-}
-:host-context(.row.dso-equal-heights) > .dso-highlight-box.dso-has-counter {
-  height: calc(100% - 48px);
-}
-:host-context(.row.dso-equal-heights) > .dso-highlight-box:not(.dso-has-counter) {
-  height: calc(100% - 16px);
-}
-
 *,
 *::after,
 *::before {
   box-sizing: border-box;
 }
 
-.dso-highlight-box {
-  background-color: #f2f2f2;
-  color: #000;
-  margin-top: 16px;
-  padding: 16px;
-  margin-bottom: 24px;
-}
-.dso-highlight-box.dso-white {
-  background-color: #fff;
-}
-.dso-highlight-box.dso-yellow {
-  background-color: #f8f6cc;
-}
-.dso-highlight-box.dso-drop-shadow {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-}
-.dso-highlight-box.dso-border {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  padding: 15px;
-}
-.dso-highlight-box.dso-has-counter {
-  margin-top: 48px;
-}
-.dso-highlight-box.dso-has-counter {
-  padding-top: 2.5rem;
-  position: relative;
-}
-.dso-highlight-box .dso-step-counter {
+.dso-step-counter {
   background-color: #275937;
   border: 8px solid #79b929;
   border-radius: 50%;
@@ -69,11 +20,24 @@
   top: -1.5rem;
   width: 2rem;
 }
-.dso-highlight-box .dso-step-counter svg.di {
-  height: 1.5rem;
-  margin-top: 0.25rem;
-  width: 1.5rem;
+
+:host {
+  margin-top: 16px;
+  padding: 16px;
+  margin-bottom: 24px;
+  display: block;
+  container-type: inline-size;
+  position: relative;
+  z-index: 1;
 }
-.dso-highlight-box > dso-icon {
-  vertical-align: text-top;
+
+:host-context(.row.dso-equal-heights) {
+  height: 100%;
+  min-height: auto;
+}
+:host-context(.row.dso-equal-heights)[has-counter] {
+  height: calc(100% - 48px);
+}
+:host-context(.row.dso-equal-heights):not([has-counter]) {
+  height: calc(100% - 16px);
 }

package/dist/collection/components/highlight-box/highlight-box.js

@@ -1,5 +1,4 @@
-import { h } from "@stencil/core";
-import clsx from "clsx";
+import { h, Host } from "@stencil/core";
 export class HighlightBox {
   constructor() {
     this.yellow = undefined;
@@ -11,14 +10,7 @@ export class HighlightBox {
   render() {
     var _a;
     const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-    const classes = clsx("dso-highlight-box", {
-      "dso-yellow": this.yellow,
-      "dso-border": this.border,
-      "dso-white": this.white,
-      "dso-drop-shadow": this.dropShadow,
-      "dso-has-counter": hasCounter,
-    });
-    return (h("div", { class: classes }, hasCounter && h("div", { class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { name: "icon" })), h("slot", null)));
+    return (h(Host, { "has-counter": hasCounter }, hasCounter && h("div", { class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { name: "icon" })), h("slot", null)));
   }
   static get is() { return "dso-highlight-box"; }
   static get encapsulation() { return "shadow"; }
@@ -49,7 +41,7 @@ export class HighlightBox {
           "text": "For yellow Highlight Box."
         },
         "attribute": "yellow",
-        "reflect": false
+        "reflect": true
       },
       "border": {
         "type": "boolean",
@@ -66,7 +58,7 @@ export class HighlightBox {
           "text": "For a bordered Highlight Box."
         },
         "attribute": "border",
-        "reflect": false
+        "reflect": true
       },
       "white": {
         "type": "boolean",
@@ -83,7 +75,7 @@ export class HighlightBox {
           "text": "For a while Highlight Box."
         },
         "attribute": "white",
-        "reflect": false
+        "reflect": true
       },
       "dropShadow": {
         "type": "boolean",
@@ -100,7 +92,7 @@ export class HighlightBox {
           "text": "For an Highlight Box with a drop shadow."
         },
         "attribute": "drop-shadow",
-        "reflect": false
+        "reflect": true
       },
       "step": {
         "type": "number",
@@ -117,7 +109,7 @@ export class HighlightBox {
           "text": "To create a step indicator."
         },
         "attribute": "step",
-        "reflect": false
+        "reflect": true
       }
     };
   }

package/dist/collection/components/highlight-box/highlight-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight-box.js","sourceRoot":"","sources":["../../../../src/components/highlight-box/highlight-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,YAAY;;;;;;;;EAkCvB,MAAM;;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC5E,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE;MACxC,YAAY,EAAE,IAAI,CAAC,MAAM;MACzB,YAAY,EAAE,IAAI,CAAC,MAAM;MACzB,WAAW,EAAE,IAAI,CAAC,KAAK;MACvB,iBAAiB,EAAE,IAAI,CAAC,UAAU;MAClC,iBAAiB,EAAE,UAAU;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,WAAK,KAAK,EAAE,OAAO;MAChB,UAAU,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,CAAO;MAC3F,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop()\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop()\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop()\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop()\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n    const classes = clsx(\"dso-highlight-box\", {\r\n      \"dso-yellow\": this.yellow,\r\n      \"dso-border\": this.border,\r\n      \"dso-white\": this.white,\r\n      \"dso-drop-shadow\": this.dropShadow,\r\n      \"dso-has-counter\": hasCounter,\r\n    });\r\n\r\n    return (\r\n      <div class={classes}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"highlight-box.js","sourceRoot":"","sources":["../../../../src/components/highlight-box/highlight-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,YAAY;;;;;;;;EAkCvB,MAAM;;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAE5E,OAAO,CACL,EAAC,IAAI,mBAAc,UAAU;MAC1B,UAAU,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,CAAO;MAC3F,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Host } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/info/info.css

@@ -1,7 +1,5 @@
 :host {
   display: block;
-  background-color: #f2f2f2;
-  color: #000;
   padding: 16px 32px 16px 16px;
   position: relative;
 }

package/dist/collection/components/label/label.css

@@ -21,9 +21,7 @@
 }
 
 .dso-label {
-  background-color: #f2f2f2;
   border-radius: 4px;
-  color: #191919;
   display: inline-block;
   line-height: 1.5;
   max-width: 100%;
@@ -52,38 +50,51 @@
 .dso-label button > svg.di {
   display: block;
 }
+.dso-label {
+  background-color: #f2f2f2;
+  border-color: #f2f2f2;
+  color: #191919;
+}
 .dso-label.dso-label-info {
   background-color: #6ca4d9;
-  color: #000;
+  border-color: #6ca4d9;
+  color: #191919;
 }
 .dso-label.dso-label-primary {
   background-color: #275937;
+  border-color: #275937;
   color: #fff;
 }
 .dso-label.dso-label-success {
   background-color: #39870c;
+  border-color: #39870c;
   color: #fff;
 }
 .dso-label.dso-label-warning {
   background-color: #dcd400;
-  color: #000;
+  border-color: #dcd400;
+  color: #191919;
 }
 .dso-label.dso-label-danger {
   background-color: #ce3f51;
+  border-color: #ce3f51;
   color: #fff;
 }
 .dso-label.dso-label-error {
   background-color: #ce3f51;
+  border-color: #ce3f51;
   color: #fff;
 }
 .dso-label.dso-label-bright {
   background-color: #fff;
+  border-color: #fff;
   color: #191919;
   outline: 1px solid #ccc;
   outline-offset: -1px;
 }
 .dso-label.dso-label-attention {
   background-color: #8b4a6a;
+  border-color: #8b4a6a;
   color: #fff;
 }
 .dso-label.dso-compact {