@quartzds/core 1.0.0-beta.8 → 1.0.0-beta.9

package/components/index.d.ts

@@ -3,6 +3,8 @@ export { Button as QdsButton } from '../dist/types/components/button/button';
 export { defineCustomElement as defineCustomElementQdsButton } from './qds-button';
 export { Checkbox as QdsCheckbox } from '../dist/types/components/checkbox/checkbox';
 export { defineCustomElement as defineCustomElementQdsCheckbox } from './qds-checkbox';
+export { Divider as QdsDivider } from '../dist/types/components/divider/divider';
+export { defineCustomElement as defineCustomElementQdsDivider } from './qds-divider';
 export { Dropdown as QdsDropdown } from '../dist/types/components/dropdown/dropdown';
 export { defineCustomElement as defineCustomElementQdsDropdown } from './qds-dropdown';
 export { Icon as QdsIcon } from '../dist/types/components/icon/icon';

package/components/index.js

@@ -7,6 +7,7 @@ export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/intern
 export { r as registerIconLibrary, u as unregisterIconLibrary } from './icon.js';
 export { QdsButton, defineCustomElement as defineCustomElementQdsButton } from './qds-button.js';
 export { QdsCheckbox, defineCustomElement as defineCustomElementQdsCheckbox } from './qds-checkbox.js';
+export { QdsDivider, defineCustomElement as defineCustomElementQdsDivider } from './qds-divider.js';
 export { QdsDropdown, defineCustomElement as defineCustomElementQdsDropdown } from './qds-dropdown.js';
 export { QdsIcon, defineCustomElement as defineCustomElementQdsIcon } from './qds-icon.js';
 export { QdsInlineLink, defineCustomElement as defineCustomElementQdsInlineLink } from './qds-inline-link.js';

package/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,MAAM,WAAW,GAAG,CAAC,KAAwB;EAC3C,IAAI,KAAK,KAAK,SAAS;IAAE,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;EAClE,IAAI,OAAO,KAAK,KAAK,QAAQ;IAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS,CAAA;EAC9D,OAAO,KAAK,CAAC,SAAS,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,SAAoC;EAEpC,IAAI,CAAC,SAAS;IAAE,OAAO,SAAS,CAAA;EAEhC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,OAAO,CAAC,GAAG,SAAS,CAAC;KAClB,IAAI,CAAC,CAAC,KAAa,KAAsB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;MACjE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,KAAa,EACb,OAA0B;EAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;EACtC,IAAI,SAAS,KAAK,SAAS;IAAE,OAAM;EAEnC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;EAClD,IAAI,cAAc,KAAK,SAAS;IAC9B,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,cAAc,EAAE,CAAC,CAAA;EAChD,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA;AAKD;;;;;;;;;;;;;;MAca,WAAW,GAAG,CACzB,OAAyB,KACF,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAErE;;;;;;;;;;;;;;;MAea,WAAW,GAAG,CAKzB,QAAqB,EACrB,OAAyB;EAEzB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;AAC3C,EAAC;AAED;;;;;;;;;;;;;;MAca,QAAQ,GAAG,CACtB,OAAyB,KACF,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAElE;;;;;;;;;;;;;;;MAea,QAAQ,GAAG,CAKtB,KAAkB,EAClB,OAAyB;EAEzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AACrC;;;;","names":[],"sources":["src/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nconst toClassList = (value?: Element | string): DOMTokenList | undefined => {\n  if (value === undefined) return document.documentElement.classList\n  if (typeof value === 'string')\n    return document.querySelector(value)?.classList ?? undefined\n  return value.classList\n}\n\nconst getVariant = (\n  type: string,\n  classList?: DOMTokenList | undefined,\n): string | undefined => {\n  if (!classList) return undefined\n\n  const prefix = `qds-${type}-`\n\n  return [...classList]\n    .find((value: string): value is string => value.startsWith(prefix))\n    ?.replace(prefix, '')\n}\n\nconst setVariant = (\n  type: string,\n  value: string,\n  element?: Element | string,\n): void => {\n  const classList = toClassList(element)\n  if (classList === undefined) return\n\n  const prefix = `qds-${type}-`\n\n  const currentVariant = getVariant(type, classList)\n  if (currentVariant !== undefined)\n    classList.remove(`${prefix}${currentVariant}`)\n  classList.add(`${prefix}${value}`)\n}\n\n// eslint-disable-next-line @typescript-eslint/no-type-alias\ntype NonEmpty<T extends string = string> = T extends '' ? never : T\n\n/**\n * Get the currently set platform.\n *\n * @param element The element where the platform will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set platform if one is set, `undefined` otherwise.\n */\nexport const getPlatform = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('platform', toClassList(element))\n\n/**\n * Sets the current platform.\n *\n * The current platform represented by a `qds-platform-`-prefixed CSS class\n * will be removed.\n *\n * @param platform The platform to set. Must be a non-empty value.\n * @param element The element where the platform will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setPlatform = <\n  P extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  platform: NonEmpty<P>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('platform', platform, element)\n}\n\n/**\n * Get the currently set theme.\n *\n * @param element The element where the theme will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set theme if one is set, `undefined` otherwise.\n */\nexport const getTheme = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('theme', toClassList(element))\n\n/**\n * Sets the current theme.\n *\n * The current theme represented by a `qds-theme-`-prefixed CSS class will be\n * removed.\n *\n * @param theme The theme to set. Must be a non-empty value.\n * @param element The element where the theme will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setTheme = <\n  T extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  theme: NonEmpty<T>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('theme', theme, element)\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,MAAM,WAAW,GAAG,CAAC,KAAwB;EAC3C,IAAI,KAAK,KAAK,SAAS;IAAE,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;EAClE,IAAI,OAAO,KAAK,KAAK,QAAQ;IAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS,CAAA;EAC9D,OAAO,KAAK,CAAC,SAAS,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,SAAoC;EAEpC,IAAI,CAAC,SAAS;IAAE,OAAO,SAAS,CAAA;EAEhC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,OAAO,CAAC,GAAG,SAAS,CAAC;KAClB,IAAI,CAAC,CAAC,KAAa,KAAsB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;MACjE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,KAAa,EACb,OAA0B;EAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;EACtC,IAAI,SAAS,KAAK,SAAS;IAAE,OAAM;EAEnC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;EAClD,IAAI,cAAc,KAAK,SAAS;IAC9B,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,cAAc,EAAE,CAAC,CAAA;EAChD,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA;AAKD;;;;;;;;;;;;;;MAca,WAAW,GAAG,CACzB,OAAyB,KACF,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAErE;;;;;;;;;;;;;;;MAea,WAAW,GAAG,CAKzB,QAAqB,EACrB,OAAyB;EAEzB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;AAC3C,EAAC;AAED;;;;;;;;;;;;;;MAca,QAAQ,GAAG,CACtB,OAAyB,KACF,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAElE;;;;;;;;;;;;;;;MAea,QAAQ,GAAG,CAKtB,KAAkB,EAClB,OAAyB;EAEzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AACrC;;;;","names":[],"sources":["src/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nconst toClassList = (value?: Element | string): DOMTokenList | undefined => {\n  if (value === undefined) return document.documentElement.classList\n  if (typeof value === 'string')\n    return document.querySelector(value)?.classList ?? undefined\n  return value.classList\n}\n\nconst getVariant = (\n  type: string,\n  classList?: DOMTokenList | undefined,\n): string | undefined => {\n  if (!classList) return undefined\n\n  const prefix = `qds-${type}-`\n\n  return [...classList]\n    .find((value: string): value is string => value.startsWith(prefix))\n    ?.replace(prefix, '')\n}\n\nconst setVariant = (\n  type: string,\n  value: string,\n  element?: Element | string,\n): void => {\n  const classList = toClassList(element)\n  if (classList === undefined) return\n\n  const prefix = `qds-${type}-`\n\n  const currentVariant = getVariant(type, classList)\n  if (currentVariant !== undefined)\n    classList.remove(`${prefix}${currentVariant}`)\n  classList.add(`${prefix}${value}`)\n}\n\n// eslint-disable-next-line @typescript-eslint/no-type-alias\ntype NonEmpty<T extends string = string> = T extends '' ? never : T\n\n/**\n * Get the currently set platform.\n *\n * @param element The element where the platform will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set platform if one is set, `undefined` otherwise.\n */\nexport const getPlatform = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('platform', toClassList(element))\n\n/**\n * Sets the current platform.\n *\n * The current platform represented by a `qds-platform-`-prefixed CSS class\n * will be removed.\n *\n * @param platform The platform to set. Must be a non-empty value.\n * @param element The element where the platform will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setPlatform = <\n  P extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  platform: NonEmpty<P>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('platform', platform, element)\n}\n\n/**\n * Get the currently set theme.\n *\n * @param element The element where the theme will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set theme if one is set, `undefined` otherwise.\n */\nexport const getTheme = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('theme', toClassList(element))\n\n/**\n * Sets the current theme.\n *\n * The current theme represented by a `qds-theme-`-prefixed CSS class will be\n * removed.\n *\n * @param theme The theme to set. Must be a non-empty value.\n * @param element The element where the theme will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setTheme = <\n  T extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  theme: NonEmpty<T>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('theme', theme, element)\n}\n"],"version":3}

package/components/qds-divider.d.ts

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

package/components/qds-divider.js

@@ -0,0 +1,49 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './helpers.js';
+
+const dividerCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:block}.divider{border:1px solid transparent;display:flex;margin-block:0}[data-importance='standard']{border-color:var(--qds-theme-divider-standard)}[data-importance='emphasized']{border-color:var(--qds-theme-divider-emphasized)}";
+
+const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.inheritedAttributes = {};
+    this.importance = 'standard';
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.element);
+  }
+  render() {
+    return (h("hr", { class: "divider", "data-importance": this.importance, ...this.inheritedAttributes }));
+  }
+  get element() { return this; }
+  static get style() { return dividerCss; }
+}, [1, "qds-divider", {
+    "importance": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["qds-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "qds-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Divider);
+      }
+      break;
+  } });
+}
+
+const QdsDivider = Divider;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsDivider, defineCustomElement };
+
+//# sourceMappingURL=qds-divider.js.map

package/components/qds-divider.js.map

@@ -0,0 +1 @@
+{"file":"qds-divider.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,mYAAmY;;MC0BzY,OAAO;;;;;IASV,wBAAmB,GAAe,EAAE,CAAA;sBAJ1C,UAAU;;EAML,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM;IACX,QACE,UACE,KAAK,EAAC,SAAS,qBACE,IAAI,CAAC,UAAU,KAE5B,IAAI,CAAC,mBAAmB,GAC5B,EACH;GACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/divider/divider.css?tag=qds-divider&encapsulation=shadow","src/components/divider/divider.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.divider {\n  border: 1px solid transparent;\n  display: flex;\n  margin-block: 0;\n}\n\n[data-importance='standard'] {\n  border-color: var(--qds-theme-divider-standard);\n}\n\n[data-importance='emphasized'] {\n  border-color: var(--qds-theme-divider-emphasized);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type DividerImportance = 'emphasized' | 'standard'\n\n/**\n * The `<qds-divider>` element a thematic break between paragraph-level\n * elements: for example, a change of scene in a story, or a shift of topic\n * within a section.\n *\n * Dividers can also be used to group menu items in `<qds-dropdown>` elements.\n *\n * @see https://quartz.se.com/build/components/divider\n */\n@Component({\n  tag: 'qds-divider',\n  shadow: true,\n  styleUrl: 'divider.css',\n})\nexport class Divider implements ComponentInterface {\n  /**\n   * The divider's importance.\n   */\n  @Prop({ reflect: true }) public readonly importance: DividerImportance =\n    'standard'\n\n  @Element() private readonly element!: HTMLQdsDividerElement\n\n  private inheritedAttributes: Attributes = {}\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    return (\n      <hr\n        class=\"divider\"\n        data-importance={this.importance}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -11,7 +11,7 @@ const index = require('./index-d181f952.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return index.bootstrapLazy([["qds-icon.cjs",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]],["qds-checkbox.cjs",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dropdown.cjs",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input.cjs",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea.cjs",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip.cjs",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]]], options);
+  return index.bootstrapLazy([["qds-checkbox.cjs",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-divider.cjs",[[1,"qds-divider",{"importance":[513]}]]],["qds-dropdown.cjs",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input.cjs",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea.cjs",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip.cjs",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]],["qds-icon.cjs",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/qds-divider.cjs.entry.js

@@ -0,0 +1,33 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d181f952.js');
+const helpers = require('./helpers-452256e8.js');
+
+const dividerCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:block}.divider{border:1px solid transparent;display:flex;margin-block:0}[data-importance='standard']{border-color:var(--qds-theme-divider-standard)}[data-importance='emphasized']{border-color:var(--qds-theme-divider-emphasized)}";
+
+const Divider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.inheritedAttributes = {};
+    this.importance = 'standard';
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = helpers.inheritAriaAttributes(this.element);
+  }
+  render() {
+    return (index.h("hr", { class: "divider", "data-importance": this.importance, ...this.inheritedAttributes }));
+  }
+  get element() { return index.getElement(this); }
+};
+Divider.style = dividerCss;
+
+exports.qds_divider = Divider;
+
+//# sourceMappingURL=qds-divider.cjs.entry.js.map

package/dist/cjs/qds-divider.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"qds-divider.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,UAAU,GAAG,mYAAmY;;MC0BzY,OAAO;;;IASV,wBAAmB,GAAe,EAAE,CAAA;sBAJ1C,UAAU;;EAML,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAGA,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM;IACX,QACEC,gBACE,KAAK,EAAC,SAAS,qBACE,IAAI,CAAC,UAAU,KAE5B,IAAI,CAAC,mBAAmB,GAC5B,EACH;GACF;;;;;;;","names":["inheritAriaAttributes","h"],"sources":["src/components/divider/divider.css?tag=qds-divider&encapsulation=shadow","src/components/divider/divider.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.divider {\n  border: 1px solid transparent;\n  display: flex;\n  margin-block: 0;\n}\n\n[data-importance='standard'] {\n  border-color: var(--qds-theme-divider-standard);\n}\n\n[data-importance='emphasized'] {\n  border-color: var(--qds-theme-divider-emphasized);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type DividerImportance = 'emphasized' | 'standard'\n\n/**\n * The `<qds-divider>` element a thematic break between paragraph-level\n * elements: for example, a change of scene in a story, or a shift of topic\n * within a section.\n *\n * Dividers can also be used to group menu items in `<qds-dropdown>` elements.\n *\n * @see https://quartz.se.com/build/components/divider\n */\n@Component({\n  tag: 'qds-divider',\n  shadow: true,\n  styleUrl: 'divider.css',\n})\nexport class Divider implements ComponentInterface {\n  /**\n   * The divider's importance.\n   */\n  @Prop({ reflect: true }) public readonly importance: DividerImportance =\n    'standard'\n\n  @Element() private readonly element!: HTMLQdsDividerElement\n\n  private inheritedAttributes: Attributes = {}\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    return (\n      <hr\n        class=\"divider\"\n        data-importance={this.importance}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n}\n"],"version":3}

package/dist/cjs/qds.cjs.js

@@ -22,7 +22,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["qds-icon.cjs",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]],["qds-checkbox.cjs",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dropdown.cjs",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input.cjs",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea.cjs",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip.cjs",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]]], options);
+  return index.bootstrapLazy([["qds-checkbox.cjs",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-divider.cjs",[[1,"qds-divider",{"importance":[513]}]]],["qds-dropdown.cjs",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input.cjs",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea.cjs",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip.cjs",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]],["qds-icon.cjs",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/custom-elements.json

@@ -811,6 +811,83 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/divider/divider.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<qds-divider>` element a thematic break between paragraph-level\nelements: for example, a change of scene in a story, or a shift of topic\nwithin a section.\n\nDividers can also be used to group menu items in `<qds-dropdown>` elements.",
+          "name": "Divider",
+          "members": [
+            {
+              "kind": "field",
+              "name": "importance",
+              "type": {
+                "text": "DividerImportance"
+              },
+              "privacy": "public",
+              "readonly": true,
+              "default": "'standard'",
+              "description": "The divider's importance."
+            },
+            {
+              "kind": "field",
+              "name": "element",
+              "type": {
+                "text": "HTMLQdsDividerElement"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "inheritedAttributes",
+              "type": {
+                "text": "Attributes"
+              },
+              "privacy": "private",
+              "default": "{}"
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "importance",
+              "fieldName": "importance",
+              "type": {
+                "text": "DividerImportance"
+              }
+            }
+          ],
+          "tagName": "qds-divider",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Divider",
+          "declaration": {
+            "name": "Divider",
+            "module": "src/components/divider/divider.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "qds-divider",
+          "declaration": {
+            "name": "Divider",
+            "module": "src/components/divider/divider.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/dropdown/dropdown.tsx",

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-07-16T23:51:06",
+  "timestamp": "2023-07-18T01:45:42",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.0.1",
@@ -1119,6 +1119,64 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/divider/divider.tsx",
+      "encapsulation": "shadow",
+      "tag": "qds-divider",
+      "readme": "<!--\nSPDX-FileCopyrightText: © 2023 Schneider Electric\n\nSPDX-License-Identifier: LGPL-2.1-only\n-->\n\n# qds-divider\n",
+      "docs": "The `<qds-divider>` element a thematic break between paragraph-level\nelements: for example, a change of scene in a story, or a shift of topic\nwithin a section.\n\nDividers can also be used to group menu items in `<qds-dropdown>` elements.",
+      "docsTags": [
+        {
+          "name": "see",
+          "text": "https://quartz.se.com/build/components/divider"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "importance",
+          "type": "\"emphasized\" | \"standard\"",
+          "complexType": {
+            "original": "DividerImportance",
+            "resolved": "\"emphasized\" | \"standard\"",
+            "references": {
+              "DividerImportance": {
+                "location": "local",
+                "path": "/home/runner/work/core-foundations/core-foundations/packages/core/src/components/divider/divider.tsx",
+                "id": "src/components/divider/divider.tsx::DividerImportance"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "importance",
+          "reflectToAttr": true,
+          "docs": "The divider's importance.",
+          "docsTags": [],
+          "default": "'standard'",
+          "values": [
+            {
+              "value": "emphasized",
+              "type": "string"
+            },
+            {
+              "value": "standard",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/dropdown/dropdown.tsx",
       "encapsulation": "shadow",
@@ -6297,6 +6355,11 @@
       "docstring": "",
       "path": "src/components/checkbox/checkbox.tsx"
     },
+    "src/components/divider/divider.tsx::DividerImportance": {
+      "declaration": "export type DividerImportance = 'emphasized' | 'standard'",
+      "docstring": "",
+      "path": "src/components/divider/divider.tsx"
+    },
     "src/components/inline-link/inline-link.tsx::Target": {
       "declaration": "export type Target = '_blank' | '_parent' | '_self' | '_top'",
       "docstring": "",

package/dist/esm/loader.js

@@ -8,7 +8,7 @@ export { s as setNonce } from './index-d7183092.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return bootstrapLazy([["qds-icon",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]],["qds-checkbox",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dropdown",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]]], options);
+  return bootstrapLazy([["qds-checkbox",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-divider",[[1,"qds-divider",{"importance":[513]}]]],["qds-dropdown",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]],["qds-icon",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/qds-divider.entry.js

@@ -0,0 +1,29 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { r as registerInstance, h, a as getElement } from './index-d7183092.js';
+import { i as inheritAriaAttributes } from './helpers-76b84f45.js';
+
+const dividerCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:block}.divider{border:1px solid transparent;display:flex;margin-block:0}[data-importance='standard']{border-color:var(--qds-theme-divider-standard)}[data-importance='emphasized']{border-color:var(--qds-theme-divider-emphasized)}";
+
+const Divider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.inheritedAttributes = {};
+    this.importance = 'standard';
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.element);
+  }
+  render() {
+    return (h("hr", { class: "divider", "data-importance": this.importance, ...this.inheritedAttributes }));
+  }
+  get element() { return getElement(this); }
+};
+Divider.style = dividerCss;
+
+export { Divider as qds_divider };
+
+//# sourceMappingURL=qds-divider.entry.js.map

package/dist/esm/qds-divider.entry.js.map

@@ -0,0 +1 @@
+{"file":"qds-divider.entry.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,mYAAmY;;MC0BzY,OAAO;;;IASV,wBAAmB,GAAe,EAAE,CAAA;sBAJ1C,UAAU;;EAML,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM;IACX,QACE,UACE,KAAK,EAAC,SAAS,qBACE,IAAI,CAAC,UAAU,KAE5B,IAAI,CAAC,mBAAmB,GAC5B,EACH;GACF;;;;;;;","names":[],"sources":["src/components/divider/divider.css?tag=qds-divider&encapsulation=shadow","src/components/divider/divider.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.divider {\n  border: 1px solid transparent;\n  display: flex;\n  margin-block: 0;\n}\n\n[data-importance='standard'] {\n  border-color: var(--qds-theme-divider-standard);\n}\n\n[data-importance='emphasized'] {\n  border-color: var(--qds-theme-divider-emphasized);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type DividerImportance = 'emphasized' | 'standard'\n\n/**\n * The `<qds-divider>` element a thematic break between paragraph-level\n * elements: for example, a change of scene in a story, or a shift of topic\n * within a section.\n *\n * Dividers can also be used to group menu items in `<qds-dropdown>` elements.\n *\n * @see https://quartz.se.com/build/components/divider\n */\n@Component({\n  tag: 'qds-divider',\n  shadow: true,\n  styleUrl: 'divider.css',\n})\nexport class Divider implements ComponentInterface {\n  /**\n   * The divider's importance.\n   */\n  @Prop({ reflect: true }) public readonly importance: DividerImportance =\n    'standard'\n\n  @Element() private readonly element!: HTMLQdsDividerElement\n\n  private inheritedAttributes: Attributes = {}\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    return (\n      <hr\n        class=\"divider\"\n        data-importance={this.importance}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n}\n"],"version":3}

package/dist/esm/qds.js

@@ -19,7 +19,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["qds-icon",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]],["qds-checkbox",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dropdown",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]]], options);
+  return bootstrapLazy([["qds-checkbox",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-divider",[[1,"qds-divider",{"importance":[513]}]]],["qds-dropdown",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-textarea",[[2,"qds-textarea",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"cols":[1026],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"maxLength":[2,"maxlength"],"minLength":[2,"minlength"],"name":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"rows":[1026],"spellCheck":[4,"spellcheck"],"value":[1032],"wrap":[1025],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64]}]]],["qds-tooltip",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]],["qds-icon",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]]], options);
 });
 
 //# sourceMappingURL=qds.js.map

package/dist/types/components/divider/divider.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+export type DividerImportance = 'emphasized' | 'standard';
+/**
+ * The `<qds-divider>` element a thematic break between paragraph-level
+ * elements: for example, a change of scene in a story, or a shift of topic
+ * within a section.
+ *
+ * Dividers can also be used to group menu items in `<qds-dropdown>` elements.
+ *
+ * @see https://quartz.se.com/build/components/divider
+ */
+export declare class Divider implements ComponentInterface {
+  /**
+   * The divider's importance.
+   */
+  readonly importance: DividerImportance;
+  private readonly element;
+  private inheritedAttributes;
+  componentWillLoad(): void;
+  render(): any;
+}
+//# sourceMappingURL=divider.d.ts.map

package/dist/types/components.d.ts

@@ -9,6 +9,7 @@ import { ButtonSize, ButtonTarget, ButtonType, FormMethod, Importance } from "./
 import { LiteralUnion } from "type-fest";
 import { OffsetOptions, QdsFocusEventDetail, QdsInputEventDetail } from "./helpers";
 import { CheckboxSize, CheckboxValue } from "./components/checkbox/checkbox";
+import { DividerImportance } from "./components/divider/divider";
 import { AutoUpdateOptions, DetectOverflowOptions, FlipOptions, Placement, ReferenceElement, ShiftOptions, Strategy } from "@floating-ui/dom";
 import { Target } from "./components/inline-link/inline-link";
 import { InputAutoComplete, InputSize, InputType } from "./components/input/input";
@@ -22,6 +23,7 @@ export { ButtonSize, ButtonTarget, ButtonType, FormMethod, Importance } from "./
 export { LiteralUnion } from "type-fest";
 export { OffsetOptions, QdsFocusEventDetail, QdsInputEventDetail } from "./helpers";
 export { CheckboxSize, CheckboxValue } from "./components/checkbox/checkbox";
+export { DividerImportance } from "./components/divider/divider";
 export { AutoUpdateOptions, DetectOverflowOptions, FlipOptions, Placement, ReferenceElement, ShiftOptions, Strategy } from "@floating-ui/dom";
 export { Target } from "./components/inline-link/inline-link";
 export { InputAutoComplete, InputSize, InputType } from "./components/input/input";
@@ -194,6 +196,19 @@ export namespace Components {
          */
         "value"?: CheckboxValue;
     }
+    /**
+     * The `<qds-divider>` element a thematic break between paragraph-level
+     * elements: for example, a change of scene in a story, or a shift of topic
+     * within a section.
+     * Dividers can also be used to group menu items in `<qds-dropdown>` elements.
+     * @see https://quartz.se.com/build/components/divider
+     */
+    interface QdsDivider {
+        /**
+          * The divider's importance.
+         */
+        "importance": DividerImportance;
+    }
     /**
      * @experimental 
      * @see https://quartz.se.com/build/components/dropdown
@@ -921,6 +936,19 @@ declare global {
         prototype: HTMLQdsCheckboxElement;
         new (): HTMLQdsCheckboxElement;
     };
+    /**
+     * The `<qds-divider>` element a thematic break between paragraph-level
+     * elements: for example, a change of scene in a story, or a shift of topic
+     * within a section.
+     * Dividers can also be used to group menu items in `<qds-dropdown>` elements.
+     * @see https://quartz.se.com/build/components/divider
+     */
+    interface HTMLQdsDividerElement extends Components.QdsDivider, HTMLStencilElement {
+    }
+    var HTMLQdsDividerElement: {
+        prototype: HTMLQdsDividerElement;
+        new (): HTMLQdsDividerElement;
+    };
     /**
      * @experimental 
      * @see https://quartz.se.com/build/components/dropdown
@@ -1036,6 +1064,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "qds-button": HTMLQdsButtonElement;
         "qds-checkbox": HTMLQdsCheckboxElement;
+        "qds-divider": HTMLQdsDividerElement;
         "qds-dropdown": HTMLQdsDropdownElement;
         "qds-icon": HTMLQdsIconElement;
         "qds-inline-link": HTMLQdsInlineLinkElement;
@@ -1219,6 +1248,19 @@ declare namespace LocalJSX {
          */
         "value"?: CheckboxValue;
     }
+    /**
+     * The `<qds-divider>` element a thematic break between paragraph-level
+     * elements: for example, a change of scene in a story, or a shift of topic
+     * within a section.
+     * Dividers can also be used to group menu items in `<qds-dropdown>` elements.
+     * @see https://quartz.se.com/build/components/divider
+     */
+    interface QdsDivider {
+        /**
+          * The divider's importance.
+         */
+        "importance"?: DividerImportance;
+    }
     /**
      * @experimental 
      * @see https://quartz.se.com/build/components/dropdown
@@ -1877,6 +1919,7 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "qds-button": QdsButton;
         "qds-checkbox": QdsCheckbox;
+        "qds-divider": QdsDivider;
         "qds-dropdown": QdsDropdown;
         "qds-icon": QdsIcon;
         "qds-inline-link": QdsInlineLink;
@@ -1909,6 +1952,14 @@ declare module "@stencil/core" {
              * @see https://quartz.se.com/build/components/checkbox
              */
             "qds-checkbox": LocalJSX.QdsCheckbox & JSXBase.HTMLAttributes<HTMLQdsCheckboxElement>;
+            /**
+             * The `<qds-divider>` element a thematic break between paragraph-level
+             * elements: for example, a change of scene in a story, or a shift of topic
+             * within a section.
+             * Dividers can also be used to group menu items in `<qds-dropdown>` elements.
+             * @see https://quartz.se.com/build/components/divider
+             */
+            "qds-divider": LocalJSX.QdsDivider & JSXBase.HTMLAttributes<HTMLQdsDividerElement>;
             /**
              * @experimental 
              * @see https://quartz.se.com/build/components/dropdown

package/dist/vscode.html-custom-data.json

@@ -214,6 +214,27 @@
         }
       ]
     },
+    {
+      "name": "qds-divider",
+      "description": {
+        "kind": "markdown",
+        "value": "The `<qds-divider>` element a thematic break between paragraph-level\nelements: for example, a change of scene in a story, or a shift of topic\nwithin a section.\n\nDividers can also be used to group menu items in `<qds-dropdown>` elements."
+      },
+      "attributes": [
+        {
+          "name": "importance",
+          "description": "The divider's importance.",
+          "values": [
+            {
+              "name": "emphasized"
+            },
+            {
+              "name": "standard"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "qds-dropdown",
       "description": {

package/hydrate/index.js

@@ -6202,6 +6202,43 @@ class Checkbox {
   }; }
 }
 
+const dividerCss = "/*!@:host*/.sc-qds-divider-h{box-sizing:border-box}/*!@:host([hidden])*/[hidden].sc-qds-divider-h{display:none !important}/*!@:host([hidden])*//*!@:host *,\n:host *::before,\n:host *::after*/.sc-qds-divider-h *.sc-qds-divider,.sc-qds-divider-h *.sc-qds-divider::before,.sc-qds-divider-h *.sc-qds-divider::after{box-sizing:inherit}/*!@:host*/.sc-qds-divider-h{display:block}/*!@.divider*/.divider.sc-qds-divider{border:1px solid transparent;display:flex;margin-block:0}/*!@[data-importance='standard']*/[data-importance='standard'].sc-qds-divider{border-color:var(--qds-theme-divider-standard)}/*!@[data-importance='emphasized']*/[data-importance='emphasized'].sc-qds-divider{border-color:var(--qds-theme-divider-emphasized)}";
+
+/**
+ * The `<qds-divider>` element a thematic break between paragraph-level
+ * elements: for example, a change of scene in a story, or a shift of topic
+ * within a section.
+ *
+ * Dividers can also be used to group menu items in `<qds-dropdown>` elements.
+ *
+ * @see https://quartz.se.com/build/components/divider
+ */
+class Divider {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.inheritedAttributes = {};
+    this.importance = 'standard';
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.element);
+  }
+  render() {
+    return (hAsync("hr", { class: "divider", "data-importance": this.importance, ...this.inheritedAttributes }));
+  }
+  get element() { return getElement(this); }
+  static get style() { return dividerCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "qds-divider",
+    "$members$": {
+      "importance": [513]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["importance", "importance"]]
+  }; }
+}
+
 function getAlignment(placement) {
   return placement.split('-')[1];
 }
@@ -9085,6 +9122,7 @@ class Tooltip {
 registerComponents([
   Button,
   Checkbox,
+  Divider,
   Dropdown,
   Icon,
   InlineLink,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quartzds/core",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "description": "Quartz design system web components",
   "homepage": "https://github.com/quartzds/core-foundations/tree/main/packages/core",
   "bugs": {
@@ -176,14 +176,14 @@
     "type-fest": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.8",
+    "@babel/core": "7.22.9",
     "@babel/plugin-proposal-decorators": "7.22.7",
     "@babel/plugin-proposal-export-default-from": "7.22.5",
-    "@babel/preset-env": "7.22.7",
+    "@babel/preset-env": "7.22.9",
     "@babel/preset-typescript": "7.22.5",
     "@custom-elements-manifest/analyzer": "0.8.3",
     "@jest/globals": "29.6.1",
-    "@playwright/test": "1.35.1",
+    "@playwright/test": "1.36.1",
     "@quartzds/browserslist-config": "1.1.1",
     "@quartzds/generic-tokens-core": "1.0.0-beta.1",
     "@quartzds/tailwind-preset": "1.0.0-beta.5",
@@ -194,20 +194,20 @@
     "@storybook/addon-a11y": "7.0.26",
     "@storybook/addon-docs": "7.0.26",
     "@storybook/addon-essentials": "7.0.26",
-    "@storybook/addon-styling": "1.3.2",
+    "@storybook/addon-styling": "1.3.4",
     "@storybook/builder-webpack5": "7.0.26",
     "@storybook/mdx2-csf": "1.1.0",
     "@storybook/web-components": "7.0.26",
     "@storybook/web-components-webpack5": "7.0.26",
     "@types/postcss-import": "14.0.0",
     "@types/react": "18.2.14",
-    "babel-loader": "9.1.2",
+    "babel-loader": "9.1.3",
     "babel-plugin-macros": "3.1.0",
     "core-js": "3.31.1",
     "css-loader": "6.8.1",
     "lit": "2.7.6",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.25",
+    "postcss": "8.4.26",
     "postcss-import": "15.1.0",
     "postcss-loader": "7.3.3",
     "postcss-preset-env": "9.0.0",