1import{r as d,n as l,L as f,x as s,e as p}from"./main-DdEGjCiE.js";import{e as g}from"./query-D1pSaKds.js";import{o as x}from"./if-defined-DIE9v4-k.js";const u=`@charset "UTF-8"; 2/* ------------------------------------*\\ 3 #TYPOGRAPHY PLACEHOLDERS 4\\*------------------------------------ */ 5.leaf-c-tag leaf-button::part(base) { 6 font-family: var(--leaf-typography-label-small-font-family); 7 font-size: var(--leaf-typography-label-small-font-size); 8 font-weight: var(--leaf-typography-label-small-font-weight); 9 line-height: var(--leaf-typography-label-small-line-height); 10 -webkit-text-decoration: var(--leaf-typography-label-small-text-decoration); 11 text-decoration: var(--leaf-typography-label-small-text-decoration); 12 text-transform: var(--leaf-typography-label-small-text-transform); 13} 14 15.leaf-container-full-width, .iw_columns.large-fullwidth { 16 left: 50%; 17 margin-left: -50dvw; 18 margin-right: -50dvw; 19 position: relative; 20 right: 50%; 21 width: 100dvw; 22} 23 24.leaf-grid-container { 25 box-sizing: border-box; 26 margin-left: auto; 27 margin-right: auto; 28 padding-left: 1rem; 29 padding-right: 1rem; 30 width: 100%; 31} 32@media (min-width: 35rem) { 33 .leaf-grid-container { 34 max-width: 540px; 35 } 36} 37@media (min-width: 48rem) { 38 .leaf-grid-container { 39 max-width: 720px; 40 } 41} 42@media (min-width: 60rem) { 43 .leaf-grid-container { 44 max-width: 960px; 45 } 46} 47@media (min-width: 75rem) { 48 .leaf-grid-container { 49 max-width: 1140px; 50 } 51} 52@media (min-width: 87.5rem) { 53 .leaf-grid-container { 54 max-width: 1320px; 55 } 56} 57 58.leaf-container-12, .leaf-container-4-1-7, .leaf-container-5-1-6, .leaf-container-7-1-4, .leaf-container-5-7, .leaf-container-7-5, .leaf-container-6-6, .leaf-container-6-1-5, .leaf-container-8-1-3, .leaf-container-4-4-4, .leaf-container-2-8-2, .leaf-container-3-2-2-2-3, .leaf-container-3-2-4-3, .leaf-container-3-3-3-3, .leaf-container-1-10-1, .leaf-container-3-6-3, .leaf-container-8-4, .leaf-container-4-8, .leaf-container-9-3, .leaf-container-3-9 { 59 display: grid; 60} 61 62/* 63 Hiding class, making content visible only to screen readers but not visually ("sr" meaning "screen-reader") 64 Is the hidden content read by a screen reader? - Yes 65 Will the hidden element affect the document layout? - No 66 Will the hidden elementâs box model be rendered? - No 67 Does the element detect clicks or focus? - Yes 68 https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/#method-5-the-visually-hidden-class 69*/ 70.leaf-container-12 { 71 grid-template-columns: minmax(0, 1fr); 72} 73@media (min-width: 48rem) { 74 .leaf-container-4-1-7 { 75 grid-gap: var(--leaf-spacing-24); 76 grid-template-columns: minmax(0, calc(8.3333333333% * 4 - 16px)) minmax(0, calc(8.3333333333% * 1 - 16px)) minmax(0, calc(8.3333333333% * 7 - 16px)); 77 } 78} 79@media (min-width: 48rem) { 80 .leaf-container-5-1-6 { 81 grid-gap: var(--leaf-spacing-24); 82 grid-template-columns: minmax(0, calc(8.3333333333% * 5 - 16px)) minmax(0, calc(8.3333333333% * 1 - 16px)) minmax(0, calc(8.3333333333% * 6 - 16px)); 83 } 84} 85@media (min-width: 48rem) { 86 .leaf-container-7-1-4 { 87 grid-gap: var(--leaf-spacing-24); 88 grid-template-columns: minmax(0, calc(8.3333333333% * 7 - 16px)) minmax(0, calc(8.3333333333% * 1 - 16px)) minmax(0, calc(8.3333333333% * 4 - 16px)); 89 } 90} 91@media (min-width: 48rem) { 92 .leaf-container-5-7 { 93 grid-gap: var(--leaf-spacing-24); 94 grid-template-columns: minmax(0, calc(8.3333333333% * 5 - 12px)) minmax(0, calc(8.3333333333% * 7 - 12px)); 95 } 96} 97@media (min-width: 48rem) { 98 .leaf-container-7-5 { 99 grid-gap: var(--leaf-spacing-24); 100 grid-template-columns: minmax(0, calc(8.3333333333% * 7 - 12px)) minmax(0, calc(8.3333333333% * 5 - 12px)); 101 } 102} 103@media (min-width: 48rem) { 104 .leaf-container-6-6 { 105 grid-gap: var(--leaf-spacing-24); 106 grid-template-columns: minmax(0, calc(8.3333333333% * 6 - 12px)) minmax(0, calc(8.3333333333% * 6 - 12px)); 107 } 108} 109@media (min-width: 48rem) { 110 .leaf-container-6-1-5 { 111 grid-gap: var(--leaf-spacing-24); 112 grid-template-columns: minmax(0, calc(8.3333333333% * 6 - 16px)) minmax(0, calc(8.3333333333% * 1 - 16px)) minmax(0, calc(8.3333333333% * 5 - 16px)); 113 } 114} 115@media (min-width: 48rem) { 116 .leaf-container-8-1-3 { 117 grid-gap: var(--leaf-spacing-24); 118 grid-template-columns: minmax(0, calc(8.3333333333% * 8 - 16px)) minmax(0, calc(8.3333333333% * 1 - 16px)) minmax(0, calc(8.3333333333% * 3 - 16px)); 119 } 120} 121@media (min-width: 48rem) { 122 .leaf-container-4-4-4 { 123 grid-gap: var(--leaf-spacing-24); 124 grid-template-columns: minmax(0, calc(8.3333333333% * 4 - 16px)) minmax(0, calc(8.3333333333% * 4 - 16px)) minmax(0, calc(8.3333333333% * 4 - 16px)); 125 } 126} 127@media (min-width: 48rem) {
128 .leaf-container-2-8-2 { 129 grid-gap: var(--leaf-spacing-24); 130 grid-template-columns: minmax(0, calc(8.3333333333% * 2 - 16px)) minmax(0, calc(8.3333333333% * 8 - 16px)) minmax(0, calc(8.3333333333% * 2 - 16px)); 131 } 132} 133@media (min-width: 48rem) { 134 .leaf-container-3-2-2-2-3 { 135 grid-gap: var(--leaf-spacing-24); 136 grid-template-columns: minmax(0, calc(8.3333333333% * 3 - 19.2px)) minmax(0, calc(8.3333333333% * 2 - 19.2px)) minmax(0, calc(8.3333333333% * 2 - 19.2px)) minmax(0, calc(8.3333333333% * 2 - 19.2px)) minmax(0, calc(8.3333333333% * 3 - 19.2px)); 137 } 138} 139@media (min-width: 48rem) { 140 .leaf-container-3-2-4-3 { 141 grid-gap: var(--leaf-spacing-24); 142 grid-template-columns: minmax(0, calc(8.3333333333% * 3 - 18px)) minmax(0, calc(8.3333333333% * 2 - 18px)) minmax(0, calc(8.3333333333% * 4 - 18px)) minmax(0, calc(8.3333333333% * 3 - 18px)); 143 } 144} 145@media (min-width: 48rem) { 146 .leaf-container-3-3-3-3 { 147 grid-gap: var(--leaf-spacing-24); 148 grid-template-columns: minmax(0, calc(8.3333333333% * 3 - 18px)) minmax(0, calc(8.3333333333% * 3 - 18px)) minmax(0, calc(8.3333333333% * 3 - 18px)) minmax(0, calc(8.3333333333% * 3 - 18px)); 149 } 150} 151@media (min-width: 48rem) { 152 .leaf-container-1-10-1 { 153 grid-gap: var(--leaf-spacing-24); 154 grid-template-columns: minmax(0, calc(8.3333333333% * 1 - 16px)) minmax(0, calc(8.3333333333% * 10 - 16px)) minmax(0, calc(8.3333333333% * 1 - 16px)); 155 } 156} 157@media (min-width: 48rem) { 158 .leaf-container-3-6-3 { 159 grid-gap: var(--leaf-spacing-24); 160 grid-template-columns: minmax(0, calc(8.3333333333% * 3 - 16px)) minmax(0, calc(8.3333333333% * 6 - 16px)) minmax(0, calc(8.3333333333% * 3 - 16px)); 161 } 162} 163@media (min-width: 48rem) { 164 .leaf-container-8-4 { 165 grid-gap: var(--leaf-spacing-24); 166 grid-template-columns: minmax(0, calc(8.3333333333% * 8 - 12px)) minmax(0, calc(8.3333333333% * 4 - 12px)); 167 } 168} 169@media (min-width: 48rem) { 170 .leaf-container-4-8 { 171 grid-gap: var(--leaf-spacing-24); 172 grid-template-columns: minmax(0, calc(8.3333333333% * 4 - 12px)) minmax(0, calc(8.3333333333% * 8 - 12px)); 173 } 174} 175@media (min-width: 48rem) { 176 .leaf-container-9-3 { 177 grid-gap: var(--leaf-spacing-24); 178 grid-template-columns: minmax(0, calc(8.3333333333% * 9 - 12px)) minmax(0, calc(8.3333333333% * 3 - 12px)); 179 } 180} 181@media (min-width: 48rem) { 182 .leaf-container-3-9 { 183 grid-gap: var(--leaf-spacing-24); 184 grid-template-columns: minmax(0, calc(8.3333333333% * 3 - 12px)) minmax(0, calc(8.3333333333% * 9 - 12px)); 185 } 186} 187@media (max-width: 47.999rem) { 188 .leaf-container-7-1-4, .leaf-container-4-1-7, .leaf-container-5-7, .leaf-container-7-5, .leaf-container-6-6 { 189 grid-template-areas: "row-1" "row-2"; 190 } 191 .leaf-container-7-1-4.container-inverted, .leaf-container-4-1-7.container-inverted, .leaf-container-5-7.container-inverted, .leaf-container-7-5.container-inverted, .leaf-container-6-6.container-inverted { 192 /* stylelint-disable-next-line max-nesting-depth */ 193 } 194 .leaf-container-7-1-4.container-inverted > :nth-child(1), .leaf-container-4-1-7.container-inverted > :nth-child(1), .leaf-container-5-7.container-inverted > :nth-child(1), .leaf-container-7-5.container-inverted > :nth-child(1), .leaf-container-6-6.container-inverted > :nth-child(1) { 195 grid-area: row-2; 196 } 197} 198.iw_row { 199 display: grid; 200} 201@media (min-width: 48rem) { 202 .iw_row { 203 gap: var(--leaf-spacing-24); 204 grid-template-columns: repeat(12, 1fr); 205 } 206} 207 208.iw_columns { 209 display: grid; 210} 211.iw_columns.large-fullwidth { 212 grid-column: span 12; 213} 214@media (min-width: 48rem) { 215 .iw_columns.large-1 { 216 grid-column: span 1; 217 } 218 .iw_columns.large-2 { 219 grid-column: span 2; 220 } 221 .iw_columns.large-3 { 222 grid-column: span 3; 223 } 224 .iw_columns.large-4 { 225 grid-column: span 4; 226 } 227 .iw_columns.large-5 { 228 grid-column: span 5; 229 } 230 .iw_columns.large-6 { 231 grid-column: span 6; 232 } 233 .iw_columns.large-7 { 234 grid-column: span 7; 235 } 236 .iw_columns.large-8 { 237 grid-column: span 8; 238 } 239 .iw_columns.large-9 { 240 grid-column: span 9; 241 } 242 .iw_columns.large-10 { 243 grid-column: span 10; 244 } 245 .iw_columns.large-11 { 246 grid-column: span 11; 247 } 248 .iw_columns.large-12 { 249 grid-column: span 12; 250 } 251} 252 253leaf-accordion, 254leaf-alert, 255leaf-card, 256leaf-list, 257leaf-multimedia-limelight, 258leaf-tab, 259.leaf-c-content-block, 260.leaf-c-picture-image { 261 display: block; 262 margin-top: var(--leaf-spacing-32); 263} 264@media (min-width: 48rem) { 265 leaf-accordion, 266 leaf-alert, 267 leaf-card, 268 leaf-list, 269 leaf-multimedia-limelight, 270 leaf-tab, 271 .leaf-c-content-block, 272 .leaf-c-picture-image { 273 margin-top: var(--leaf-spacing-48); 274 } 275} 276@media (min-width: 60rem) { 277 leaf-accordion, 278 leaf-alert, 279 leaf-card, 280 leaf-list, 281 leaf-multimedia-limelight, 282 leaf-tab, 283 .leaf-c-content-block, 284 .leaf-c-picture-image { 285 margin-top: var(--leaf-spacing-64); 286 } 287} 288 289:host { 290 display: block; 291} 292 293:host(:disabled) { 294 pointer-events: none; 295} 296:host(:disabled) leaf-button::part(base) { 297 background-color: var(--leaf-color-bg-disabled); 298 border-color: var(--leaf-color-border-disabled); 299 color: var(--leaf-color-content-disabled); 300} 301:host(:disabled) leaf-button::part(base):hover, :host(:disabled) leaf-button::part(base):focus, :host(:disabled) leaf-button::part(base):active { 302 background-color: var(--leaf-color-bg-disabled); 303 border-color: var(--leaf-color-border-disabled); 304 color: var(--leaf-color-content-disabled); 305} 306 307.leaf-c-tag leaf-button::part(base) { 308 justify-content: center; 309 text-align: center; 310 height: 2rem; 311 padding: var(--leaf-spacing-0) var(--leaf-spacing-16) var(--leaf-spacing-0) var(--leaf-spacing-16) !important; 312 border: 1px solid var(--leaf-color-border-strong) !important; 313 color: var(--leaf-color-content-default); 314 gap: var(--leaf-spacing-8); 315 flex-direction: row; 316} 317.leaf-c-tag leaf-button::part(base):hover { 318 background-color: var(--leaf-color-bg-default-hover); 319 color: var(--leaf-color-content-default); 320} 321.leaf-c-tag leaf-button::part(base):focus { 322 background-color: var(--leaf-color-bg-default-hover); 323 color: var(--leaf-color-content-default); 324 outline: var(--leaf-border-width-focus) solid var(--leaf-color-border-strong); 325 outline-offset: var(--leaf-border-width-focus); 326} 327.leaf-c-tag leaf-button::part(base):active { 328 background-color: var(--leaf-color-bg-brand-strong); 329 border-color: var(--leaf-color-border-transparent); 330 color: var(--leaf-color-content-knockout); 331} 332 333.leaf-c-tag-branded leaf-button::part(base) { 334 background-color: var(--leaf-color-bg-brand); 335 border: var(--leaf-spacing-0) !important; 336} 337.leaf-c-tag-branded leaf-button::part(base):hover { 338 background-color: var(--leaf-color-bg-brand-hover); 339} 340.leaf-c-tag-branded leaf-button::part(base):focus { 341 background-color: var(--leaf-color-bg-brand-hover); 342} 343.leaf-c-tag-branded leaf-button::part(base):active { 344 background-color: var(--leaf-color-bg-brand-xstrong); 345 color: var(--leaf-color-content-knockout); 346} 347 348.leaf-c-tag-hybrid leaf-button::part(base) { 349 color: var(--leaf-color-content-brand); 350} 351.leaf-c-tag-hybrid leaf-button::part(base):active { 352 background-color: var(--leaf-color-button-secondary-bg-active); 353 color: var(--leaf-color-content-brand); 354} 355.leaf-c-tag-hybrid leaf-button::part(base):hover {
356 color: var(--leaf-color-content-brand); 357} 358.leaf-c-tag-hybrid leaf-button::part(base):focus { 359 color: var(--leaf-color-content-brand); 360} 361 362.leaf-c-tag-shape-square leaf-button::part(base) { 363 border-radius: var(--leaf-border-radius-small) !important; 364}`;var b=Object.defineProperty,e=(t,r,c,h)=>{for(var n=void 0,i=t.length-1,o;i>=0;i--)(o=t[i])&&(n=o(r,c,n)||n);return n&&b(r,c,n),n};const m=class extends f{constructor(){super(...arguments),this.variant="neutral",this.shape="round",this.disabled=!1}get tagText(){return this.innerText}async updated(){await this.updateComplete,this.tagButton.setAttribute("data-element-text",this.tagText)}render(){const r={"leaf-c-tag":!0,"leaf-c-tag-branded":this.variant==="branded","leaf-c-tag-hybrid":this.variant==="neutral-hybrid","leaf-c-tag-shape-square":this.shape==="square"};return s`<div class=${p(r)}> 365 <leaf-button href="${x(this.href)}" variant="tertiary" ?disabled=${this.disabled} 366 ><slot></slot 367 ></leaf-button> 368 </div>`}};m.styles=d(u);let a=m;e([l()],a.prototype,"variant");e([l()],a.prototype,"shape");e([l({type:Boolean,reflect:!0})],a.prototype,"disabled");e([l()],a.prototype,"href");e([g("leaf-button")],a.prototype,"tagButton");customElements.define("leaf-tag",a);export{a as LeafTag}; 369//# sourceMappingURL=tag-D_94FpTU.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.