@quartzds/core 1.0.0-beta.36 → 1.0.0-beta.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/components/qds-list-item.js +1 -1
  2. package/components/qds-list-item.js.map +1 -1
  3. package/components/qds-title.js +1 -1
  4. package/components/qds-title.js.map +1 -1
  5. package/dist/cjs/qds-list-item.cjs.entry.js +1 -1
  6. package/dist/cjs/qds-list-item.cjs.entry.js.map +1 -1
  7. package/dist/cjs/qds-title.cjs.entry.js +1 -1
  8. package/dist/cjs/qds-title.cjs.entry.js.map +1 -1
  9. package/dist/docs.json +1 -1
  10. package/dist/esm/qds-list-item.entry.js +1 -1
  11. package/dist/esm/qds-list-item.entry.js.map +1 -1
  12. package/dist/esm/qds-title.entry.js +1 -1
  13. package/dist/esm/qds-title.entry.js.map +1 -1
  14. package/hydrate/index.js +2 -2
  15. package/package.json +1 -1
package/components/qds-list-item.js CHANGED
@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
7
7
  import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers.js';
8
8
  import { d as defineCustomElement$2 } from './icon.js';
9
9
 
10
- const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
10
+ const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-icon{color:var(--qds-theme-text-standard)}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
11
11
  const QdsListItemStyle0 = listItemCss;
12
12
 
13
13
  const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLElement {
package/components/qds-list-item.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"qds-list-item.js","mappings":";;;;;;;;;AAAA,MAAM,WAAW,GAAG,0gIAA0gI,CAAC;AAC/hI,0BAAe,WAAW;;MC6Bb,QAAQ;;;;;;;QAmEX,wBAAmB,GAAe,EAAE,CAAA;QAqG3B,WAAM,GAAG,CAAC,KAAiB;YAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,CAAA;QAEgB,YAAO,GAAG,CAAC,KAAiB;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,CAAA;wBAzK2C,KAAK;;2BAYH,SAAS;0BAKT,KAAK;;oBAUb,UAAU;wBAKJ,KAAK;;;yBA0BpB,KAAK;wBAEN,CAAC;;IAI7B,IAAY,YAAY;QACtB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,UAAU,CAAC;YAChB,KAAK,OAAO,CAAC;YACb,KAAK,OAAO,EAAE;gBACZ,OAAO,IAAI,CAAC,IAAI,CAAA;aACjB;YACD,SAAS;gBACP,OAAO,UAAU,CAAA;aAClB;SACF;KACF;IAGS,OAAO,CAAC,KAAiB;QACjC,IAAI,IAAI,CAAC,QAAQ;YAAE,KAAK,CAAC,wBAAwB,EAAE,CAAA;KACpD;IAGS,gBAAgB;QACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAA;KACxC;IAGS,eAAe,CAAC,QAAgB;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACjD,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;KAC5D;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC9D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAA;QAEvC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAA;QAC7D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACjD,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;KAC5D;IAEM,MAAM;QACX,QACE,2DACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,cAAc,EAAE,IAAI,CAAC,QAAQ;gBAC7B,cAAc,EAAE,IAAI,CAAC,QAAQ;aAC9B,KAEG,IAAI,CAAC,mBAAmB,IAE5B,+DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,IAAI,CAAC,SAAS;gBAC/B,cAAc,EAAE,IAAI,CAAC,QAAQ;aAC9B,eACU,IAAI,CAAC,YAAY,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,eAAe,IACxB,gBACE,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,WAAW,GAChB,CACE,CACP,EACA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,GACnB,CACH,EACD,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAO,EACtC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,KAChD,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,OAAO,CAAO,CAC9C,EACA,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,KAC9C,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAO,CAC5C,CACG,EACL,IAAI,CAAC,UAAU,KACd,gBACE,KAAK,EAAC,iCAAiC,EACvC,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,YAAY,GACjB,CACH,CACM,CACN,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &:not(.qds-selected) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Whether or not this list item denotes a navigation action.\n */\n @Prop() public readonly navigation: boolean = false\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop() public readonly selected: boolean = false\n\n /**\n * Text to display for the subtext.\n */\n @Prop() public readonly subtext?: string\n\n /**\n * Primary text to display.\n */\n @Prop() public readonly text!: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1
+ {"file":"qds-list-item.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &:not(.qds-selected) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n.qds-icon {\n color: var(--qds-theme-text-standard);\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Whether or not this list item denotes a navigation action.\n */\n @Prop() public readonly navigation: boolean = false\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop() public readonly selected: boolean = false\n\n /**\n * Text to display for the subtext.\n */\n @Prop() public readonly subtext?: string\n\n /**\n * Primary text to display.\n */\n @Prop() public readonly text!: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
package/components/qds-title.js CHANGED
@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
7
7
  import { i as inheritAriaAttributes } from './helpers.js';
8
8
  import { d as defineCustomElement$2 } from './icon.js';
9
9
 
10
- const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
10
+ const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
11
11
  const QdsTitleStyle0 = titleCss;
12
12
 
13
13
  const Title = /*@__PURE__*/ proxyCustomElement(class Title extends HTMLElement {
package/components/qds-title.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"qds-title.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,omOAAomO,CAAC;AACtnO,uBAAe,QAAQ;;MCsBV,KAAK;;;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACE,+DACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzB,8DAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\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 Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
1
+ {"file":"qds-title.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,yoOAAyoO,CAAC;AAC3pO,uBAAe,QAAQ;;MCsBV,KAAK;;;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACE,+DACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzB,8DAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\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 Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
package/dist/cjs/qds-list-item.cjs.entry.js CHANGED
@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
10
10
  const index = require('./index-584d4de9.js');
11
11
  const helpers = require('./helpers-cc2fda81.js');
12
12
 
13
- const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
13
+ const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-icon{color:var(--qds-theme-text-standard)}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
14
14
  const QdsListItemStyle0 = listItemCss;
15
15
 
16
16
  const ListItem = class {
package/dist/cjs/qds-list-item.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"qds-list-item.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &:not(.qds-selected) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Whether or not this list item denotes a navigation action.\n */\n @Prop() public readonly navigation: boolean = false\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop() public readonly selected: boolean = false\n\n /**\n * Text to display for the subtext.\n */\n @Prop() public readonly subtext?: string\n\n /**\n * Primary text to display.\n */\n @Prop() public readonly text!: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1
+ {"file":"qds-list-item.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &:not(.qds-selected) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n.qds-icon {\n color: var(--qds-theme-text-standard);\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Whether or not this list item denotes a navigation action.\n */\n @Prop() public readonly navigation: boolean = false\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop() public readonly selected: boolean = false\n\n /**\n * Text to display for the subtext.\n */\n @Prop() public readonly subtext?: string\n\n /**\n * Primary text to display.\n */\n @Prop() public readonly text!: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
package/dist/cjs/qds-title.cjs.entry.js CHANGED
@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
10
10
  const index = require('./index-584d4de9.js');
11
11
  const helpers = require('./helpers-cc2fda81.js');
12
12
 
13
- const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
13
+ const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
14
14
  const QdsTitleStyle0 = titleCss;
15
15
 
16
16
  const Title = class {
package/dist/cjs/qds-title.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"qds-title.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,omOAAomO,CAAC;AACtnO,uBAAe,QAAQ;;MCsBV,KAAK;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAGA,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACEC,qEACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5BA,QAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzBA,oEAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAIA,eAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAIA,eAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClDA,sBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;","names":["inheritAriaAttributes","h"],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\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 Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
1
+ {"file":"qds-title.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,yoOAAyoO,CAAC;AAC3pO,uBAAe,QAAQ;;MCsBV,KAAK;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAGA,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACEC,qEACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5BA,QAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzBA,oEAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAIA,eAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAIA,eAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClDA,sBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;","names":["inheritAriaAttributes","h"],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\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 Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-03-25T14:19:22",
2
+ "timestamp": "2024-04-02T15:03:58",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.12.0",
package/dist/esm/qds-list-item.entry.js CHANGED
@@ -6,7 +6,7 @@
6
6
  import { r as registerInstance, c as createEvent, h, a as getElement } from './index-8135df23.js';
7
7
  import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers-ff47826f.js';
8
8
 
9
- const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
9
+ const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-icon{color:var(--qds-theme-text-standard)}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
10
10
  const QdsListItemStyle0 = listItemCss;
11
11
 
12
12
  const ListItem = class {
package/dist/esm/qds-list-item.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"qds-list-item.entry.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &:not(.qds-selected) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Whether or not this list item denotes a navigation action.\n */\n @Prop() public readonly navigation: boolean = false\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop() public readonly selected: boolean = false\n\n /**\n * Text to display for the subtext.\n */\n @Prop() public readonly subtext?: string\n\n /**\n * Primary text to display.\n */\n @Prop() public readonly text!: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1
+ {"file":"qds-list-item.entry.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &:not(.qds-selected) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n.qds-icon {\n color: var(--qds-theme-text-standard);\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Whether or not this list item denotes a navigation action.\n */\n @Prop() public readonly navigation: boolean = false\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop() public readonly selected: boolean = false\n\n /**\n * Text to display for the subtext.\n */\n @Prop() public readonly subtext?: string\n\n /**\n * Primary text to display.\n */\n @Prop() public readonly text!: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
package/dist/esm/qds-title.entry.js CHANGED
@@ -6,7 +6,7 @@
6
6
  import { r as registerInstance, h, a as getElement } from './index-8135df23.js';
7
7
  import { i as inheritAriaAttributes } from './helpers-ff47826f.js';
8
8
 
9
- const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
9
+ const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
10
10
  const QdsTitleStyle0 = titleCss;
11
11
 
12
12
  const Title = class {
package/dist/esm/qds-title.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"qds-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,omOAAomO,CAAC;AACtnO,uBAAe,QAAQ;;MCsBV,KAAK;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACE,+DACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzB,8DAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\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 Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
1
+ {"file":"qds-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,yoOAAyoO,CAAC;AAC3pO,uBAAe,QAAQ;;MCsBV,KAAK;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACE,+DACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzB,8DAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\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 Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
package/hydrate/index.js CHANGED
@@ -10616,7 +10616,7 @@ class Label {
10616
10616
  }; }
10617
10617
  }
10618
10618
 
10619
- const listItemCss = "/*!@:host([hidden])*/[hidden].sc-qds-list-item-h{display:none !important}/*!@:host*/.sc-qds-list-item-h{display:block}/*!@.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts*/.qds-draggable.sc-qds-list-item,.qds-button.sc-qds-list-item,.qds-list-item.sc-qds-list-item,.qds-texts.sc-qds-list-item{display:flex}/*!@.qds-button,\n.qds-texts*/.qds-button.sc-qds-list-item,.qds-texts.sc-qds-list-item{flex:1 0}/*!@.qds-draggable,\n.qds-button*/.qds-draggable.sc-qds-list-item,.qds-button.sc-qds-list-item{align-items:center}/*!@.qds-text,\n.qds-navigation*/.qds-text.sc-qds-list-item,.qds-navigation.sc-qds-list-item{color:var(--qds-theme-title)}/*!@.qds-button*/.qds-button.sc-qds-list-item{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}/*!@.qds-button:focus-visible*/.qds-button.sc-qds-list-item:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}/*!@.qds-button:not(.qds-selected):hover*/.qds-button.sc-qds-list-item:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}/*!@.qds-button:not(.qds-selected):active*/.qds-button.sc-qds-list-item:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}/*!@.qds-disabled*/.qds-disabled.sc-qds-list-item{opacity:var(--qds-theme-disabled);pointer-events:none}/*!@.qds-draggable*/.qds-draggable.sc-qds-list-item{color:var(--qds-theme-control-text-standard);justify-content:center}/*!@.qds-list-item*/.qds-list-item.sc-qds-list-item{border-block-end:var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard)}/*!@.qds-navigation*/.qds-navigation.sc-qds-list-item{transform:scaleX(var(--qds-direction-factor, 1))}/*!@.qds-texts*/.qds-texts.sc-qds-list-item{flex-direction:column}/*!@.qds-subtext*/.qds-subtext.sc-qds-list-item{color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-list-item{color:var(--qds-theme-kicker);order:-1}/*!@.qds-button[data-size='small']*/.qds-button[data-size='small'].sc-qds-list-item{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}/*!@[data-size='small'] > .qds-draggable*/[data-size='small'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}/*!@[data-size='small'] .qds-control-icon*/[data-size='small'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-small-icon-size)}/*!@[data-size='small'] > .qds-icon*/[data-size='small'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-small-icon-size)}/*!@[data-size='small'] > .qds-texts*/[data-size='small'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-small-titles-gap)}/*!@[data-size='small'] .qds-text*/[data-size='small'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-small-title)}/*!@[data-size='small'] .qds-subtext*/[data-size='small'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-small-subtitle)}/*!@[data-size='small'] .qds-kicker*/[data-size='small'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-small-kicker)}/*!@.qds-button[data-size='standard']*/.qds-button[data-size='standard'].sc-qds-list-item{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}/*!@[data-size='standard'] > .qds-draggable*/[data-size='standard'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}/*!@[data-size='standard'] .qds-control-icon*/[data-size='standard'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-standard-icon-size)}/*!@[data-size='standard'] > .qds-icon*/[data-size='standard'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-standard-icon-size)}/*!@[data-size='standard'] > .qds-texts*/[data-size='standard'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-standard-titles-gap)}/*!@[data-size='standard'] .qds-text*/[data-size='standard'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-standard-title)}/*!@[data-size='standard'] .qds-subtext*/[data-size='standard'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-standard-subtitle)}/*!@[data-size='standard'] .qds-kicker*/[data-size='standard'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-standard-kicker)}/*!@.qds-button[data-size='large']*/.qds-button[data-size='large'].sc-qds-list-item{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}/*!@[data-size='large'] > .qds-draggable*/[data-size='large'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}/*!@[data-size='large'] .qds-control-icon*/[data-size='large'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-large-icon-size)}/*!@[data-size='large'] > .qds-icon*/[data-size='large'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-large-icon-size)}/*!@[data-size='large'] > .qds-texts*/[data-size='large'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-large-titles-gap)}/*!@[data-size='large'] .qds-text*/[data-size='large'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-large-title)}/*!@[data-size='large'] .qds-subtext*/[data-size='large'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-large-subtitle)}/*!@[data-size='large'] .qds-kicker*/[data-size='large'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-large-kicker)}/*!@.qds-selected.qds-list-item*/.qds-selected.qds-list-item.sc-qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}/*!@.qds-selected[data-size='small'] .qds-text*/.qds-selected[data-size='small'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-small-title-emphasized)}/*!@.qds-selected[data-size='standard'] .qds-text*/.qds-selected[data-size='standard'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-standard-title-emphasized)}/*!@.qds-selected[data-size='large'] .qds-text*/.qds-selected[data-size='large'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-large-title-emphasized)}/*!@:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable*/.sc-qds-list-item:is([data-size='small'].sc-qds-list-item,[data-size='standard'].sc-qds-list-item,[data-size='large'].sc-qds-list-item).qds-draggable.sc-qds-list-item{padding-inline-start:0}";
10619
+ const listItemCss = "/*!@:host([hidden])*/[hidden].sc-qds-list-item-h{display:none !important}/*!@:host*/.sc-qds-list-item-h{display:block}/*!@.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts*/.qds-draggable.sc-qds-list-item,.qds-button.sc-qds-list-item,.qds-list-item.sc-qds-list-item,.qds-texts.sc-qds-list-item{display:flex}/*!@.qds-button,\n.qds-texts*/.qds-button.sc-qds-list-item,.qds-texts.sc-qds-list-item{flex:1 0}/*!@.qds-draggable,\n.qds-button*/.qds-draggable.sc-qds-list-item,.qds-button.sc-qds-list-item{align-items:center}/*!@.qds-text,\n.qds-navigation*/.qds-text.sc-qds-list-item,.qds-navigation.sc-qds-list-item{color:var(--qds-theme-title)}/*!@.qds-button*/.qds-button.sc-qds-list-item{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}/*!@.qds-button:focus-visible*/.qds-button.sc-qds-list-item:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}/*!@.qds-button:not(.qds-selected):hover*/.qds-button.sc-qds-list-item:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}/*!@.qds-button:not(.qds-selected):active*/.qds-button.sc-qds-list-item:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}/*!@.qds-disabled*/.qds-disabled.sc-qds-list-item{opacity:var(--qds-theme-disabled);pointer-events:none}/*!@.qds-draggable*/.qds-draggable.sc-qds-list-item{color:var(--qds-theme-control-text-standard);justify-content:center}/*!@.qds-list-item*/.qds-list-item.sc-qds-list-item{border-block-end:var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard)}/*!@.qds-navigation*/.qds-navigation.sc-qds-list-item{transform:scaleX(var(--qds-direction-factor, 1))}/*!@.qds-texts*/.qds-texts.sc-qds-list-item{flex-direction:column}/*!@.qds-subtext*/.qds-subtext.sc-qds-list-item{color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-list-item{color:var(--qds-theme-kicker);order:-1}/*!@.qds-icon*/.qds-icon.sc-qds-list-item{color:var(--qds-theme-text-standard)}/*!@.qds-button[data-size='small']*/.qds-button[data-size='small'].sc-qds-list-item{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}/*!@[data-size='small'] > .qds-draggable*/[data-size='small'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}/*!@[data-size='small'] .qds-control-icon*/[data-size='small'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-small-icon-size)}/*!@[data-size='small'] > .qds-icon*/[data-size='small'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-small-icon-size)}/*!@[data-size='small'] > .qds-texts*/[data-size='small'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-small-titles-gap)}/*!@[data-size='small'] .qds-text*/[data-size='small'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-small-title)}/*!@[data-size='small'] .qds-subtext*/[data-size='small'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-small-subtitle)}/*!@[data-size='small'] .qds-kicker*/[data-size='small'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-small-kicker)}/*!@.qds-button[data-size='standard']*/.qds-button[data-size='standard'].sc-qds-list-item{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}/*!@[data-size='standard'] > .qds-draggable*/[data-size='standard'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}/*!@[data-size='standard'] .qds-control-icon*/[data-size='standard'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-standard-icon-size)}/*!@[data-size='standard'] > .qds-icon*/[data-size='standard'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-standard-icon-size)}/*!@[data-size='standard'] > .qds-texts*/[data-size='standard'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-standard-titles-gap)}/*!@[data-size='standard'] .qds-text*/[data-size='standard'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-standard-title)}/*!@[data-size='standard'] .qds-subtext*/[data-size='standard'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-standard-subtitle)}/*!@[data-size='standard'] .qds-kicker*/[data-size='standard'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-standard-kicker)}/*!@.qds-button[data-size='large']*/.qds-button[data-size='large'].sc-qds-list-item{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}/*!@[data-size='large'] > .qds-draggable*/[data-size='large'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}/*!@[data-size='large'] .qds-control-icon*/[data-size='large'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-large-icon-size)}/*!@[data-size='large'] > .qds-icon*/[data-size='large'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-large-icon-size)}/*!@[data-size='large'] > .qds-texts*/[data-size='large'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-large-titles-gap)}/*!@[data-size='large'] .qds-text*/[data-size='large'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-large-title)}/*!@[data-size='large'] .qds-subtext*/[data-size='large'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-large-subtitle)}/*!@[data-size='large'] .qds-kicker*/[data-size='large'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-large-kicker)}/*!@.qds-selected.qds-list-item*/.qds-selected.qds-list-item.sc-qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}/*!@.qds-selected[data-size='small'] .qds-text*/.qds-selected[data-size='small'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-small-title-emphasized)}/*!@.qds-selected[data-size='standard'] .qds-text*/.qds-selected[data-size='standard'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-standard-title-emphasized)}/*!@.qds-selected[data-size='large'] .qds-text*/.qds-selected[data-size='large'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-large-title-emphasized)}/*!@:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable*/.sc-qds-list-item:is([data-size='small'].sc-qds-list-item,[data-size='standard'].sc-qds-list-item,[data-size='large'].sc-qds-list-item).qds-draggable.sc-qds-list-item{padding-inline-start:0}";
10620
10620
  var QdsListItemStyle0 = listItemCss;
10621
10621
 
10622
10622
  /**
@@ -11851,7 +11851,7 @@ class TextArea {
11851
11851
  }; }
11852
11852
  }
11853
11853
 
11854
- const titleCss = "/*!@:host([hidden])*/[hidden].sc-qds-title-h{display:none !important}/*!@:host*/.sc-qds-title-h{display:block}/*!@.qds-titles*/.qds-titles.sc-qds-title{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}/*!@.qds-has-icon*/.qds-has-icon.sc-qds-title{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}/*!@.qds-title,\n.qds-subtitle,\n.qds-kicker*/.qds-title.sc-qds-title,.qds-subtitle.sc-qds-title,.qds-kicker.sc-qds-title{margin-block:0}/*!@.qds-title*/.qds-title.sc-qds-title{grid-area:title;color:var(--qds-theme-title)}/*!@.qds-subtitle*/.qds-subtitle.sc-qds-title{grid-area:subtitle;color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-title{grid-area:kicker;color:var(--qds-theme-kicker)}/*!@.qds-icon*/.qds-icon.sc-qds-title{grid-area:icon}/*!@.qds-main.qds-section.qds-titles*/.qds-main.qds-section.qds-titles.sc-qds-title{gap:var(--qds-main-section-titles-gap)}/*!@.qds-main.qds-section.qds-has-icon*/.qds-main.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}/*!@.qds-main.qds-section .qds-title*/.qds-main.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-title)}/*!@.qds-main.qds-section .qds-subtitle*/.qds-main.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-section-subtitle)}/*!@.qds-main.qds-section .qds-kicker*/.qds-main.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-section-kicker)}/*!@.qds-main.qds-section .qds-icon*/.qds-main.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}/*!@.qds-main.qds-subsection.qds-titles*/.qds-main.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)}/*!@.qds-main.qds-subsection.qds-has-icon*/.qds-main.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}/*!@.qds-main.qds-subsection .qds-title*/.qds-main.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-subsection-title)}/*!@.qds-main.qds-subsection .qds-subtitle*/.qds-main.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-subsection-subtitle)}/*!@.qds-main.qds-subsection .qds-kicker*/.qds-main.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-subsection-kicker)}/*!@.qds-main.qds-subsection .qds-icon*/.qds-main.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}/*!@.qds-panel.qds-root.qds-titles*/.qds-panel.qds-root.qds-titles.sc-qds-title{gap:var(--qds-panel-titles-gap)}/*!@.qds-panel.qds-root.qds-has-icon*/.qds-panel.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}/*!@.qds-panel.qds-root .qds-title*/.qds-panel.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-title)}/*!@.qds-panel.qds-root .qds-subtitle*/.qds-panel.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subtitle)}/*!@.qds-panel.qds-root .qds-kicker*/.qds-panel.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-kicker)}/*!@.qds-panel.qds-root .qds-icon*/.qds-panel.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}/*!@.qds-panel.qds-section.qds-titles*/.qds-panel.qds-section.qds-titles.sc-qds-title{gap:var(--qds-panel-section-titles-gap)}/*!@.qds-panel.qds-section.qds-has-icon*/.qds-panel.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}/*!@.qds-panel.qds-section .qds-title*/.qds-panel.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-section-title)}/*!@.qds-panel.qds-section .qds-subtitle*/.qds-panel.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-section-subtitle)}/*!@.qds-panel.qds-section .qds-kicker*/.qds-panel.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-section-kicker)}/*!@.qds-panel.qds-section .qds-icon*/.qds-panel.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}/*!@.qds-panel.qds-subsection.qds-titles*/.qds-panel.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)}/*!@.qds-panel.qds-subsection.qds-has-icon*/.qds-panel.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}/*!@.qds-panel.qds-subsection .qds-title*/.qds-panel.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-subsection-title)}/*!@.qds-panel.qds-subsection .qds-subtitle*/.qds-panel.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subsection-subtitle)}/*!@.qds-panel.qds-subsection .qds-kicker*/.qds-panel.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-subsection-kicker)}/*!@.qds-panel.qds-subsection .qds-icon*/.qds-panel.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}/*!@.qds-navigation.qds-section.qds-titles*/.qds-navigation.qds-section.qds-titles.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)}/*!@.qds-navigation.qds-section.qds-has-icon*/.qds-navigation.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}/*!@.qds-navigation.qds-section .qds-title*/.qds-navigation.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-section-title)}/*!@.qds-navigation.qds-section .qds-subtitle*/.qds-navigation.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-section-subtitle)}/*!@.qds-navigation.qds-section .qds-kicker*/.qds-navigation.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-section-kicker)}/*!@.qds-navigation.qds-section .qds-icon*/.qds-navigation.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}/*!@.qds-navigation.qds-subsection.qds-titles*/.qds-navigation.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)}/*!@.qds-navigation.qds-subsection.qds-has-icon*/.qds-navigation.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}/*!@.qds-navigation.qds-subsection .qds-title*/.qds-navigation.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-subsection-title)}/*!@.qds-navigation.qds-subsection .qds-subtitle*/.qds-navigation.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-subsection-subtitle)}/*!@.qds-navigation.qds-subsection .qds-kicker*/.qds-navigation.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-subsection-kicker)}/*!@.qds-navigation.qds-subsection .qds-icon*/.qds-navigation.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}/*!@.qds-popup.qds-root.qds-titles*/.qds-popup.qds-root.qds-titles.sc-qds-title{gap:var(--qds-popup-titles-gap)}/*!@.qds-popup.qds-root.qds-has-icon*/.qds-popup.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}/*!@.qds-popup.qds-root .qds-title*/.qds-popup.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-title)}/*!@.qds-popup.qds-root .qds-subtitle*/.qds-popup.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subtitle)}/*!@.qds-popup.qds-root .qds-kicker*/.qds-popup.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-kicker)}/*!@.qds-popup.qds-root .qds-icon*/.qds-popup.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}/*!@.qds-popup.qds-section.qds-titles*/.qds-popup.qds-section.qds-titles.sc-qds-title{gap:var(--qds-popup-section-titles-gap)}/*!@.qds-popup.qds-section.qds-has-icon*/.qds-popup.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}/*!@.qds-popup.qds-section .qds-title*/.qds-popup.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-section-title)}/*!@.qds-popup.qds-section .qds-subtitle*/.qds-popup.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-section-subtitle)}/*!@.qds-popup.qds-section .qds-kicker*/.qds-popup.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-section-kicker)}/*!@.qds-popup.qds-section .qds-icon*/.qds-popup.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}/*!@.qds-popup.qds-subsection.qds-titles*/.qds-popup.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)}/*!@.qds-popup.qds-subsection.qds-has-icon*/.qds-popup.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}/*!@.qds-popup.qds-subsection .qds-title*/.qds-popup.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-subsection-title)}/*!@.qds-popup.qds-subsection .qds-subtitle*/.qds-popup.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subsection-subtitle)}/*!@.qds-popup.qds-subsection .qds-kicker*/.qds-popup.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-subsection-kicker)}/*!@.qds-popup.qds-subsection .qds-icon*/.qds-popup.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}/*!@.qds-accessory.qds-root.qds-titles*/.qds-accessory.qds-root.qds-titles.sc-qds-title{gap:var(--qds-accessory-titles-gap)}/*!@.qds-accessory.qds-root.qds-has-icon*/.qds-accessory.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}/*!@.qds-accessory.qds-root .qds-title*/.qds-accessory.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-title)}/*!@.qds-accessory.qds-root .qds-subtitle*/.qds-accessory.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-subtitle)}/*!@.qds-accessory.qds-root .qds-kicker*/.qds-accessory.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-kicker)}/*!@.qds-accessory.qds-root .qds-icon*/.qds-accessory.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}/*!@.qds-accessory.qds-section.qds-titles*/.qds-accessory.qds-section.qds-titles.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)}/*!@.qds-accessory.qds-section.qds-has-icon*/.qds-accessory.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}/*!@.qds-accessory.qds-section .qds-title*/.qds-accessory.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-section-title)}/*!@.qds-accessory.qds-section .qds-subtitle*/.qds-accessory.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-section-subtitle)}/*!@.qds-accessory.qds-section .qds-kicker*/.qds-accessory.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-section-kicker)}/*!@.qds-accessory.qds-section .qds-icon*/.qds-accessory.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
11854
+ const titleCss = "/*!@:host([hidden])*/[hidden].sc-qds-title-h{display:none !important}/*!@:host*/.sc-qds-title-h{display:block}/*!@.qds-titles*/.qds-titles.sc-qds-title{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}/*!@.qds-has-icon*/.qds-has-icon.sc-qds-title{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}/*!@.qds-title,\n.qds-subtitle,\n.qds-kicker*/.qds-title.sc-qds-title,.qds-subtitle.sc-qds-title,.qds-kicker.sc-qds-title{margin-block:0}/*!@.qds-title*/.qds-title.sc-qds-title{grid-area:title;color:var(--qds-theme-title)}/*!@.qds-subtitle*/.qds-subtitle.sc-qds-title{grid-area:subtitle;color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-title{grid-area:kicker;color:var(--qds-theme-kicker)}/*!@.qds-icon*/.qds-icon.sc-qds-title{grid-area:icon;color:var(--qds-theme-text-standard)}/*!@.qds-main.qds-section.qds-titles*/.qds-main.qds-section.qds-titles.sc-qds-title{gap:var(--qds-main-section-titles-gap)}/*!@.qds-main.qds-section.qds-has-icon*/.qds-main.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}/*!@.qds-main.qds-section .qds-title*/.qds-main.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-title)}/*!@.qds-main.qds-section .qds-subtitle*/.qds-main.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-section-subtitle)}/*!@.qds-main.qds-section .qds-kicker*/.qds-main.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-section-kicker)}/*!@.qds-main.qds-section .qds-icon*/.qds-main.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}/*!@.qds-main.qds-subsection.qds-titles*/.qds-main.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)}/*!@.qds-main.qds-subsection.qds-has-icon*/.qds-main.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}/*!@.qds-main.qds-subsection .qds-title*/.qds-main.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-subsection-title)}/*!@.qds-main.qds-subsection .qds-subtitle*/.qds-main.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-subsection-subtitle)}/*!@.qds-main.qds-subsection .qds-kicker*/.qds-main.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-subsection-kicker)}/*!@.qds-main.qds-subsection .qds-icon*/.qds-main.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}/*!@.qds-panel.qds-root.qds-titles*/.qds-panel.qds-root.qds-titles.sc-qds-title{gap:var(--qds-panel-titles-gap)}/*!@.qds-panel.qds-root.qds-has-icon*/.qds-panel.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}/*!@.qds-panel.qds-root .qds-title*/.qds-panel.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-title)}/*!@.qds-panel.qds-root .qds-subtitle*/.qds-panel.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subtitle)}/*!@.qds-panel.qds-root .qds-kicker*/.qds-panel.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-kicker)}/*!@.qds-panel.qds-root .qds-icon*/.qds-panel.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}/*!@.qds-panel.qds-section.qds-titles*/.qds-panel.qds-section.qds-titles.sc-qds-title{gap:var(--qds-panel-section-titles-gap)}/*!@.qds-panel.qds-section.qds-has-icon*/.qds-panel.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}/*!@.qds-panel.qds-section .qds-title*/.qds-panel.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-section-title)}/*!@.qds-panel.qds-section .qds-subtitle*/.qds-panel.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-section-subtitle)}/*!@.qds-panel.qds-section .qds-kicker*/.qds-panel.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-section-kicker)}/*!@.qds-panel.qds-section .qds-icon*/.qds-panel.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}/*!@.qds-panel.qds-subsection.qds-titles*/.qds-panel.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)}/*!@.qds-panel.qds-subsection.qds-has-icon*/.qds-panel.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}/*!@.qds-panel.qds-subsection .qds-title*/.qds-panel.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-subsection-title)}/*!@.qds-panel.qds-subsection .qds-subtitle*/.qds-panel.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subsection-subtitle)}/*!@.qds-panel.qds-subsection .qds-kicker*/.qds-panel.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-subsection-kicker)}/*!@.qds-panel.qds-subsection .qds-icon*/.qds-panel.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}/*!@.qds-navigation.qds-section.qds-titles*/.qds-navigation.qds-section.qds-titles.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)}/*!@.qds-navigation.qds-section.qds-has-icon*/.qds-navigation.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}/*!@.qds-navigation.qds-section .qds-title*/.qds-navigation.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-section-title)}/*!@.qds-navigation.qds-section .qds-subtitle*/.qds-navigation.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-section-subtitle)}/*!@.qds-navigation.qds-section .qds-kicker*/.qds-navigation.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-section-kicker)}/*!@.qds-navigation.qds-section .qds-icon*/.qds-navigation.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}/*!@.qds-navigation.qds-subsection.qds-titles*/.qds-navigation.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)}/*!@.qds-navigation.qds-subsection.qds-has-icon*/.qds-navigation.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}/*!@.qds-navigation.qds-subsection .qds-title*/.qds-navigation.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-subsection-title)}/*!@.qds-navigation.qds-subsection .qds-subtitle*/.qds-navigation.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-subsection-subtitle)}/*!@.qds-navigation.qds-subsection .qds-kicker*/.qds-navigation.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-subsection-kicker)}/*!@.qds-navigation.qds-subsection .qds-icon*/.qds-navigation.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}/*!@.qds-popup.qds-root.qds-titles*/.qds-popup.qds-root.qds-titles.sc-qds-title{gap:var(--qds-popup-titles-gap)}/*!@.qds-popup.qds-root.qds-has-icon*/.qds-popup.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}/*!@.qds-popup.qds-root .qds-title*/.qds-popup.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-title)}/*!@.qds-popup.qds-root .qds-subtitle*/.qds-popup.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subtitle)}/*!@.qds-popup.qds-root .qds-kicker*/.qds-popup.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-kicker)}/*!@.qds-popup.qds-root .qds-icon*/.qds-popup.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}/*!@.qds-popup.qds-section.qds-titles*/.qds-popup.qds-section.qds-titles.sc-qds-title{gap:var(--qds-popup-section-titles-gap)}/*!@.qds-popup.qds-section.qds-has-icon*/.qds-popup.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}/*!@.qds-popup.qds-section .qds-title*/.qds-popup.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-section-title)}/*!@.qds-popup.qds-section .qds-subtitle*/.qds-popup.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-section-subtitle)}/*!@.qds-popup.qds-section .qds-kicker*/.qds-popup.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-section-kicker)}/*!@.qds-popup.qds-section .qds-icon*/.qds-popup.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}/*!@.qds-popup.qds-subsection.qds-titles*/.qds-popup.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)}/*!@.qds-popup.qds-subsection.qds-has-icon*/.qds-popup.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}/*!@.qds-popup.qds-subsection .qds-title*/.qds-popup.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-subsection-title)}/*!@.qds-popup.qds-subsection .qds-subtitle*/.qds-popup.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subsection-subtitle)}/*!@.qds-popup.qds-subsection .qds-kicker*/.qds-popup.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-subsection-kicker)}/*!@.qds-popup.qds-subsection .qds-icon*/.qds-popup.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}/*!@.qds-accessory.qds-root.qds-titles*/.qds-accessory.qds-root.qds-titles.sc-qds-title{gap:var(--qds-accessory-titles-gap)}/*!@.qds-accessory.qds-root.qds-has-icon*/.qds-accessory.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}/*!@.qds-accessory.qds-root .qds-title*/.qds-accessory.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-title)}/*!@.qds-accessory.qds-root .qds-subtitle*/.qds-accessory.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-subtitle)}/*!@.qds-accessory.qds-root .qds-kicker*/.qds-accessory.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-kicker)}/*!@.qds-accessory.qds-root .qds-icon*/.qds-accessory.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}/*!@.qds-accessory.qds-section.qds-titles*/.qds-accessory.qds-section.qds-titles.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)}/*!@.qds-accessory.qds-section.qds-has-icon*/.qds-accessory.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}/*!@.qds-accessory.qds-section .qds-title*/.qds-accessory.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-section-title)}/*!@.qds-accessory.qds-section .qds-subtitle*/.qds-accessory.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-section-subtitle)}/*!@.qds-accessory.qds-section .qds-kicker*/.qds-accessory.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-section-kicker)}/*!@.qds-accessory.qds-section .qds-icon*/.qds-accessory.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
11855
11855
  var QdsTitleStyle0 = titleCss;
11856
11856
 
11857
11857
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quartzds/core",
3
- "version": "1.0.0-beta.36",
3
+ "version": "1.0.0-beta.37",
4
4
  "description": "Quartz design system web components",
5
5
  "homepage": "https://github.com/quartzds/core-foundations/tree/main/packages/core",
6
6
  "bugs": {