@aurodesignsystem-dev/auro-drawer 0.0.0-pr100.0 → 0.0.0-pr100.2

package/demo/api.md

@@ -25,13 +25,13 @@
 
 ## Slots
 
-| Name                    | Description                                      |
-|-------------------------|--------------------------------------------------|
-|                         | Default slot for the body content in drawer.     |
-| `ariaLabel.closeButton` | Text to describe the close button for screen readers. Default: "Close". |
-| [close](#close)                 | Used to replace the close button.                |
-| [footer](#footer)                | Used for action options, e.g. buttons.           |
-| [header](#header)                | Text to display as the header of the modal.      |
+| Name                     | Description                                      |
+|--------------------------|--------------------------------------------------|
+|                          | Default slot for the body content in drawer.     |
+| `ariaLabel.drawer.close` | Text to describe the "x" icon close button for screen readers. Default: "Close". |
+| [close](#close)                  | Used to replace the close button.                |
+| [footer](#footer)                 | Used for action options, e.g. buttons.           |
+| [header](#header)                 | Text to display as the header of the modal.      |
 
 ## CSS Shadow Parts
 
@@ -906,7 +906,7 @@ This is a use case where there is a popover and combobox component inside the dr
 
 ### Aria Label Slot
 
-To customize the aria-label text for the close button, use the `ariaLabel.closeButton` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
+To customize the aria-label text for the close button, use the `ariaLabel.drawer.close` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlot.html) -->
@@ -915,7 +915,7 @@ To customize the aria-label text for the close button, use the `ariaLabel.closeB
     <auro-button id="openAriaLabelSlotDrawer">Open drawer</auro-button>
   </div>
   <auro-drawer id="ariaLabelSlotDrawer" size="sm" fullscreenBreakpoint="lg">
-    <span slot="ariaLabel.closeButton">This is the new aria-label for the close button</span>
+    <span slot="ariaLabel.drawer.close">This is the new aria-label for the close button</span>
     <span slot="header">Small Drawer</span>
     <div slot="content">
       <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
@@ -947,7 +947,7 @@ To customize the aria-label text for the close button, use the `ariaLabel.closeB
   <auro-button id="openAriaLabelSlotDrawer">Open drawer</auro-button>
 </div>
 <auro-drawer id="ariaLabelSlotDrawer" size="sm" fullscreenBreakpoint="lg">
-  <span slot="ariaLabel.closeButton">This is the new aria-label for the close button</span>
+  <span slot="ariaLabel.drawer.close">This is the new aria-label for the close button</span>
   <span slot="header">Small Drawer</span>
   <div slot="content">
     <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>

package/demo/auro-drawer.min.js

@@ -2993,7 +2993,7 @@ class AuroDrawerContent extends i$2 {
   render() {
     return u$2`
       <!-- Hidden slot for close button aria-label -->
-      <slot name="ariaLabel.closeButton" hidden @slotchange=${this.requestUpdate}></slot>
+      <slot name="ariaLabel.drawer.close" hidden @slotchange=${this.requestUpdate}></slot>
 
       <div class="wrapper" tabindex="-1" part="drawer-wrapper" @transitionend=${this.handleWrapperTransitionEnd}>
         ${
@@ -3015,7 +3015,7 @@ class AuroDrawerContent extends i$2 {
                   variant="ghost"
                   shape="circle"
                   size="sm"
-                  aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.closeButton') || 'Close'}"
+                  aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.drawer.close') || 'Close'}"
                   ?onDark=${this.onDark}>
                     <${this.iconTag} ?customColor="${this.onDark}" category="interface" name="x-lg"></${this.iconTag}>
                   </${this.buttonTag}>
@@ -3089,7 +3089,7 @@ const CONFIG = {
  * @slot header - Text to display as the header of the modal.
  * @slot footer - Used for action options, e.g. buttons.
  * @slot close - Used to replace the close button.
- * @slot ariaLabel.closeButton - Text to describe the close button for screen readers. Default: "Close".
+ * @slot ariaLabel.drawer.close - Text to describe the "x" icon close button for screen readers. Default: "Close".
  *
  * @fires auroDrawer-toggled - Event fired when the drawer is toggled open or closed.
  *

package/dist/{auro-drawer-BJigsnbI.js → auro-drawer-BK5t6lz-.js}

@@ -94,7 +94,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{unsafeStatic as o,lit
 `,Ct=e`:host{--ds-auro-drawer-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-drawer-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
 `;class Tt extends t{constructor(){super(),this.runtimeUtils=new l,this.buttonTag=c.prototype.generateTag("auro-button","12.2.0",pt),this.iconTag=c.prototype.generateTag("auro-icon","9.0.0",zt),this.prevActiveElement=void 0}static get properties(){return{visible:{type:Boolean,reflect:!0},modal:{type:Boolean,reflect:!0},unformatted:{type:Boolean,reflect:!0},onDark:{type:Boolean,reflect:!0}}}static get styles(){return[Bt,Ct,Et]}handleCloseButtonClick(){this.dispatchEvent(new CustomEvent("close-click"))}handleWrapperTransitionEnd(){this.visible&&this.focusTrap&&this.focusTrap.focusFirstElement()}updated(e){e.has("visible")&&(this.visible?(this.focusTrap||(this.focusTrap=new At(this)),this.prevActiveElement=document.activeElement,this.prevActiveElement===document.body&&this.triggerElement&&(this.prevActiveElement=this.triggerElement)):(this.prevActiveElement&&(this.prevActiveElement.focus(),this.prevActiveElement=void 0),this.focusTrap&&(this.focusTrap.disconnect(),this.focusTrap=null)))}firstUpdated(){super.firstUpdated()}render(){return r`
       <!-- Hidden slot for close button aria-label -->
-      <slot name="ariaLabel.closeButton" hidden @slotchange=${this.requestUpdate}></slot>
+      <slot name="ariaLabel.drawer.close" hidden @slotchange=${this.requestUpdate}></slot>
 
       <div class="wrapper" tabindex="-1" part="drawer-wrapper" @transitionend=${this.handleWrapperTransitionEnd}>
         ${this.unformatted?"":r`
@@ -110,7 +110,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{unsafeStatic as o,lit
                   variant="ghost"
                   shape="circle"
                   size="sm"
-                  aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.closeButton")||"Close"}"
+                  aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.drawer.close")||"Close"}"
                   ?onDark=${this.onDark}>
                     <${this.iconTag} ?customColor="${this.onDark}" category="interface" name="x-lg"></${this.iconTag}>
                   </${this.buttonTag}>

package/dist/index.d.ts

@@ -99,7 +99,7 @@ class l{registerComponent(e,t){customElements.get(e)||customElements.define(e,cl
 `,Ct=css`:host{--ds-auro-drawer-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-drawer-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
 `;class Tt extends LitElement{constructor(){super(),this.runtimeUtils=new l,this.buttonTag=c.prototype.generateTag("auro-button","12.2.0",pt),this.iconTag=c.prototype.generateTag("auro-icon","9.0.0",zt),this.prevActiveElement=void 0;}static get properties(){return {visible:{type:Boolean,reflect:true},modal:{type:Boolean,reflect:true},unformatted:{type:Boolean,reflect:true},onDark:{type:Boolean,reflect:true}}}static get styles(){return [Bt,Ct,Et]}handleCloseButtonClick(){this.dispatchEvent(new CustomEvent("close-click"));}handleWrapperTransitionEnd(){this.visible&&this.focusTrap&&this.focusTrap.focusFirstElement();}updated(e){e.has("visible")&&(this.visible?(this.focusTrap||(this.focusTrap=new At(this)),this.prevActiveElement=document.activeElement,this.prevActiveElement===document.body&&this.triggerElement&&(this.prevActiveElement=this.triggerElement)):(this.prevActiveElement&&(this.prevActiveElement.focus(),this.prevActiveElement=void 0),this.focusTrap&&(this.focusTrap.disconnect(),this.focusTrap=null)));}firstUpdated(){super.firstUpdated();}render(){return html`
       <!-- Hidden slot for close button aria-label -->
-      <slot name="ariaLabel.closeButton" hidden @slotchange=${this.requestUpdate}></slot>
+      <slot name="ariaLabel.drawer.close" hidden @slotchange=${this.requestUpdate}></slot>
 
       <div class="wrapper" tabindex="-1" part="drawer-wrapper" @transitionend=${this.handleWrapperTransitionEnd}>
         ${this.unformatted?"":html`
@@ -115,7 +115,7 @@ class l{registerComponent(e,t){customElements.get(e)||customElements.define(e,cl
                   variant="ghost"
                   shape="circle"
                   size="sm"
-                  aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.closeButton")||"Close"}"
+                  aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.drawer.close")||"Close"}"
                   ?onDark=${this.onDark}>
                     <${this.iconTag} ?customColor="${this.onDark}" category="interface" name="x-lg"></${this.iconTag}>
                   </${this.buttonTag}>

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroDrawer}from"./auro-drawer-BJigsnbI.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
+export{A as AuroDrawer}from"./auro-drawer-BK5t6lz-.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-drawer-BJigsnbI.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-drawer-BK5t6lz-.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-drawer",
-  "version": "0.0.0-pr100.0",
+  "version": "0.0.0-pr100.2",
   "description": "auro-drawer HTML custom element",
   "repository": {
     "type": "git",
@@ -21,7 +21,6 @@
     "node": "^20.x || ^22.x"
   },
   "dependencies": {
-    "@aurodesignsystem-dev/auro-button": "^0.0.0-pr362.2",
     "lit": "^3.3.0"
   },
   "devDependencies": {