@quartzds/core 1.0.0-beta.38 → 1.0.0-beta.39
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.
- package/components/qds-title.js +1 -1
- package/components/qds-title.js.map +1 -1
- package/dist/cjs/qds-title.cjs.entry.js +1 -1
- package/dist/cjs/qds-title.cjs.entry.js.map +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/qds-title.entry.js +1 -1
- package/dist/esm/qds-title.entry.js.map +1 -1
- package/hydrate/index.js +1 -1
- package/package.json +1 -1
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;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
|
+
const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle';grid-template-columns:auto 1fr}.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 {
|
|
@@ -1 +1 @@
|
|
|
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}
|
|
1
|
+
{"file":"qds-title.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,wqOAAwqO,CAAC;AAC1rO,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 grid-template-columns: auto 1fr;\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}
|
|
@@ -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;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)}";
|
|
13
|
+
const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle';grid-template-columns:auto 1fr}.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 {
|
|
@@ -1 +1 @@
|
|
|
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}
|
|
1
|
+
{"file":"qds-title.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,wqOAAwqO,CAAC;AAC1rO,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 grid-template-columns: auto 1fr;\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
|
@@ -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;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)}";
|
|
9
|
+
const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle';grid-template-columns:auto 1fr}.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 {
|
|
@@ -1 +1 @@
|
|
|
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}
|
|
1
|
+
{"file":"qds-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,wqOAAwqO,CAAC;AAC1rO,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 grid-template-columns: auto 1fr;\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
|
@@ -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;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)}";
|
|
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';grid-template-columns:auto 1fr}/*!@.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