@aurodesignsystem-dev/auro-tail 0.0.0-pr6.3 → 0.0.0-pr6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/custom-elements.json +70 -0
  2. package/demo/api.html +0 -3
  3. package/demo/api.md +4 -1
  4. package/demo/auro-tail-group.min.js +58 -14
  5. package/demo/index.html +0 -3
  6. package/dist/{auro-tail-group-BCsyjrce.js → auro-tail-group-CWmSI_Ku.js} +77 -77
  7. package/dist/index.d.ts +35 -35
  8. package/dist/index.js +1 -1
  9. package/dist/registered.js +1 -1
  10. package/package.json +1 -1
package/custom-elements.json CHANGED
@@ -263,6 +263,30 @@
263
263
  }
264
264
  ],
265
265
  "members": [
266
+ {
267
+ "kind": "method",
268
+ "name": "_getBorderWidthValue",
269
+ "parameters": [
270
+ {
271
+ "name": "resolvedBorderWidth",
272
+ "description": "Normalized border width from props",
273
+ "type": {
274
+ "text": "string|undefined"
275
+ }
276
+ }
277
+ ],
278
+ "description": "Determines the border width value to set as a CSS custom property.\nReturns null if border-width should not be set.",
279
+ "privacy": "private",
280
+ "return": {
281
+ "type": {
282
+ "text": "string|null"
283
+ }
284
+ },
285
+ "inheritedFrom": {
286
+ "name": "AuroTail",
287
+ "module": "src/auro-tail.js"
288
+ }
289
+ },
266
290
  {
267
291
  "kind": "method",
268
292
  "name": "_handleLinkClick",
@@ -416,6 +440,21 @@
416
440
  "module": "src/auro-tail.js"
417
441
  }
418
442
  },
443
+ {
444
+ "kind": "field",
445
+ "name": "isInDiagonalGroup",
446
+ "description": "Checks if this tail is in a diagonal group layout.",
447
+ "readonly": true,
448
+ "return": {
449
+ "type": {
450
+ "text": "boolean"
451
+ }
452
+ },
453
+ "inheritedFrom": {
454
+ "name": "AuroTail",
455
+ "module": "src/auro-tail.js"
456
+ }
457
+ },
419
458
  {
420
459
  "kind": "field",
421
460
  "name": "isInGroup",
@@ -755,6 +794,26 @@
755
794
  "description": "The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Auro applications.",
756
795
  "name": "AuroTail",
757
796
  "members": [
797
+ {
798
+ "kind": "method",
799
+ "name": "_getBorderWidthValue",
800
+ "parameters": [
801
+ {
802
+ "name": "resolvedBorderWidth",
803
+ "description": "Normalized border width from props",
804
+ "type": {
805
+ "text": "string|undefined"
806
+ }
807
+ }
808
+ ],
809
+ "description": "Determines the border width value to set as a CSS custom property.\nReturns null if border-width should not be set.",
810
+ "privacy": "private",
811
+ "return": {
812
+ "type": {
813
+ "text": "string|null"
814
+ }
815
+ }
816
+ },
758
817
  {
759
818
  "kind": "method",
760
819
  "name": "_handleLinkClick",
@@ -864,6 +923,17 @@
864
923
  "name": "iconTag",
865
924
  "privacy": "private"
866
925
  },
926
+ {
927
+ "kind": "field",
928
+ "name": "isInDiagonalGroup",
929
+ "description": "Checks if this tail is in a diagonal group layout.",
930
+ "readonly": true,
931
+ "return": {
932
+ "type": {
933
+ "text": "boolean"
934
+ }
935
+ }
936
+ },
867
937
  {
868
938
  "kind": "field",
869
939
  "name": "isInGroup",
package/demo/api.html CHANGED
@@ -30,9 +30,6 @@
30
30
  <!-- Demo Specific Styles -->
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
32
32
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
33
-
34
- <!-- Custom demo styles -->
35
- <link rel="stylesheet" type="text/css" href="./demo-styles.css" />
36
33
  </head>
37
34
  <body class="auro-markdown">
38
35
  <main></main>
package/demo/api.md CHANGED
@@ -35,6 +35,7 @@ The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphi
35
35
  | borderWidth | border-width | string \| undefined | undefined | Sets the border width around the tail. |
36
36
  | hasBorder | | | | Checks if tail has border properties defined. |
37
37
  | href | href | string \| undefined | undefined | Sets the href for the tail. |
38
+ | isInDiagonalGroup | | | | Checks if this tail is in a diagonal group layout. |
38
39
  | isInGroup | | | | Checks if this tail is inside an auro-tail-group element. |
39
40
  | isInHorizontalGroup | | | | Checks if this tail is in a horizontal group layout. |
40
41
  | labelTypeClass | | | | Gets the appropriate CSS type class based on tail size. |
@@ -592,10 +593,12 @@ $group-horizontal: (
592
593
 
593
594
  /* Token Definitions */
594
595
  :host {
596
+ display: inline-block;
595
597
  /* Host dimensions to match container */
596
598
  width: var(--avatar-width);
597
599
  height: var(--avatar-width);
598
- min-width: var(--avatar-width);
600
+ min-width: var(--avatar-width);
601
+ min-height: var(--avatar-width);
599
602
 
600
603
  /* Default Values */
601
604
  --avatar-width: var(--avatar-width-lg);
package/demo/auro-tail-group.min.js CHANGED
@@ -458,7 +458,7 @@ function i18nTemplate(template, values = {}) {
458
458
  });
459
459
  }
460
460
 
461
- var styleCss = i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{width:var(--avatar-width);height:var(--avatar-width);min-width:var(--avatar-width);--avatar-width: var(--avatar-width-lg);--avatar-gradient: var(--gradient-oa);--tail-width: var(--tail-width-lg);--tail-offset-y: var(--tail-offset-y-lg);--href-label-gap: var(--href-label-gap-lg);--badge-width: var(--badge-width-lg);--border-color-default: rgba(88, 94, 103, 1);--border-color-white: #ffffff;--border-width-default: 4px;--border-display: none;--border-padding: 0;--border-radius-full: 999px;--tail-outline-color: var(--border-color-default);--tail-outline-width: 1px;--gradient-as: linear-gradient(180deg, #6899C6 0%, #CFE0EF 100%);--gradient-ha: linear-gradient(181deg, #CCB7ED -6.38%, #F9C2E7 99.46%);--gradient-oa: linear-gradient(181deg, #C5D0D9 -6.38%, #E8F1F8 99.46%);--tail-drop-shadow: drop-shadow(0 3px 3px rgba(0,0,0,.24)) drop-shadow(0 6px 14px rgba(0,0,0,.24));--z-index-border: 1;--z-index-badge: 2;--z-index-group-back: 1;--z-index-group-front: 2;--badge-translate-x: 0;--badge-translate-y: 0;--avatar-width-xs: 24px;--avatar-width-sm: 32px;--avatar-width-md: 48px;--avatar-width-lg: 60px;--avatar-width-xl: 96px;--avatar-width-2xl: 134px;--tail-width-xs: 19px;--tail-width-sm: 26px;--tail-width-md: 39px;--tail-width-lg: 48px;--tail-width-xl: 77px;--tail-width-2xl: 107px;--tail-offset-y-xs: 3px;--tail-offset-y-sm: 4px;--tail-offset-y-md: 6px;--tail-offset-y-lg: 7px;--tail-offset-y-xl: 13px;--tail-offset-y-2xl: 17px;--href-label-gap-md: 2px;--href-label-gap-lg: 4px;--href-label-gap-xl: 6px;--href-label-gap-2xl: 8px;--badge-width-md: 11px;--badge-width-lg: 14px;--badge-width-xl: 22px;--badge-width-2xl: 31px;--group-diagonal-width-xs: 42px;--group-diagonal-width-sm: 56px;--group-diagonal-width-md: 84px;--group-diagonal-width-lg: 105px;--group-horizontal-border-width-xs: 3px;--group-horizontal-overlap-xs: -2px;--group-horizontal-border-width-sm: 3px;--group-horizontal-overlap-sm: -2px;--group-horizontal-border-width-md: 4px;--group-horizontal-overlap-md: -6px;--group-horizontal-border-width-lg: 4px;--group-horizontal-overlap-lg: -10px}:host([size=xs]){--avatar-width: var(--avatar-width-xs);--tail-width: var(--tail-width-xs);--tail-offset-y: var(--tail-offset-y-xs)}:host([size=sm]){--avatar-width: var(--avatar-width-sm);--tail-width: var(--tail-width-sm);--tail-offset-y: var(--tail-offset-y-sm)}:host([size=md]){--avatar-width: var(--avatar-width-md);--tail-width: var(--tail-width-md);--tail-offset-y: var(--tail-offset-y-md);--badge-width: var(--badge-width-md);--href-label-gap: var(--href-label-gap-md);--badge-translate-x: 2px;--badge-translate-y: -7px}:host([size=lg]){--avatar-width: var(--avatar-width-lg);--tail-width: var(--tail-width-lg);--tail-offset-y: var(--tail-offset-y-lg);--badge-width: var(--badge-width-lg);--href-label-gap: var(--href-label-gap-lg);--badge-translate-x: 2px;--badge-translate-y: -4px}:host([size=xl]){--avatar-width: var(--avatar-width-xl);--tail-width: var(--tail-width-xl);--tail-offset-y: var(--tail-offset-y-xl);--badge-width: var(--badge-width-xl);--href-label-gap: var(--href-label-gap-xl)}:host([size="2xl"]){--avatar-width: var(--avatar-width-2xl);--tail-width: var(--tail-width-2xl);--tail-offset-y: var(--tail-offset-y-2xl);--badge-width: var(--badge-width-2xl);--href-label-gap: var(--href-label-gap-2xl)}:host([tail=as]),:host([tail=AS]){--avatar-gradient: var(--gradient-as)}:host([tail=ha]),:host([tail=HA]){--avatar-gradient: var(--gradient-ha)}:host([tail=oa]),:host([tail=OA]){--avatar-gradient: var(--gradient-oa)}.tail{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;min-width:var(--avatar-width)}.tail>.tail-hyperlink{display:flex;flex-direction:column;align-items:center;text-decoration:none;min-width:var(--avatar-width)}.tail>.tail-hyperlink .label{display:block;margin-top:var(--href-label-gap);text-align:center;min-width:var(--avatar-width);white-space:nowrap;overflow:visible;text-overflow:clip}.border{position:relative;width:var(--avatar-width);height:var(--avatar-width);padding:var(--border-padding);border-radius:var(--border-radius-full);display:grid;place-items:center;margin:0 auto}.border.has-border{--border-padding: var(--border-width, var(--border-width-default))}.border.has-border:before{content:"";position:absolute;inset:0;border-radius:inherit;box-sizing:border-box;border:var(--border-width, var(--border-width-default)) solid var(--border-color, var(--border-color-default));z-index:var(--z-index-border);pointer-events:none;display:block}.container{position:relative;width:100%;height:100%;border-radius:var(--border-radius-full);background:var(--avatar-gradient);display:grid;place-items:center;overflow:hidden}.container [auro-icon]{--ds-auro-icon-size: var(--tail-width);position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + var(--tail-offset-y))) scale(1.26);transform-origin:center;pointer-events:none}.badge{position:absolute;right:0;bottom:0;transform:translate(var(--badge-translate-x),var(--badge-translate-y));width:var(--badge-width);height:var(--badge-width);object-fit:contain;border-radius:var(--border-radius-full);z-index:var(--z-index-badge)}:host([data-variant=aag]) [auro-icon]{filter:var(--tail-drop-shadow)}:host([data-variant=oa][outline]) [auro-icon]{filter:drop-shadow(var(--tail-outline-width) 0 0 var(--tail-outline-color)) drop-shadow(calc(-1 * var(--tail-outline-width)) 0 0 var(--tail-outline-color)) drop-shadow(0 var(--tail-outline-width) 0 var(--tail-outline-color)) drop-shadow(0 calc(-1 * var(--tail-outline-width)) 0 var(--tail-outline-color))}:host([href]){width:max-content}
461
+ var styleCss = i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:inline-block;width:var(--avatar-width);height:var(--avatar-width);min-width:var(--avatar-width);min-height:var(--avatar-width);--avatar-width: var(--avatar-width-lg);--avatar-gradient: var(--gradient-oa);--tail-width: var(--tail-width-lg);--tail-offset-y: var(--tail-offset-y-lg);--href-label-gap: var(--href-label-gap-lg);--badge-width: var(--badge-width-lg);--border-color-default: rgba(88, 94, 103, 1);--border-color-white: #ffffff;--border-width-default: 4px;--border-display: none;--border-padding: 0;--border-radius-full: 999px;--tail-outline-color: var(--border-color-default);--tail-outline-width: 1px;--gradient-as: linear-gradient(180deg, #6899C6 0%, #CFE0EF 100%);--gradient-ha: linear-gradient(181deg, #CCB7ED -6.38%, #F9C2E7 99.46%);--gradient-oa: linear-gradient(181deg, #C5D0D9 -6.38%, #E8F1F8 99.46%);--tail-drop-shadow: drop-shadow(0 3px 3px rgba(0,0,0,.24)) drop-shadow(0 6px 14px rgba(0,0,0,.24));--z-index-border: 1;--z-index-badge: 2;--z-index-group-back: 1;--z-index-group-front: 2;--badge-translate-x: 0;--badge-translate-y: 0;--avatar-width-xs: 24px;--avatar-width-sm: 32px;--avatar-width-md: 48px;--avatar-width-lg: 60px;--avatar-width-xl: 96px;--avatar-width-2xl: 134px;--tail-width-xs: 19px;--tail-width-sm: 26px;--tail-width-md: 39px;--tail-width-lg: 48px;--tail-width-xl: 77px;--tail-width-2xl: 107px;--tail-offset-y-xs: 3px;--tail-offset-y-sm: 4px;--tail-offset-y-md: 6px;--tail-offset-y-lg: 7px;--tail-offset-y-xl: 13px;--tail-offset-y-2xl: 17px;--href-label-gap-md: 2px;--href-label-gap-lg: 4px;--href-label-gap-xl: 6px;--href-label-gap-2xl: 8px;--badge-width-md: 11px;--badge-width-lg: 14px;--badge-width-xl: 22px;--badge-width-2xl: 31px;--group-diagonal-width-xs: 42px;--group-diagonal-width-sm: 56px;--group-diagonal-width-md: 84px;--group-diagonal-width-lg: 105px;--group-horizontal-border-width-xs: 3px;--group-horizontal-overlap-xs: -2px;--group-horizontal-border-width-sm: 3px;--group-horizontal-overlap-sm: -2px;--group-horizontal-border-width-md: 4px;--group-horizontal-overlap-md: -6px;--group-horizontal-border-width-lg: 4px;--group-horizontal-overlap-lg: -10px}:host([size=xs]){--avatar-width: var(--avatar-width-xs);--tail-width: var(--tail-width-xs);--tail-offset-y: var(--tail-offset-y-xs)}:host([size=sm]){--avatar-width: var(--avatar-width-sm);--tail-width: var(--tail-width-sm);--tail-offset-y: var(--tail-offset-y-sm)}:host([size=md]){--avatar-width: var(--avatar-width-md);--tail-width: var(--tail-width-md);--tail-offset-y: var(--tail-offset-y-md);--badge-width: var(--badge-width-md);--href-label-gap: var(--href-label-gap-md);--badge-translate-x: 2px;--badge-translate-y: -7px}:host([size=lg]){--avatar-width: var(--avatar-width-lg);--tail-width: var(--tail-width-lg);--tail-offset-y: var(--tail-offset-y-lg);--badge-width: var(--badge-width-lg);--href-label-gap: var(--href-label-gap-lg);--badge-translate-x: 2px;--badge-translate-y: -4px}:host([size=xl]){--avatar-width: var(--avatar-width-xl);--tail-width: var(--tail-width-xl);--tail-offset-y: var(--tail-offset-y-xl);--badge-width: var(--badge-width-xl);--href-label-gap: var(--href-label-gap-xl)}:host([size="2xl"]){--avatar-width: var(--avatar-width-2xl);--tail-width: var(--tail-width-2xl);--tail-offset-y: var(--tail-offset-y-2xl);--badge-width: var(--badge-width-2xl);--href-label-gap: var(--href-label-gap-2xl)}:host([tail=as]),:host([tail=AS]){--avatar-gradient: var(--gradient-as)}:host([tail=ha]),:host([tail=HA]){--avatar-gradient: var(--gradient-ha)}:host([tail=oa]),:host([tail=OA]){--avatar-gradient: var(--gradient-oa)}.tail{display:flex;flex-direction:column;align-items:center;vertical-align:middle;min-width:var(--avatar-width);min-height:var(--avatar-width)}.tail>.tail-hyperlink{display:flex;flex-direction:column;align-items:center;text-decoration:none;min-width:var(--avatar-width);min-height:var(--avatar-width)}.tail>.tail-hyperlink .label{display:block;margin-top:var(--href-label-gap);text-align:center;min-width:var(--avatar-width);white-space:nowrap;overflow:visible;text-overflow:clip}.border{position:relative;width:var(--avatar-width);height:var(--avatar-width);border-radius:var(--border-radius-full);display:grid;place-items:center;margin:0 auto;box-sizing:content-box}.border.has-border{border:var(--border-width, var(--border-width-default)) solid var(--border-color, var(--border-color-default))}:host{width:calc(var(--avatar-width) + 2 * var(--border-width, 0px));height:calc(var(--avatar-width) + 2 * var(--border-width, 0px));min-width:calc(var(--avatar-width) + 2 * var(--border-width, 0px));min-height:calc(var(--avatar-width) + 2 * var(--border-width, 0px))}.container{position:relative;width:100%;height:100%;border-radius:var(--border-radius-full);background:var(--avatar-gradient);display:grid;place-items:center;overflow:hidden}.container [auro-icon]{--ds-auro-icon-size: var(--tail-width);position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + var(--tail-offset-y))) scale(1.26);transform-origin:center;pointer-events:none}.badge{position:absolute;right:0;bottom:0;transform:translate(var(--badge-translate-x),var(--badge-translate-y));width:var(--badge-width);height:var(--badge-width);object-fit:contain;border-radius:var(--border-radius-full);z-index:var(--z-index-badge)}:host([data-variant=aag]) [auro-icon]{filter:var(--tail-drop-shadow)}:host([data-variant=oa][outline]) [auro-icon]{filter:drop-shadow(var(--tail-outline-width) 0 0 var(--tail-outline-color)) drop-shadow(calc(-1 * var(--tail-outline-width)) 0 0 var(--tail-outline-color)) drop-shadow(0 var(--tail-outline-width) 0 var(--tail-outline-color)) drop-shadow(0 calc(-1 * var(--tail-outline-width)) 0 var(--tail-outline-color))}:host([href]){width:max-content}
462
462
  `;
463
463
 
464
464
  /**
@@ -650,6 +650,16 @@ class AuroTail extends i$1 {
650
650
  return !!group && group.getAttribute('layout') === 'horizontal';
651
651
  }
652
652
 
653
+ /**
654
+ * Checks if this tail is in a diagonal group layout.
655
+ * @readonly
656
+ * @returns {boolean}
657
+ */
658
+ get isInDiagonalGroup() {
659
+ const group = /** @type {HTMLElement|null} */ (this.closest('auro-tail-group'));
660
+ return !!group && group.getAttribute('layout') === 'diagonal';
661
+ }
662
+
653
663
  /**
654
664
  * Returns badge config when eligible.
655
665
  * @readonly
@@ -718,6 +728,33 @@ class AuroTail extends i$1 {
718
728
  super.updated(changedProperties);
719
729
  }
720
730
 
731
+ /**
732
+ * Determines the border width value to set as a CSS custom property.
733
+ * Returns null if border-width should not be set.
734
+ * @private
735
+ * @param {string|undefined} resolvedBorderWidth - Normalized border width from props
736
+ * @returns {string|null} The border width value to set, or null to remove
737
+ */
738
+ _getBorderWidthValue(resolvedBorderWidth) {
739
+ // Horizontal groups: CSS manages border-width
740
+ if (this.isInHorizontalGroup) {
741
+ return null;
742
+ }
743
+
744
+ // Valid width provided: use it
745
+ if (resolvedBorderWidth) {
746
+ return resolvedBorderWidth;
747
+ }
748
+
749
+ // No width but color provided: use default width
750
+ if (this.borderColor && this.borderWidth === undefined) {
751
+ return 'var(--border-width-default)';
752
+ }
753
+
754
+ // Otherwise: don't set
755
+ return null;
756
+ }
757
+
721
758
  /**
722
759
  * Applies border styles and variant from props to CSS custom properties.
723
760
  * @private
@@ -729,17 +766,22 @@ class AuroTail extends i$1 {
729
766
  borderWidth: normalizedWidth,
730
767
  });
731
768
 
732
- // Set CSS custom properties when they exist.
733
- if (borderColor) {
734
- this.style.setProperty('--border-color', borderColor);
735
- } else {
736
- this.style.removeProperty('--border-color');
737
- }
769
+ // Skip setting border properties for diagonal groups (CSS handles them)
770
+ if (!this.isInDiagonalGroup) {
771
+ // Set border-color
772
+ if (borderColor) {
773
+ this.style.setProperty('--border-color', borderColor);
774
+ } else {
775
+ this.style.removeProperty('--border-color');
776
+ }
738
777
 
739
- if (borderWidth) {
740
- this.style.setProperty('--border-width', borderWidth);
741
- } else {
742
- this.style.removeProperty('--border-width');
778
+ // Set border-width (with group-specific logic)
779
+ const widthValue = this._getBorderWidthValue(borderWidth);
780
+ if (widthValue) {
781
+ this.style.setProperty('--border-width', widthValue);
782
+ } else {
783
+ this.style.removeProperty('--border-width');
784
+ }
743
785
  }
744
786
 
745
787
  // Set variant as data attribute for CSS targeting.
@@ -793,7 +835,7 @@ class AuroTail extends i$1 {
793
835
  }
794
836
  }
795
837
 
796
- var groupStyleCss = i$3`:host{width:var(--avatar-width);height:var(--avatar-width);min-width:var(--avatar-width);--avatar-width: var(--avatar-width-lg);--avatar-gradient: var(--gradient-oa);--tail-width: var(--tail-width-lg);--tail-offset-y: var(--tail-offset-y-lg);--href-label-gap: var(--href-label-gap-lg);--badge-width: var(--badge-width-lg);--border-color-default: rgba(88, 94, 103, 1);--border-color-white: #ffffff;--border-width-default: 4px;--border-display: none;--border-padding: 0;--border-radius-full: 999px;--tail-outline-color: var(--border-color-default);--tail-outline-width: 1px;--gradient-as: linear-gradient(180deg, #6899C6 0%, #CFE0EF 100%);--gradient-ha: linear-gradient(181deg, #CCB7ED -6.38%, #F9C2E7 99.46%);--gradient-oa: linear-gradient(181deg, #C5D0D9 -6.38%, #E8F1F8 99.46%);--tail-drop-shadow: drop-shadow(0 3px 3px rgba(0,0,0,.24)) drop-shadow(0 6px 14px rgba(0,0,0,.24));--z-index-border: 1;--z-index-badge: 2;--z-index-group-back: 1;--z-index-group-front: 2;--badge-translate-x: 0;--badge-translate-y: 0;--avatar-width-xs: 24px;--avatar-width-sm: 32px;--avatar-width-md: 48px;--avatar-width-lg: 60px;--avatar-width-xl: 96px;--avatar-width-2xl: 134px;--tail-width-xs: 19px;--tail-width-sm: 26px;--tail-width-md: 39px;--tail-width-lg: 48px;--tail-width-xl: 77px;--tail-width-2xl: 107px;--tail-offset-y-xs: 3px;--tail-offset-y-sm: 4px;--tail-offset-y-md: 6px;--tail-offset-y-lg: 7px;--tail-offset-y-xl: 13px;--tail-offset-y-2xl: 17px;--href-label-gap-md: 2px;--href-label-gap-lg: 4px;--href-label-gap-xl: 6px;--href-label-gap-2xl: 8px;--badge-width-md: 11px;--badge-width-lg: 14px;--badge-width-xl: 22px;--badge-width-2xl: 31px;--group-diagonal-width-xs: 42px;--group-diagonal-width-sm: 56px;--group-diagonal-width-md: 84px;--group-diagonal-width-lg: 105px;--group-horizontal-border-width-xs: 3px;--group-horizontal-overlap-xs: -2px;--group-horizontal-border-width-sm: 3px;--group-horizontal-overlap-sm: -2px;--group-horizontal-border-width-md: 4px;--group-horizontal-overlap-md: -6px;--group-horizontal-border-width-lg: 4px;--group-horizontal-overlap-lg: -10px}:host([size=xs]){--avatar-width: var(--avatar-width-xs);--tail-width: var(--tail-width-xs);--tail-offset-y: var(--tail-offset-y-xs)}:host([size=sm]){--avatar-width: var(--avatar-width-sm);--tail-width: var(--tail-width-sm);--tail-offset-y: var(--tail-offset-y-sm)}:host([size=md]){--avatar-width: var(--avatar-width-md);--tail-width: var(--tail-width-md);--tail-offset-y: var(--tail-offset-y-md);--badge-width: var(--badge-width-md);--href-label-gap: var(--href-label-gap-md);--badge-translate-x: 2px;--badge-translate-y: -7px}:host([size=lg]){--avatar-width: var(--avatar-width-lg);--tail-width: var(--tail-width-lg);--tail-offset-y: var(--tail-offset-y-lg);--badge-width: var(--badge-width-lg);--href-label-gap: var(--href-label-gap-lg);--badge-translate-x: 2px;--badge-translate-y: -4px}:host([size=xl]){--avatar-width: var(--avatar-width-xl);--tail-width: var(--tail-width-xl);--tail-offset-y: var(--tail-offset-y-xl);--badge-width: var(--badge-width-xl);--href-label-gap: var(--href-label-gap-xl)}:host([size="2xl"]){--avatar-width: var(--avatar-width-2xl);--tail-width: var(--tail-width-2xl);--tail-offset-y: var(--tail-offset-y-2xl);--badge-width: var(--badge-width-2xl);--href-label-gap: var(--href-label-gap-2xl)}:host([tail=as]),:host([tail=AS]){--avatar-gradient: var(--gradient-as)}:host([tail=ha]),:host([tail=HA]){--avatar-gradient: var(--gradient-ha)}:host([tail=oa]),:host([tail=OA]){--avatar-gradient: var(--gradient-oa)}:host([layout=horizontal][size=xs]){width:calc(2 * var(--avatar-width-xs) + var(--group-horizontal-overlap-xs));height:var(--avatar-width-xs)}:host([layout=horizontal][size=sm]){width:calc(2 * var(--avatar-width-sm) + var(--group-horizontal-overlap-sm));height:var(--avatar-width-sm)}:host([layout=horizontal][size=md]){width:calc(2 * var(--avatar-width-md) + var(--group-horizontal-overlap-md));height:var(--avatar-width-md)}:host([layout=horizontal][size=lg]){width:calc(2 * var(--avatar-width-lg) + var(--group-horizontal-overlap-lg));height:var(--avatar-width-lg)}.group{display:inline-flex;position:relative}.group.horizontal{gap:0}:host([layout=horizontal]) .group.horizontal ::slotted(auro-tail){position:relative;--border-color: var(--border-color-white);--border-padding: var(--border-width, var(--border-width-default))}:host([layout=horizontal][size=xs]) .group.horizontal ::slotted(auro-tail){--border-width: var(--group-horizontal-border-width-xs)}:host([layout=horizontal][size=xs]) .group.horizontal ::slotted(auro-tail:first-child){margin-right:var(--group-horizontal-overlap-xs);z-index:var(--z-index-group-front)}:host([layout=horizontal][size=sm]) .group.horizontal ::slotted(auro-tail){--border-width: var(--group-horizontal-border-width-sm)}:host([layout=horizontal][size=sm]) .group.horizontal ::slotted(auro-tail:first-child){margin-right:var(--group-horizontal-overlap-sm);z-index:var(--z-index-group-front)}:host([layout=horizontal][size=md]) .group.horizontal ::slotted(auro-tail){--border-width: var(--group-horizontal-border-width-md)}:host([layout=horizontal][size=md]) .group.horizontal ::slotted(auro-tail:first-child){margin-right:var(--group-horizontal-overlap-md);z-index:var(--z-index-group-front)}:host([layout=horizontal][size=lg]) .group.horizontal ::slotted(auro-tail){--border-width: var(--group-horizontal-border-width-lg)}:host([layout=horizontal][size=lg]) .group.horizontal ::slotted(auro-tail:first-child){margin-right:var(--group-horizontal-overlap-lg);z-index:var(--z-index-group-front)}:host([layout=horizontal]) .group.horizontal ::slotted(auro-tail:last-child){z-index:var(--z-index-group-back)}:host([layout=diagonal][size=xs]){width:var(--group-diagonal-width-xs);height:var(--group-diagonal-width-xs)}:host([layout=diagonal][size=xs]) .group.diagonal{width:var(--group-diagonal-width-xs);height:var(--group-diagonal-width-xs)}:host([layout=diagonal][size=sm]){width:var(--group-diagonal-width-sm);height:var(--group-diagonal-width-sm)}:host([layout=diagonal][size=sm]) .group.diagonal{width:var(--group-diagonal-width-sm);height:var(--group-diagonal-width-sm)}:host([layout=diagonal][size=md]){width:var(--group-diagonal-width-md);height:var(--group-diagonal-width-md)}:host([layout=diagonal][size=md]) .group.diagonal{width:var(--group-diagonal-width-md);height:var(--group-diagonal-width-md)}:host([layout=diagonal][size=lg]){width:var(--group-diagonal-width-lg);height:var(--group-diagonal-width-lg)}:host([layout=diagonal][size=lg]) .group.diagonal{width:var(--group-diagonal-width-lg);height:var(--group-diagonal-width-lg)}:host([layout=diagonal]) .group.diagonal ::slotted(auro-tail){position:absolute;--border-color: transparent;--border-width: 0;--border-padding: 0}.group.diagonal ::slotted(auro-tail:first-child){top:0;left:0;z-index:var(--z-index-group-front)}.group.diagonal ::slotted(auro-tail:nth-child(2)){bottom:0;right:0;z-index:var(--z-index-group-back)}
838
+ var groupStyleCss = i$3`:host{display:inline-block;width:var(--avatar-width);height:var(--avatar-width);min-width:var(--avatar-width);min-height:var(--avatar-width);--avatar-width: var(--avatar-width-lg);--avatar-gradient: var(--gradient-oa);--tail-width: var(--tail-width-lg);--tail-offset-y: var(--tail-offset-y-lg);--href-label-gap: var(--href-label-gap-lg);--badge-width: var(--badge-width-lg);--border-color-default: rgba(88, 94, 103, 1);--border-color-white: #ffffff;--border-width-default: 4px;--border-display: none;--border-padding: 0;--border-radius-full: 999px;--tail-outline-color: var(--border-color-default);--tail-outline-width: 1px;--gradient-as: linear-gradient(180deg, #6899C6 0%, #CFE0EF 100%);--gradient-ha: linear-gradient(181deg, #CCB7ED -6.38%, #F9C2E7 99.46%);--gradient-oa: linear-gradient(181deg, #C5D0D9 -6.38%, #E8F1F8 99.46%);--tail-drop-shadow: drop-shadow(0 3px 3px rgba(0,0,0,.24)) drop-shadow(0 6px 14px rgba(0,0,0,.24));--z-index-border: 1;--z-index-badge: 2;--z-index-group-back: 1;--z-index-group-front: 2;--badge-translate-x: 0;--badge-translate-y: 0;--avatar-width-xs: 24px;--avatar-width-sm: 32px;--avatar-width-md: 48px;--avatar-width-lg: 60px;--avatar-width-xl: 96px;--avatar-width-2xl: 134px;--tail-width-xs: 19px;--tail-width-sm: 26px;--tail-width-md: 39px;--tail-width-lg: 48px;--tail-width-xl: 77px;--tail-width-2xl: 107px;--tail-offset-y-xs: 3px;--tail-offset-y-sm: 4px;--tail-offset-y-md: 6px;--tail-offset-y-lg: 7px;--tail-offset-y-xl: 13px;--tail-offset-y-2xl: 17px;--href-label-gap-md: 2px;--href-label-gap-lg: 4px;--href-label-gap-xl: 6px;--href-label-gap-2xl: 8px;--badge-width-md: 11px;--badge-width-lg: 14px;--badge-width-xl: 22px;--badge-width-2xl: 31px;--group-diagonal-width-xs: 42px;--group-diagonal-width-sm: 56px;--group-diagonal-width-md: 84px;--group-diagonal-width-lg: 105px;--group-horizontal-border-width-xs: 3px;--group-horizontal-overlap-xs: -2px;--group-horizontal-border-width-sm: 3px;--group-horizontal-overlap-sm: -2px;--group-horizontal-border-width-md: 4px;--group-horizontal-overlap-md: -6px;--group-horizontal-border-width-lg: 4px;--group-horizontal-overlap-lg: -10px}:host([size=xs]){--avatar-width: var(--avatar-width-xs);--tail-width: var(--tail-width-xs);--tail-offset-y: var(--tail-offset-y-xs)}:host([size=sm]){--avatar-width: var(--avatar-width-sm);--tail-width: var(--tail-width-sm);--tail-offset-y: var(--tail-offset-y-sm)}:host([size=md]){--avatar-width: var(--avatar-width-md);--tail-width: var(--tail-width-md);--tail-offset-y: var(--tail-offset-y-md);--badge-width: var(--badge-width-md);--href-label-gap: var(--href-label-gap-md);--badge-translate-x: 2px;--badge-translate-y: -7px}:host([size=lg]){--avatar-width: var(--avatar-width-lg);--tail-width: var(--tail-width-lg);--tail-offset-y: var(--tail-offset-y-lg);--badge-width: var(--badge-width-lg);--href-label-gap: var(--href-label-gap-lg);--badge-translate-x: 2px;--badge-translate-y: -4px}:host([size=xl]){--avatar-width: var(--avatar-width-xl);--tail-width: var(--tail-width-xl);--tail-offset-y: var(--tail-offset-y-xl);--badge-width: var(--badge-width-xl);--href-label-gap: var(--href-label-gap-xl)}:host([size="2xl"]){--avatar-width: var(--avatar-width-2xl);--tail-width: var(--tail-width-2xl);--tail-offset-y: var(--tail-offset-y-2xl);--badge-width: var(--badge-width-2xl);--href-label-gap: var(--href-label-gap-2xl)}:host([tail=as]),:host([tail=AS]){--avatar-gradient: var(--gradient-as)}:host([tail=ha]),:host([tail=HA]){--avatar-gradient: var(--gradient-ha)}:host([tail=oa]),:host([tail=OA]){--avatar-gradient: var(--gradient-oa)}:host([layout=horizontal][size=xs]){width:calc(2 * var(--avatar-width-xs) + 2 * var(--group-horizontal-border-width-xs) + var(--group-horizontal-overlap-xs));height:calc(var(--avatar-width-xs) + 2 * var(--group-horizontal-border-width-xs));min-height:calc(var(--avatar-width-xs) + 2 * var(--group-horizontal-border-width-xs))}:host([layout=horizontal][size=sm]){width:calc(2 * var(--avatar-width-sm) + 2 * var(--group-horizontal-border-width-sm) + var(--group-horizontal-overlap-sm));height:calc(var(--avatar-width-sm) + 2 * var(--group-horizontal-border-width-sm));min-height:calc(var(--avatar-width-sm) + 2 * var(--group-horizontal-border-width-sm))}:host([layout=horizontal][size=md]){width:calc(2 * var(--avatar-width-md) + 2 * var(--group-horizontal-border-width-md) + var(--group-horizontal-overlap-md));height:calc(var(--avatar-width-md) + 2 * var(--group-horizontal-border-width-md));min-height:calc(var(--avatar-width-md) + 2 * var(--group-horizontal-border-width-md))}:host([layout=horizontal][size=lg]){width:calc(2 * var(--avatar-width-lg) + 2 * var(--group-horizontal-border-width-lg) + var(--group-horizontal-overlap-lg));height:calc(var(--avatar-width-lg) + 2 * var(--group-horizontal-border-width-lg));min-height:calc(var(--avatar-width-lg) + 2 * var(--group-horizontal-border-width-lg))}.group{display:inline-flex;position:relative}.group.horizontal{gap:0}:host([layout=horizontal]) .group.horizontal ::slotted(auro-tail){position:relative;--border-color: var(--border-color-white)}:host([layout=horizontal][size=xs]) .group.horizontal ::slotted(auro-tail){--border-width: var(--group-horizontal-border-width-xs);width:calc(var(--avatar-width-xs) + 2 * var(--group-horizontal-border-width-xs));min-width:calc(var(--avatar-width-xs) + 2 * var(--group-horizontal-border-width-xs))}:host([layout=horizontal][size=xs]) .group.horizontal ::slotted(auro-tail:first-child){margin-right:calc(var(--group-horizontal-overlap-xs) - 2 * var(--group-horizontal-border-width-xs));z-index:var(--z-index-group-front)}:host([layout=horizontal][size=sm]) .group.horizontal ::slotted(auro-tail){--border-width: var(--group-horizontal-border-width-sm);width:calc(var(--avatar-width-sm) + 2 * var(--group-horizontal-border-width-sm));min-width:calc(var(--avatar-width-sm) + 2 * var(--group-horizontal-border-width-sm))}:host([layout=horizontal][size=sm]) .group.horizontal ::slotted(auro-tail:first-child){margin-right:calc(var(--group-horizontal-overlap-sm) - 2 * var(--group-horizontal-border-width-sm));z-index:var(--z-index-group-front)}:host([layout=horizontal][size=md]) .group.horizontal ::slotted(auro-tail){--border-width: var(--group-horizontal-border-width-md);width:calc(var(--avatar-width-md) + 2 * var(--group-horizontal-border-width-md));min-width:calc(var(--avatar-width-md) + 2 * var(--group-horizontal-border-width-md))}:host([layout=horizontal][size=md]) .group.horizontal ::slotted(auro-tail:first-child){margin-right:calc(var(--group-horizontal-overlap-md) - 2 * var(--group-horizontal-border-width-md));z-index:var(--z-index-group-front)}:host([layout=horizontal][size=lg]) .group.horizontal ::slotted(auro-tail){--border-width: var(--group-horizontal-border-width-lg);width:calc(var(--avatar-width-lg) + 2 * var(--group-horizontal-border-width-lg));min-width:calc(var(--avatar-width-lg) + 2 * var(--group-horizontal-border-width-lg))}:host([layout=horizontal][size=lg]) .group.horizontal ::slotted(auro-tail:first-child){margin-right:calc(var(--group-horizontal-overlap-lg) - 2 * var(--group-horizontal-border-width-lg));z-index:var(--z-index-group-front)}:host([layout=horizontal]) .group.horizontal ::slotted(auro-tail:last-child){z-index:var(--z-index-group-back)}:host([layout=diagonal][size=xs]){width:var(--group-diagonal-width-xs);height:var(--group-diagonal-width-xs)}:host([layout=diagonal][size=xs]) .group.diagonal{width:var(--group-diagonal-width-xs);height:var(--group-diagonal-width-xs)}:host([layout=diagonal][size=sm]){width:var(--group-diagonal-width-sm);height:var(--group-diagonal-width-sm)}:host([layout=diagonal][size=sm]) .group.diagonal{width:var(--group-diagonal-width-sm);height:var(--group-diagonal-width-sm)}:host([layout=diagonal][size=md]){width:var(--group-diagonal-width-md);height:var(--group-diagonal-width-md)}:host([layout=diagonal][size=md]) .group.diagonal{width:var(--group-diagonal-width-md);height:var(--group-diagonal-width-md)}:host([layout=diagonal][size=lg]){width:var(--group-diagonal-width-lg);height:var(--group-diagonal-width-lg)}:host([layout=diagonal][size=lg]) .group.diagonal{width:var(--group-diagonal-width-lg);height:var(--group-diagonal-width-lg)}:host([layout=diagonal]) .group.diagonal ::slotted(auro-tail){position:absolute;--border-color: transparent;--border-width: 0;--border-padding: 0}.group.diagonal ::slotted(auro-tail:first-child){top:0;left:0;z-index:var(--z-index-group-front)}.group.diagonal ::slotted(auro-tail:nth-child(2)){bottom:0;right:0;z-index:var(--z-index-group-back)}
797
839
  `;
798
840
 
799
841
  /**
@@ -900,10 +942,12 @@ class AuroTailGroup extends i$1 {
900
942
  } else {
901
943
  // Update size for allowed tails
902
944
  /** @type {any} */ (tail).size = this.size;
903
-
945
+
904
946
  // Update border-color for allowed tails
905
947
  if (this.borderColor !== undefined) {
906
948
  /** @type {any} */ (tail).borderColor = this.borderColor;
949
+ } else {
950
+ /** @type {any} */ (tail).borderColor = undefined;
907
951
  }
908
952
  }
909
953
  });
@@ -921,7 +965,7 @@ class AuroTailGroup extends i$1 {
921
965
  render() {
922
966
  // Don't render unsupported sizes.
923
967
  if (!GROUPS_SIZES.includes(this.size)) {
924
- return x$2``;
968
+ return E$1;
925
969
  }
926
970
 
927
971
  return x$2`
package/demo/index.html CHANGED
@@ -30,9 +30,6 @@
30
30
  <!-- Demo Specific Styles -->
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
32
32
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
33
-
34
- <!-- Custom demo styles -->
35
- <link rel="stylesheet" type="text/css" href="./demo-styles.css" />
36
33
  </head>
37
34
  <body class="auro-markdown">
38
35
  <main></main>