@aurodesignsystem-dev/auro-backtotop 0.0.0-pr67.0 → 0.0.0-pr67.2

package/custom-elements.json

@@ -76,17 +76,6 @@
                 "module": "src/auro-backtotop.js"
               }
             },
-            {
-              "name": "iconOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "iconOnly",
-              "inheritedFrom": {
-                "name": "AuroBackToTop",
-                "module": "src/auro-backtotop.js"
-              }
-            },
             {
               "name": "interactionActive",
               "type": {
@@ -112,7 +101,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "'primary' | 'secondary' | String"
+                "text": "string"
               },
               "description": "The variant attribute allows for rendering the button using the primary (default) or secondary styles.",
               "default": "\"primary\"",
@@ -153,20 +142,6 @@
                 "module": "src/auro-backtotop.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "iconOnly",
-              "privacy": "public",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "iconOnly",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AuroBackToTop",
-                "module": "src/auro-backtotop.js"
-              }
-            },
             {
               "kind": "method",
               "name": "initializeProperties",
@@ -255,7 +230,7 @@
               "name": "variant",
               "privacy": "public",
               "type": {
-                "text": "'primary' | 'secondary' | String"
+                "text": "string"
               },
               "description": "The variant attribute allows for rendering the button using the primary (default) or secondary styles.",
               "default": "\"primary\"",
@@ -330,16 +305,6 @@
               "attribute": "hidden",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "iconOnly",
-              "privacy": "public",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "iconOnly",
-              "reflects": true
-            },
             {
               "kind": "method",
               "name": "initializeProperties"
@@ -404,7 +369,7 @@
               "name": "variant",
               "privacy": "public",
               "type": {
-                "text": "'primary' | 'secondary' | String"
+                "text": "string"
               },
               "description": "The variant attribute allows for rendering the button using the primary (default) or secondary styles.",
               "default": "\"primary\"",
@@ -428,13 +393,6 @@
               },
               "fieldName": "hidden"
             },
-            {
-              "name": "iconOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "iconOnly"
-            },
             {
               "name": "interactionActive",
               "type": {
@@ -452,7 +410,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "'primary' | 'secondary' | String"
+                "text": "string"
               },
               "description": "The variant attribute allows for rendering the button using the primary (default) or secondary styles.",
               "default": "\"primary\"",

package/demo/api.md

@@ -7,10 +7,10 @@ The auro-backtotop element provides users a way to quickly return to page top.
 
 ### Properties & Attributes
 
-| Properties | Attributes | Type                               | Default   | Description                                                                                            |
-| ---------- | ---------- | ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------ |
-| disabled   | disabled   | boolean                            |           | Render the trigger inline, will always be visible.                                                     |
-| variant    | variant    | 'primary' \| 'secondary' \| String | "primary" | The variant attribute allows for rendering the button using the primary (default) or secondary styles. |
+| Properties | Attributes | Type    | Default   | Description                                                                                            |
+| ---------- | ---------- | ------- | --------- | ------------------------------------------------------------------------------------------------------ |
+| disabled   | disabled   | boolean |           | Render the trigger inline, will always be visible.                                                     |
+| variant    | variant    | string  | "primary" | The variant attribute allows for rendering the button using the primary (default) or secondary styles. |
 
 ### Methods
 
@@ -150,6 +150,34 @@ The default slot defines the content of the button.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### ariaLabel
+
+The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The default value is `"arrow-up"`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelButtonOnly.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/ariaLabelButtonOnly.html -->
+  <auro-button
+    aria-label="Custom aria-label goes here!">
+    Back to top
+    <auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
+  </auro-button>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabel.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabel.html -->
+
+```html
+<auro-backtotop>
+  <span slot="ariaLabel">Custom aria-label goes here!</span>
+  Back to top
+</auro-backtotop>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Page Content For Demo
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pageContent.html) -->

package/demo/auro-backtotop.min.js

@@ -318,11 +318,6 @@ class AuroBackToTop extends i$1 {
      */
     this.hidden = true;
 
-    /**
-     * @private
-     */
-    this.iconOnly = true;
-
     /**
      * @private
      */
@@ -363,10 +358,6 @@ class AuroBackToTop extends i$1 {
         type: Boolean,
         reflect: true,
       },
-      iconOnly: {
-        type: Boolean,
-        reflect: true,
-      },
       interactionActive: {
         type: Boolean,
       },
@@ -376,7 +367,6 @@ class AuroBackToTop extends i$1 {
 
       /**
        * The variant attribute allows for rendering the button using the primary (default) or secondary styles.
-       * @type { 'primary' | 'secondary' | String }
        * @default "primary"
        */
       variant: {
@@ -476,10 +466,8 @@ class AuroBackToTop extends i$1 {
 
       <${this.buttonTag}
         aria-label="${this.runtimeUtils.getSlotText(this, "ariaLabel") || "arrow-up"}"
-        rounded
         .disabled="${this.disabled}"
         variant="${this.variant}"
-        ?iconOnly=${!this.lastScrollDirectionUp && !this.interactionActive}
         part="button"
         shape="${this.shape}"
         size="${this.size}"

package/demo/index.md

@@ -6,10 +6,6 @@ This file is generated based on a template fetched from `./docs/partials/index.m
 
 # Backtotop
 
-<auro-icon-9_1_0 customColor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon-9_1_0>
-<br /><br /><br />
-After icon
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
 `<auro-backtotop>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of providing a quick and accessible means to jump back to the top of a long content page.

package/dist/{auro-backtotop-CeT9HfoH.js → auro-backtotop-CYTkGahv.js}

@@ -76,16 +76,14 @@ import{literal as t,html as e,unsafeStatic as o}from"lit/static-html.js";import{
         </div>
       </div>
     `}}class W{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(e,s,a){const r=this.generateElementName(e,s),i=t`${o(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}}class P{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,!0)}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return(o?.assignedNodes({flatten:!0})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var X=s`:host{position:fixed;right:var(--ds-size-300, 1.5rem);bottom:var(--ds-size-300, 1.5rem)}:host [auro-button]:not(:hover) .text{display:none;overflow:hidden}
-`;class j extends a{constructor(){super(),this.initializeProperties()}initializeProperties(){const t=new W;this.disabled=!1,this.variant="primary",this.iconTag=t.generateTag("auro-icon","9.1.0",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=!0,this.iconOnly=!0,this.lastKnownScrollPosition=0,this.lastScrollDirectionUp=!1,this.interactionActive=!1,this.yPosShowButton=400,this.runtimeUtils=new P}static get properties(){return{disabled:{type:Boolean,reflect:!0},hidden:{type:Boolean,reflect:!0},iconOnly:{type:Boolean,reflect:!0},interactionActive:{type:Boolean},lastScrollDirectionUp:{type:Boolean},variant:{type:String,reflect:!0}}}static get styles(){return[X]}static register(t="auro-backtotop"){P.prototype.registerComponent(t,j)}scrollTop(){document.documentElement.scrollTop=0}onTriggerClick(){this.scrollTop(),this.interactionActive=!1}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-backtotop"),document.addEventListener("scroll",()=>{window.scrollY<this.lastKnownScrollPosition?this.lastScrollDirectionUp=!0:this.lastScrollDirectionUp=!1,this.lastKnownScrollPosition=window.scrollY,this.lastKnownScrollPosition<this.yPosShowButton?this.hidden=!0:this.hidden=!1}),this.addEventListener("mouseover",()=>{this.shape="pill",this.interactionActive=!0}),this.addEventListener("mouseout",()=>{this.shape="circle",this.interactionActive=!1}),this.addEventListener("focusin",()=>{this.interactionActive=!0}),this.addEventListener("focusout",()=>{this.interactionActive=!1}),this.addEventListener("touchend",()=>{this.onTriggerClick()})}render(){return e`
+`;class j extends a{constructor(){super(),this.initializeProperties()}initializeProperties(){const t=new W;this.disabled=!1,this.variant="primary",this.iconTag=t.generateTag("auro-icon","9.1.0",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=!0,this.lastKnownScrollPosition=0,this.lastScrollDirectionUp=!1,this.interactionActive=!1,this.yPosShowButton=400,this.runtimeUtils=new P}static get properties(){return{disabled:{type:Boolean,reflect:!0},hidden:{type:Boolean,reflect:!0},interactionActive:{type:Boolean},lastScrollDirectionUp:{type:Boolean},variant:{type:String,reflect:!0}}}static get styles(){return[X]}static register(t="auro-backtotop"){P.prototype.registerComponent(t,j)}scrollTop(){document.documentElement.scrollTop=0}onTriggerClick(){this.scrollTop(),this.interactionActive=!1}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-backtotop"),document.addEventListener("scroll",()=>{window.scrollY<this.lastKnownScrollPosition?this.lastScrollDirectionUp=!0:this.lastScrollDirectionUp=!1,this.lastKnownScrollPosition=window.scrollY,this.lastKnownScrollPosition<this.yPosShowButton?this.hidden=!0:this.hidden=!1}),this.addEventListener("mouseover",()=>{this.shape="pill",this.interactionActive=!0}),this.addEventListener("mouseout",()=>{this.shape="circle",this.interactionActive=!1}),this.addEventListener("focusin",()=>{this.interactionActive=!0}),this.addEventListener("focusout",()=>{this.interactionActive=!1}),this.addEventListener("touchend",()=>{this.onTriggerClick()})}render(){return e`
       <!-- Hidden slot for aria-label -->
       <slot name="ariaLabel" hidden></slot>
 
       <${this.buttonTag}
         aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel")||"arrow-up"}"
-        rounded
         .disabled="${this.disabled}"
         variant="${this.variant}"
-        ?iconOnly=${!this.lastScrollDirectionUp&&!this.interactionActive}
         part="button"
         shape="${this.shape}"
         size="${this.size}"

package/dist/index.d.ts

@@ -81,16 +81,14 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
         </div>
       </div>
     `}}class W{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(e,s,a){const r=this.generateElementName(e,s),i=literal`${unsafeStatic(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}}class P{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return (o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var X=css`:host{position:fixed;right:var(--ds-size-300, 1.5rem);bottom:var(--ds-size-300, 1.5rem)}:host [auro-button]:not(:hover) .text{display:none;overflow:hidden}
-`;class j extends LitElement{constructor(){super(),this.initializeProperties();}initializeProperties(){const t=new W;this.disabled=false,this.variant="primary",this.iconTag=t.generateTag("auro-icon","9.1.0",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=true,this.iconOnly=true,this.lastKnownScrollPosition=0,this.lastScrollDirectionUp=false,this.interactionActive=false,this.yPosShowButton=400,this.runtimeUtils=new P;}static get properties(){return {disabled:{type:Boolean,reflect:true},hidden:{type:Boolean,reflect:true},iconOnly:{type:Boolean,reflect:true},interactionActive:{type:Boolean},lastScrollDirectionUp:{type:Boolean},variant:{type:String,reflect:true}}}static get styles(){return [X]}static register(t="auro-backtotop"){P.prototype.registerComponent(t,j);}scrollTop(){document.documentElement.scrollTop=0;}onTriggerClick(){this.scrollTop(),this.interactionActive=false;}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-backtotop"),document.addEventListener("scroll",()=>{window.scrollY<this.lastKnownScrollPosition?this.lastScrollDirectionUp=true:this.lastScrollDirectionUp=false,this.lastKnownScrollPosition=window.scrollY,this.lastKnownScrollPosition<this.yPosShowButton?this.hidden=true:this.hidden=false;}),this.addEventListener("mouseover",()=>{this.shape="pill",this.interactionActive=true;}),this.addEventListener("mouseout",()=>{this.shape="circle",this.interactionActive=false;}),this.addEventListener("focusin",()=>{this.interactionActive=true;}),this.addEventListener("focusout",()=>{this.interactionActive=false;}),this.addEventListener("touchend",()=>{this.onTriggerClick();});}render(){return html`
+`;class j extends LitElement{constructor(){super(),this.initializeProperties();}initializeProperties(){const t=new W;this.disabled=false,this.variant="primary",this.iconTag=t.generateTag("auro-icon","9.1.0",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=true,this.lastKnownScrollPosition=0,this.lastScrollDirectionUp=false,this.interactionActive=false,this.yPosShowButton=400,this.runtimeUtils=new P;}static get properties(){return {disabled:{type:Boolean,reflect:true},hidden:{type:Boolean,reflect:true},interactionActive:{type:Boolean},lastScrollDirectionUp:{type:Boolean},variant:{type:String,reflect:true}}}static get styles(){return [X]}static register(t="auro-backtotop"){P.prototype.registerComponent(t,j);}scrollTop(){document.documentElement.scrollTop=0;}onTriggerClick(){this.scrollTop(),this.interactionActive=false;}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-backtotop"),document.addEventListener("scroll",()=>{window.scrollY<this.lastKnownScrollPosition?this.lastScrollDirectionUp=true:this.lastScrollDirectionUp=false,this.lastKnownScrollPosition=window.scrollY,this.lastKnownScrollPosition<this.yPosShowButton?this.hidden=true:this.hidden=false;}),this.addEventListener("mouseover",()=>{this.shape="pill",this.interactionActive=true;}),this.addEventListener("mouseout",()=>{this.shape="circle",this.interactionActive=false;}),this.addEventListener("focusin",()=>{this.interactionActive=true;}),this.addEventListener("focusout",()=>{this.interactionActive=false;}),this.addEventListener("touchend",()=>{this.onTriggerClick();});}render(){return html`
       <!-- Hidden slot for aria-label -->
       <slot name="ariaLabel" hidden></slot>
 
       <${this.buttonTag}
         aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel")||"arrow-up"}"
-        rounded
         .disabled="${this.disabled}"
         variant="${this.variant}"
-        ?iconOnly=${!this.lastScrollDirectionUp&&!this.interactionActive}
         part="button"
         shape="${this.shape}"
         size="${this.size}"

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroBackToTop}from"./auro-backtotop-CeT9HfoH.js";import"lit/static-html.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
+export{A as AuroBackToTop}from"./auro-backtotop-CYTkGahv.js";import"lit/static-html.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";

package/dist/registered.js

@@ -1 +1 @@
-import{A as i}from"./auro-backtotop-CeT9HfoH.js";import"lit/static-html.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();
+import{A as i}from"./auro-backtotop-CYTkGahv.js";import"lit/static-html.js";import"lit";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-backtotop",
-  "version": "0.0.0-pr67.0",
+  "version": "0.0.0-pr67.2",
   "description": "auro-backtotop HTML custom element",
   "repository": {
     "type": "git",