@aurodesignsystem-dev/auro-tabs 0.0.0-pr87.1 → 0.0.0-pr87.3

package/demo/api.html

@@ -17,12 +17,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Generator | auro-tabs custom element</title>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
-    />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    
+    <!-- Legacy reference is still needed to support auro-button's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+    
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    <!-- Demo Specific Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
   </head>
@@ -52,6 +58,12 @@
         });
     </script>
 
+    <style>
+      auro-tab:focus-visible {
+        outline: none;
+      }
+    </style>
+
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
   </body>

package/demo/api.md

@@ -6,13 +6,23 @@
 Represents a tab within an auro-tabgroup element. When selected, displays the corresponding AuroTabpanel.
 The auro-tabpanel element should only be used inside an AuroTabgroup element.
 
-## Properties
+### Properties & Attributes
 
-| Property   | Attribute  | Type      | Default | Description                   |
-|------------|------------|-----------|---------|-------------------------------|
-| [disabled](#disabled) | `disabled` | `Boolean` | "false" | Mark the tab as disabled tab. |
-| [selected](#selected) | `selected` | `Boolean` | "false" | Mark the tab as selected tab. |
-| [variant](#variant)  | `variant`  | `string`  | "false" |                               |
+| Properties | Attributes | Type                              | Default   | Description                                                             |
+| ---------- | ---------- | --------------------------------- | --------- | ----------------------------------------------------------------------- |
+| appearance | appearance | "default" \| "inverse" \| string  | "default" | Defines whether the component will be on lighter or darker backgrounds. |
+| disabled   | disabled   | boolean                           | false     | Indicates whether the tab is disabled.                                  |
+| selected   | selected   | boolean                           | false     | Indicates whether the tab is selected.                                  |
+| variant    | variant    | "default" \| "unstyled" \| string | "default" | The variant of the tab.                                                 |
+|            | focused    | boolean                           | false     | Indicates whether the tab is focused.                                   |
+
+### Methods
+
+| Name     | Parameters                                                          | Return | Description                                       |
+| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
+| register | `name` (string) - The name of element that you want to register to. |        | This will register this element with the browser. |
+
+---
 
 # auro-tabgroup
 
@@ -21,49 +31,53 @@ All children of `<auro-tabgroup>` should be either `<auro-tab>` or
 `<auro-tabpanel>`. This element is stateless, meaning that no values are
 cached and therefore, changes during runtime work.
 
-## Properties
+### Properties & Attributes
+
+| Properties | Attributes | Type                             | Default   | Description                                                             |
+| ---------- | ---------- | -------------------------------- | --------- | ----------------------------------------------------------------------- |
+| appearance | appearance | "default" \| "inverse" \| string | 'default' | Defines whether the component will be on lighter or darker backgrounds. |
 
-| Property        | Attribute       | Type      | Default |
-|-----------------|-----------------|-----------|---------|
-| [busy](#busy)          |                 | `boolean` |         |
-| [panels](#panels)        |                 |           |         |
-| [selectOnFocus](#selectOnFocus) | `selectOnFocus` | `boolean` | "false" |
-| [tabs](#tabs)          |                 |           |         |
+### Methods
 
-## Methods
+| Name     | Parameters                                                          | Return | Description                                       |
+| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
+| register | `name` (string) - The name of element that you want to register to. |        | This will register this element with the browser. |
 
-| Method             | Type                          | Description                                |
-|--------------------|-------------------------------|--------------------------------------------|
-| [selectTab](#selectTab)        | `(newTab: HTMLElement): void` | **newTab**: Selected auro-tab.             |
-| [selectTabByIndex](#selectTabByIndex) | `(index: number): void`       | **index**: The index of the tab to select. |
+### Slots
 
-## Slots
+| Name  | Description                             |
+| ----- | --------------------------------------- |
+| panel | Slot component named for auro-tabpanel. |
+| tab   | Slot component named for auro-tab.      |
 
-| Name    | Description                             |
-|---------|-----------------------------------------|
-| [panel](#panel) | Slot component named for auro-tabpanel. |
-| [tab](#tab)   | Slot component named for auro-tab.      |
+### CSS Shadow Parts
 
-## CSS Shadow Parts
+| Name              | Description                                                                    |
+| ----------------- | ------------------------------------------------------------------------------ |
+| slider            | The slider element.                                                            |
+| slider-positioner | The slider positioner element (non-visual, only used to center slider on tab). |
+| tabgroup__panels  | The panel wrapper element.                                                     |
+| tabgroup__root    | The root element of the tab group.                                             |
+| tabgroup__tabs    | The "tabs list" internal wrapper element.                                      |
 
-| Part                | Description                                      |
-|---------------------|--------------------------------------------------|
-| [slider](#slider)            | The slider element.                              |
-| `slider-positioner` | The slider positioner element (non-visual, only used to center slider on tab). |
-| `tabgroup__panels`  | The panel wrapper element.                       |
-| `tabgroup__root`    | The root element of the tab group.               |
-| `tabgroup__tabs`    | The "tabs list" internal wrapper element.        |
+---
 
 # auro-tabpanel
 
 Represents a panel to be displayed when the corresponding tab is selected in an AuroTabgroup element.
 The auro-tabpanel element should only be used inside an AuroTabgroup element.
 
-## Properties
+### Properties & Attributes
 
-| Property | Attribute | Type      | Default |
-|----------|-----------|-----------|---------|
-| [hidden](#hidden) | `hidden`  | `boolean` | "false" |
+| Properties | Attributes | Type    | Default | Description                            |
+| ---------- | ---------- | ------- | ------- | -------------------------------------- |
+| hidden     | hidden     | boolean | false   | Indicates whether the panel is hidden. |
+
+### Methods
+
+| Name     | Parameters                                                          | Return | Description                                       |
+| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
+| register | `name` (string) - The name of element that you want to register to. |        | This will register this element with the browser. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
@@ -73,7 +87,7 @@ The auro-tabpanel element should only be used inside an AuroTabgroup element.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-tabgroup variant="unstyled">>
+  <auro-tabgroup variant="unstyled">
     <div slot="tabs">
       <auro-tab>
         Baggage Info
@@ -104,7 +118,7 @@ The auro-tabpanel element should only be used inside an AuroTabgroup element.
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-tabgroup variant="unstyled">>
+<auro-tabgroup variant="unstyled">
   <div slot="tabs">
     <auro-tab>
       Baggage Info
@@ -310,14 +324,12 @@ export function removeListener() {
 
 ### Slot Examples
 
-#### <a name="tab"></a>`tab`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a> - `tabpanel`
-
-`<auro-tab slot=tab>` & `<auro-tabpanel slot=tabpanel>` needs to be sibling next to each other to be linked.
+#### <a name="tabs"></a>`tabs`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a> - `panels`
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-tabgroup variant="unstyled">>
+  <auro-tabgroup variant="unstyled">
     <div slot="tabs">
       <auro-tab>
         Baggage Info
@@ -348,7 +360,7 @@ export function removeListener() {
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-tabgroup variant="unstyled">>
+<auro-tabgroup variant="unstyled">
   <div slot="tabs">
     <auro-tab>
       Baggage Info
@@ -373,4 +385,73 @@ export function removeListener() {
 </auro-tabgroup>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Visual State on Dark Background
+
+Set when the tabgroup is used on a dark background.
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
+  <div style="color: white;">
+    <auro-tabgroup variant="unstyled" appearance="inverse">
+    <div slot="tabs">
+      <auro-tab>
+        Baggage Info
+      </auro-tab>
+      <auro-tab>
+        Help
+      </auro-tab>
+      <auro-tab>
+        More
+      </auro-tab>
+      <auro-tab>
+        No Panel
+      </auro-tab>
+    </div>
+    <div slot="panels">
+      <auro-tabpanel>
+        <span>Tab 1 Content</span>
+      </auro-tabpanel>
+      <auro-tabpanel><span>Tab 2 Content</span></auro-tabpanel>
+      <auro-tabpanel><span>Tab 3 Content</span></auro-tabpanel>
+    </div>
+  </auro-tabgroup>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inverseAppearance.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/inverseAppearance.html -->
+
+```html
+<div style="color: white;">
+  <auro-tabgroup variant="unstyled" appearance="inverse">
+  <div slot="tabs">
+    <auro-tab>
+      Baggage Info
+    </auro-tab>
+    <auro-tab>
+      Help
+    </auro-tab>
+    <auro-tab>
+      More
+    </auro-tab>
+    <auro-tab>
+      No Panel
+    </auro-tab>
+  </div>
+  <div slot="panels">
+    <auro-tabpanel>
+      <span>Tab 1 Content</span>
+    </auro-tabpanel>
+    <auro-tabpanel><span>Tab 2 Content</span></auro-tabpanel>
+    <auro-tabpanel><span>Tab 3 Content</span></auro-tabpanel>
+  </div>
+</auro-tabgroup>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

package/demo/auro-tabpanel.min.js

@@ -68,6 +68,19 @@ class AuroLibraryRuntimeUtils {
 
     return elemTag === tag || elem.hasAttribute(tag);
   }
+
+  /**
+   * Gets the text content of a named slot.
+   * @returns {String}
+   * @private
+   */
+  getSlotText(elem, name) {
+    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
+    const nodes = slot?.assignedNodes({ flatten: true }) || [];
+    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
+
+    return text || null;
+  }
 }
 
 /**
@@ -77,7 +90,7 @@ class AuroLibraryRuntimeUtils {
  */
 const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},l=new Map,n$1=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n$1(x);
 
-var styleCss$2 = i$2`:host #tab-root{cursor:pointer;white-space:nowrap}:host([disabled]){pointer-events:none}:host(:focus-within),:host(:focus:not(:focus-visible)){position:relative;outline:none}:host(:focus-within):before,:host(:focus:not(:focus-visible)):before{position:absolute;top:0;left:50%;display:inline-block;width:100%;height:calc(100% + var(--ds-size-50, .25rem));border:1px solid var(--ds-color-border-active-default, #0074c8);border-radius:var(--ds-border-radius, .375rem);content:"";transform:translate(-50%)}
+var styleCss$2 = i$2`:host #tab-root{cursor:pointer;white-space:nowrap}:host([disabled]){pointer-events:none}:host(:focus-within),:host(:focus:not(:focus-visible)){position:relative;outline-color:unset;outline-style:none;outline-width:unset}:host(:focus-within):before,:host(:focus:not(:focus-visible)):before{position:absolute;top:0;left:50%;display:inline-block;width:100%;height:calc(100% + var(--ds-size-50, .25rem));border:1px solid var(--ds-color-border-active-default, #0074c8);border-radius:var(--ds-border-radius, .375rem);content:"";transform:translate(-50%)}:host([onDark]:focus-within):before,:host([onDark]:focus:not(:focus-visible)):before,:host([appearance=inverse]:focus-within):before,:host([appearance=inverse]:focus:not(:focus-visible)):before{border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host(:not([onDark]):focus-within):before,:host(:not([onDark]):focus:not(:focus-visible)):before,:host(:not([appearance=inverse]):focus-within):before,:host(:not([appearance=inverse]):focus:not(:focus-visible)):before{border-color:var(--ds-advanced-color-state-focused, #01426a)}
 `;
 
 /* eslint-disable no-magic-numbers */
@@ -88,15 +101,25 @@ var styleCss$2 = i$2`:host #tab-root{cursor:pointer;white-space:nowrap}:host([di
 /**
  * Represents a tab within an auro-tabgroup element. When selected, displays the corresponding AuroTabpanel.
  * The auro-tabpanel element should only be used inside an AuroTabgroup element.
- *
- * @attr {Boolean} selected - Mark the tab as selected tab.
- * @attr {Boolean} disabled - Mark the tab as disabled tab.
  */
 class AuroTab extends i$3 {
   static get properties() {
     return {
       /**
-       * @property {boolean} selected - Indicates whether the tab is selected.
+       * Defines whether the component will be on lighter or darker backgrounds.
+       * @type {"default" | "inverse" | string} 
+       * @prop {String} appearance
+       * @default "default"
+       */
+      appearance: {
+        type: String,
+        reflect: true,
+        default: "default"
+      },
+
+      /**
+       * Indicates whether the tab is selected.
+       * @prop {boolean} selected
        * @default false
        */
       selected: {
@@ -105,7 +128,8 @@ class AuroTab extends i$3 {
       },
 
       /**
-       * @property {boolean} focused - Indicates whether the tab is focused.
+       * Indicates whether the tab is focused.
+       * @property {boolean} focused 
        * @default false
        * @private
        */
@@ -115,7 +139,8 @@ class AuroTab extends i$3 {
       },
 
       /**
-       * @property {boolean} disabled - Indicates whether the tab is disabled.
+       * Indicates whether the tab is disabled.
+       * @property {boolean} disabled
        * @default false
        */
       disabled: {
@@ -124,8 +149,10 @@ class AuroTab extends i$3 {
       },
 
       /**
-       * @property {"default" | "unstyled" | string} variant - The variant of the tab.
-       * @default false
+       * The variant of the tab.
+       * @type {"default" | "unstyled" | string}
+       * @property {String} variant
+       * @default "default"
        */
       variant: {
         type: String,
@@ -212,6 +239,7 @@ class AuroTab extends i$3 {
   setInitialValues() {
     // Dynamic properties
     this.disabled = false;
+    this.appearance = "default";
 
     // Static properties
     /**
@@ -533,7 +561,7 @@ class ChildItemService {
   }
 }
 
-var styleCss$1 = i$2`::slotted(auro-tabpanel){flex-basis:100%}:host{position:relative;display:block}.tabgroupContainer{display:flex;flex-direction:column;transition:scroll .5s ease-in-out}.tabgroup{position:relative;padding-bottom:0}.tabgroup ::slotted([slot=tabs]){display:flex;overflow:unset;width:fit-content;flex-wrap:nowrap}.sliderPositioner{position:absolute;bottom:-1px;left:0;display:flex;width:0;height:calc(var(--ds-size-25, .125rem) + 1px);align-items:center;justify-content:center;transition:all .25s}.slider{width:100%;height:100%;background-color:var(--ds-color-ui-active-default, #054687)}
+var styleCss$1 = i$2`::slotted(auro-tabpanel){flex-basis:100%}:host{position:relative;display:block}.tabgroupContainer{display:flex;flex-direction:column;transition:scroll .5s ease-in-out}.tabgroup{position:relative;padding-bottom:0}.tabgroup ::slotted([slot=tabs]){display:flex;overflow:unset;width:fit-content;flex-wrap:nowrap}.sliderPositioner{position:absolute;bottom:-1px;left:0;display:flex;width:0;height:calc(var(--ds-size-25, .125rem) + 1px);align-items:center;justify-content:center;transition:all .25s}.slider{width:100%;height:100%}:host(:not([onDark])) .slider,:host(:not([appearance=inverse])) .slider{background-color:var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]) .slider,:host([appearance=inverse]) .slider{background-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}
 `;
 
 class TabIndexUtil {
@@ -605,10 +633,22 @@ const KEYCODE = {
  * @csspart tabgroup__panels - The panel wrapper element.
  * @csspart slider-positioner - The slider positioner element (non-visual, only used to center slider on tab).
  * @csspart slider - The slider element.
+ * @attr {Boolean} ondark - DEPRECATED - use `appearance` instead.
  */
 class AuroTabgroup extends i$3 {
   static get properties() {
     return {
+      /**
+       * Defines whether the component will be on lighter or darker backgrounds.
+       * @type {"default" | "inverse" | string}
+       * @property {String} appearance
+       * @default 'default'
+       */
+      appearance: {
+        type: String,
+        reflect: true,
+      },
+
       /**
        * @property {number} scrollPosition - The current scroll position of the tab group container.
        * @default 0
@@ -658,6 +698,15 @@ class AuroTabgroup extends i$3 {
         attribute: false,
         reflect: false,
       },
+
+      /**
+       * @property {boolean} ondark - DEPRECATED - use `appearance` instead.
+       * @default false
+       */
+      ondark: {
+        type: Boolean,
+        reflect: true,
+      },
     };
   }
 
@@ -768,6 +817,7 @@ class AuroTabgroup extends i$3 {
     this.scrollPosition = 0;
     this.sliderStyles = {};
     this.selectOnFocus = false;
+    this.appearance = "default";
 
     // Static Properties
     /**
@@ -807,6 +857,23 @@ class AuroTabgroup extends i$3 {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroTabgroup);
   }
 
+  /**
+   * @description Propagates the ondark attribute to child tabs.
+   * @method propagateOnDarkToTabs
+   * @private
+   */
+  propagateOnDarkToTabs() {
+    this.allTabs.forEach((tab) => {
+      if (this.ondark) {
+        tab.setAttribute("ondark", "");
+      } else {
+        tab.removeAttribute("ondark");
+      }
+
+      tab.setAttribute("appearance", this.appearance);
+    });
+  }
+
   /**
    * Loop through tabs and match with same-index panels.
    * @private
@@ -867,6 +934,7 @@ class AuroTabgroup extends i$3 {
     this.busy = true;
 
     this.#associateTabsWithPanels();
+    this.propagateOnDarkToTabs();
 
     // If none of the tabs were set to be focused, focus the first tab
     if (this.focusedTabIdx === -1 && this.allTabs[0]?.panel) {
@@ -1153,8 +1221,15 @@ class AuroTabgroup extends i$3 {
     this.setResizeObserver(this.tabGroupContainer);
   }
 
-  updated() {
+  updated(changedProperties) {
     this.updateChevronVisibility();
+
+    if (
+      changedProperties.has("appearance") ||
+      changedProperties.has("ondark")
+    ) {
+      this.propagateOnDarkToTabs();
+    }
   }
 
   connectedCallback() {
@@ -1221,7 +1296,8 @@ class AuroTabpanel extends i$3 {
   static get properties() {
     return {
       /**
-       * @property {boolean} hidden - Indicates whether the panel is hidden.
+       * Indicates whether the panel is hidden.
+       * @property {boolean} hidden
        * @default false
        */
       hidden: {

package/demo/index.html

@@ -17,29 +17,23 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Generator | auro-tabs custom element</title>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
-    />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css">
+    
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    
+    <!-- Legacy reference is still needed to support auro-button's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+    
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    <!-- Demo Specific Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
 
-    <!-- Auro radio group for examples -->
     <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm"></script>
 
-
-    <style>
-      /*
-        For demo purposes only, the above elementDemoStyles
-        has a star selector that's really hard to overwrite from shadow dom
-      */
-
-      auro-tab:focus{
-        outline: none;
-      }
-    </style>
   </head>
   <body class="auro-markdown">
     <main></main>
@@ -115,10 +109,13 @@
         padding: 1rem;
       }
 
+      auro-tab:focus-visible {
+        outline: none;
+      }
     </style>
 
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
   </body>
 </html>