@aurodesignsystem-dev/auro-carousel 0.0.0-pr97.0 → 0.0.0-pr97.2

package/demo/api.md

@@ -32,12 +32,12 @@ The auro-carousel component displays a group of elements in a scrollable contain
 
 ## Slots
 
-| Name                    | Description                                      |
-|-------------------------|--------------------------------------------------|
-|                         | the elements in the carousel                     |
-| [ariaLabel](#ariaLabel)             | Text to give an accessible name to the carousel. |
-| `ariaLabel.scrollLeft`  | Text to give an accessible name to the left scroll button. |
-| `ariaLabel.scrollRight` | Text to give an accessible name to the right scroll button. |
+| Name                     | Description                                      |
+|--------------------------|--------------------------------------------------|
+|                          | the elements in the carousel                     |
+| [ariaLabel](#ariaLabel)              | Text to give an accessible name to the carousel. |
+| `ariaLabel.scroll.left`  | Text to give an accessible name to the left scroll button. |
+| `ariaLabel.scroll.right` | Text to give an accessible name to the right scroll button. |
 
 ## CSS Shadow Parts
 
@@ -464,15 +464,17 @@ Used for all elements inside the scrolling carousel.
 
 #### aria label slots
 
-Use the `ariaLabel`, `ariaLabel.scrollLeft`, and `ariaLabel.scrollRight` slots to customize the accessible names for the carousel container and the left and right scroll buttons.
+Use the `ariaLabel`, `ariaLabel.scroll.left`, and `ariaLabel.scroll.right` slots to customize the accessible names for the carousel container and the left and right scroll buttons.
+
+**Note:** Do not use the `aria-label` attribute on the `auro-carousel` element itself. This will be ignored in favor of the `ariaLabel` slot.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlots.html) -->
   <!-- The below content is automatically added from ./../apiExamples/ariaLabelSlots.html -->
   <auro-carousel centerSelected>
     <span slot="ariaLabel">My Carousel</span>
-    <span slot="ariaLabel.scrollLeft">My custom scroll left text</span>
-    <span slot="ariaLabel.scrollRight">My custom scroll right text</span>
+    <span slot="ariaLabel.scroll.left">My custom scroll left text</span>
+    <span slot="ariaLabel.scroll.right">My custom scroll right text</span>
     <auro-pane date="2020-10-10" price="$435"></auro-pane>
     <auro-pane date="2020-10-11" price="$435"></auro-pane>
     <auro-pane date="2020-10-12" price="$435"></auro-pane>
@@ -502,8 +504,8 @@ Use the `ariaLabel`, `ariaLabel.scrollLeft`, and `ariaLabel.scrollRight` slots t
 ```html
 <auro-carousel centerSelected>
   <span slot="ariaLabel">My Carousel</span>
-  <span slot="ariaLabel.scrollLeft">My custom scroll left text</span>
-  <span slot="ariaLabel.scrollRight">My custom scroll right text</span>
+  <span slot="ariaLabel.scroll.left">My custom scroll left text</span>
+  <span slot="ariaLabel.scroll.right">My custom scroll right text</span>
   <auro-pane date="2020-10-10" price="$435"></auro-pane>
   <auro-pane date="2020-10-11" price="$435"></auro-pane>
   <auro-pane date="2020-10-12" price="$435"></auro-pane>

package/demo/auro-carousel.min.js

@@ -282,8 +282,8 @@ var tokensCss = i$5`:host{--ds-auro-carousel-gradient-color-one: var(--ds-basic-
  *
  * @slot - the elements in the carousel
  * @slot ariaLabel - Text to give an accessible name to the carousel.
- * @slot ariaLabel.scrollLeft - Text to give an accessible name to the left scroll button.
- * @slot ariaLabel.scrollRight - Text to give an accessible name to the right scroll button.
+ * @slot ariaLabel.scroll.left - Text to give an accessible name to the left scroll button.
+ * @slot ariaLabel.scroll.right - Text to give an accessible name to the right scroll button.
  *
  * @csspart wrapper - The primary root HTML element of the component.
  *
@@ -615,8 +615,8 @@ class AuroCarousel extends i$2 {
     return u$2`
       <!-- Hidden slots for aria labels -->
       <slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
-      <slot name="ariaLabel.scrollLeft" hidden @slotchange="${this.requestUpdate}"></slot>
-      <slot name="ariaLabel.scrollRight" hidden @slotchange="${this.requestUpdate}"></slot>
+      <slot name="ariaLabel.scroll.left" hidden @slotchange="${this.requestUpdate}"></slot>
+      <slot name="ariaLabel.scroll.right" hidden @slotchange="${this.requestUpdate}"></slot>
 
       <div class="breakpointDetector"></div>
       <div role="group"
@@ -628,7 +628,7 @@ class AuroCarousel extends i$2 {
         
         <!-- Left button -->
         <${this.buttonTag} 
-          aria-label="${o(this.runtimeUtils.getSlotText(this, 'ariaLabel.scrollLeft') || 'Scroll Left')}"
+          aria-label="${o(this.runtimeUtils.getSlotText(this, 'ariaLabel.scroll.left') || 'Scroll Left')}"
           shape="circle"
           variant="secondary" 
           @click=${() => this.handleClick(false)} 
@@ -644,7 +644,7 @@ class AuroCarousel extends i$2 {
         
         <!-- Right button -->
         <${this.buttonTag} 
-          aria-label="${o(this.runtimeUtils.getSlotText(this, 'ariaLabel.scrollRight') || 'Scroll Right')}"
+          aria-label="${o(this.runtimeUtils.getSlotText(this, 'ariaLabel.scroll.right') || 'Scroll Right')}"
           shape="circle"
           variant="secondary" 
           @click=${() => this.handleClick(true)} 

package/dist/{auro-carousel-BU_mtJJ-.js → auro-carousel-DbNzxhOH.js}

@@ -81,8 +81,8 @@ import{css as t,LitElement as e,html as o}from"lit";import{unsafeStatic as s,lit
 `;class V extends e{constructor(){super(),this.scrollDistance=300,this.runtimeUtils=new l;const t=new d;this.buttonTag=t.generateTag("auro-button","12.2.0",L),this.iconTag=t.generateTag("auro-icon","9.1.0",X),this.scrolledToStart=!1,this.scrolledToEnd=!1}static get properties(){return{displayArrows:{type:Boolean},scrollDistance:{type:Number,reflect:!0},label:{type:String},centerSelected:{type:String,reflect:!0}}}static get styles(){return[G,j,P]}static register(t="auro-carousel"){l.prototype.registerComponent(t,V)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-carousel"),this.carousel=this.renderRoot.querySelector(".carousel"),this.label||console.warn("Label should be provided to auro-carousel for carousel to be accessible"),this.setScrollFlags(!1),this.setUpIntersectionObserver(),this.setUpResizeObserver(),this.hasAttribute("centerSelected")&&(this.actionOnChildrenReady(),document.addEventListener("DOMContentLoaded",()=>{this.actionOnChildrenReady()}))}actionOnChildrenReady(){const t=[];[...this.children].forEach(e=>{t.push(e.updateComplete)}),Promise.all(t).then(()=>{this.scrollToSelected()})}scrollToSelected(){const t=[...this.children].find(t=>t.hasAttribute("selected"));t&&this.centerElement(t)}isSmallScreen(){const t=this.renderRoot.querySelector(".breakpointDetector");return"sm"!==window.getComputedStyle(t,":before").getPropertyValue("content").replace(/"/gu,"")}scrollCarousel(t){this.carousel.scrollLeft+=t}centerElement(t){if(!this.contains(t))throw new Error("Element is not a descendant of this carousel");const e=t.getBoundingClientRect().x-this.getBoundingClientRect().left-this.offsetWidth/2+t.offsetWidth/2;this.scrollCarousel(e)}setScrollFlags(t){const{scrollLeft:e,scrollWidth:o,clientWidth:s}=this.carousel;this.scrolledToStart=e<=0,this.scrolledToEnd=e>=o-s,t&&(this.scrolledToStart||this.scrolledToEnd)&&(this.scrolledToStart?this.firstElementChild.focus():this.lastElementChild.focus()),this.requestUpdate()}setUpIntersectionObserver(){const t={root:this.carousel,threshold:.8};if("IntersectionObserver"in window&&!this.isSmallScreen()){const e=t=>{t.forEach(t=>{t.isIntersecting?(t.target.removeAttribute("tabindex"),t.target.removeAttribute("aria-hidden")):(t.target.setAttribute("tabindex","-1"),t.target.setAttribute("aria-hidden",!0))})};this.intersectionObserver=new IntersectionObserver(e,t),this.observeChildren()}}setUpResizeObserver(){"ResizeObserver"in window&&(this.resizeObserver=new ResizeObserver(()=>this.setScrollFlags()),Array.from(this.children).forEach(t=>{this.resizeObserver.observe(t)}))}observeChildren(){Array.from(this.children).forEach(t=>{this.intersectionObserver.observe(t)})}handleSlotChange(){this.setScrollFlags(!1),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.observeChildren())}handleClick(t){let e=null;t?(this.scrollCarousel(this.scrollDistance),e=new CustomEvent("scrollRight",{bubbles:!0,composed:!0})):(this.scrollCarousel(-1*this.scrollDistance),e=new CustomEvent("scrollLeft",{bubbles:!0,composed:!0})),this.dispatchEvent(e)}render(){const t={wrapper:!0,carousel:!0,"carousel--scrolledToStart":this.scrolledToStart&&!this.displayArrows,"carousel--scrolledToEnd":this.scrolledToEnd&&!this.displayArrows};return r`
       <!-- Hidden slots for aria labels -->
       <slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
-      <slot name="ariaLabel.scrollLeft" hidden @slotchange="${this.requestUpdate}"></slot>
-      <slot name="ariaLabel.scrollRight" hidden @slotchange="${this.requestUpdate}"></slot>
+      <slot name="ariaLabel.scroll.left" hidden @slotchange="${this.requestUpdate}"></slot>
+      <slot name="ariaLabel.scroll.right" hidden @slotchange="${this.requestUpdate}"></slot>
 
       <div class="breakpointDetector"></div>
       <div role="group"
@@ -94,7 +94,7 @@ import{css as t,LitElement as e,html as o}from"lit";import{unsafeStatic as s,lit
         
         <!-- Left button -->
         <${this.buttonTag} 
-          aria-label="${n(this.runtimeUtils.getSlotText(this,"ariaLabel.scrollLeft")||"Scroll Left")}"
+          aria-label="${n(this.runtimeUtils.getSlotText(this,"ariaLabel.scroll.left")||"Scroll Left")}"
           shape="circle"
           variant="secondary" 
           @click=${()=>this.handleClick(!1)} 
@@ -110,7 +110,7 @@ import{css as t,LitElement as e,html as o}from"lit";import{unsafeStatic as s,lit
         
         <!-- Right button -->
         <${this.buttonTag} 
-          aria-label="${n(this.runtimeUtils.getSlotText(this,"ariaLabel.scrollRight")||"Scroll Right")}"
+          aria-label="${n(this.runtimeUtils.getSlotText(this,"ariaLabel.scroll.right")||"Scroll Right")}"
           shape="circle"
           variant="secondary" 
           @click=${()=>this.handleClick(!0)} 

package/dist/index.d.ts

@@ -86,8 +86,8 @@ class l{registerComponent(t,e){customElements.get(t)||customElements.define(t,cl
 `;class V extends LitElement{constructor(){super(),this.scrollDistance=300,this.runtimeUtils=new l;const t=new d;this.buttonTag=t.generateTag("auro-button","12.2.0",L),this.iconTag=t.generateTag("auro-icon","9.1.0",X),this.scrolledToStart=false,this.scrolledToEnd=false;}static get properties(){return {displayArrows:{type:Boolean},scrollDistance:{type:Number,reflect:true},label:{type:String},centerSelected:{type:String,reflect:true}}}static get styles(){return [G,j,P]}static register(t="auro-carousel"){l.prototype.registerComponent(t,V);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-carousel"),this.carousel=this.renderRoot.querySelector(".carousel"),this.label||console.warn("Label should be provided to auro-carousel for carousel to be accessible"),this.setScrollFlags(false),this.setUpIntersectionObserver(),this.setUpResizeObserver(),this.hasAttribute("centerSelected")&&(this.actionOnChildrenReady(),document.addEventListener("DOMContentLoaded",()=>{this.actionOnChildrenReady();}));}actionOnChildrenReady(){const t=[];[...this.children].forEach(e=>{t.push(e.updateComplete);}),Promise.all(t).then(()=>{this.scrollToSelected();});}scrollToSelected(){const t=[...this.children].find(t=>t.hasAttribute("selected"));t&&this.centerElement(t);}isSmallScreen(){const t=this.renderRoot.querySelector(".breakpointDetector");return "sm"!==window.getComputedStyle(t,":before").getPropertyValue("content").replace(/"/gu,"")}scrollCarousel(t){this.carousel.scrollLeft+=t;}centerElement(t){if(!this.contains(t))throw new Error("Element is not a descendant of this carousel");const e=t.getBoundingClientRect().x-this.getBoundingClientRect().left-this.offsetWidth/2+t.offsetWidth/2;this.scrollCarousel(e);}setScrollFlags(t){const{scrollLeft:e,scrollWidth:o,clientWidth:s}=this.carousel;this.scrolledToStart=e<=0,this.scrolledToEnd=e>=o-s,t&&(this.scrolledToStart||this.scrolledToEnd)&&(this.scrolledToStart?this.firstElementChild.focus():this.lastElementChild.focus()),this.requestUpdate();}setUpIntersectionObserver(){const t={root:this.carousel,threshold:.8};if("IntersectionObserver"in window&&!this.isSmallScreen()){const e=t=>{t.forEach(t=>{t.isIntersecting?(t.target.removeAttribute("tabindex"),t.target.removeAttribute("aria-hidden")):(t.target.setAttribute("tabindex","-1"),t.target.setAttribute("aria-hidden",true));});};this.intersectionObserver=new IntersectionObserver(e,t),this.observeChildren();}}setUpResizeObserver(){"ResizeObserver"in window&&(this.resizeObserver=new ResizeObserver(()=>this.setScrollFlags()),Array.from(this.children).forEach(t=>{this.resizeObserver.observe(t);}));}observeChildren(){Array.from(this.children).forEach(t=>{this.intersectionObserver.observe(t);});}handleSlotChange(){this.setScrollFlags(false),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.observeChildren());}handleClick(t){let e=null;t?(this.scrollCarousel(this.scrollDistance),e=new CustomEvent("scrollRight",{bubbles:true,composed:true})):(this.scrollCarousel(-1*this.scrollDistance),e=new CustomEvent("scrollLeft",{bubbles:true,composed:true})),this.dispatchEvent(e);}render(){const t={wrapper:true,carousel:true,"carousel--scrolledToStart":this.scrolledToStart&&!this.displayArrows,"carousel--scrolledToEnd":this.scrolledToEnd&&!this.displayArrows};return html`
       <!-- Hidden slots for aria labels -->
       <slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
-      <slot name="ariaLabel.scrollLeft" hidden @slotchange="${this.requestUpdate}"></slot>
-      <slot name="ariaLabel.scrollRight" hidden @slotchange="${this.requestUpdate}"></slot>
+      <slot name="ariaLabel.scroll.left" hidden @slotchange="${this.requestUpdate}"></slot>
+      <slot name="ariaLabel.scroll.right" hidden @slotchange="${this.requestUpdate}"></slot>
 
       <div class="breakpointDetector"></div>
       <div role="group"
@@ -99,7 +99,7 @@ class l{registerComponent(t,e){customElements.get(t)||customElements.define(t,cl
         
         <!-- Left button -->
         <${this.buttonTag} 
-          aria-label="${ifDefined(this.runtimeUtils.getSlotText(this,"ariaLabel.scrollLeft")||"Scroll Left")}"
+          aria-label="${ifDefined(this.runtimeUtils.getSlotText(this,"ariaLabel.scroll.left")||"Scroll Left")}"
           shape="circle"
           variant="secondary" 
           @click=${()=>this.handleClick(false)} 
@@ -115,7 +115,7 @@ class l{registerComponent(t,e){customElements.get(t)||customElements.define(t,cl
         
         <!-- Right button -->
         <${this.buttonTag} 
-          aria-label="${ifDefined(this.runtimeUtils.getSlotText(this,"ariaLabel.scrollRight")||"Scroll Right")}"
+          aria-label="${ifDefined(this.runtimeUtils.getSlotText(this,"ariaLabel.scroll.right")||"Scroll Right")}"
           shape="circle"
           variant="secondary" 
           @click=${()=>this.handleClick(true)} 

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroCarousel}from"./auro-carousel-BU_mtJJ-.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
+export{A as AuroCarousel}from"./auro-carousel-DbNzxhOH.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";

package/dist/registered.js

@@ -1 +1 @@
-import{A as i}from"./auro-carousel-BU_mtJJ-.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();
+import{A as i}from"./auro-carousel-DbNzxhOH.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-carousel",
-  "version": "0.0.0-pr97.0",
+  "version": "0.0.0-pr97.2",
   "description": "auro-carousel HTML custom element",
   "repository": {
     "type": "git",