@odx/foundation 1.0.0-beta.52 → 1.0.0-beta.53

package/dist/components.js

@@ -2980,7 +2980,7 @@ OdxMenu = __decorateClass$A([
   customElement("odx-menu", [styles$y])
 ], OdxMenu);
 
-const styles$x = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;margin-block-start:var(--margin-block-start);border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.header{padding-inline-end:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{position:absolute;inset-block-start:var(--odx-spacing-50);inset-inline-end:var(--odx-breakpoint-spacing-150)}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}.base[open]{transform:translate(0);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
+const styles$x = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;margin-block-start:var(--margin-block-start);border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}.base[open]{transform:translate(0);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
 
 var __defProp$z = Object.defineProperty;
 var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
@@ -3010,11 +3010,9 @@ const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
       (node) => node.hasAttribute("odx-modal-toggle") && node.ariaBusy !== "true" && node.ariaDisabled !== "true"
     );
     const modalId = source?.getAttribute("odx-modal-toggle");
-    const modals = modalId ? Array.from(source.ownerDocument.querySelectorAll(`#${modalId}`)) : [];
-    if (modals.length === 0) return;
-    for (const modal of modals) {
-      modal.open = !source.closest("odx-modal");
-    }
+    const modal = modalId ? source.ownerDocument.getElementById(modalId) : source?.closest("odx-modal");
+    if (!modal) return;
+    modal.open = !source.closest("odx-modal");
   });
 })();
 let OdxModal = class extends CustomElement {
@@ -3023,7 +3021,9 @@ let OdxModal = class extends CustomElement {
     __privateAdd$b(this, _OdxModal_instances);
     this.closeRequested = false;
     this.showRequested = false;
+    this.dismissible = true;
     this.open = false;
+    this.layout = ModalLayout.MODAL;
     __privateAdd$b(this, _handleKeyDown, (event) => {
       if (!getKeyInfo(event).escape) return;
       event.preventDefault();
@@ -3078,12 +3078,12 @@ let OdxModal = class extends CustomElement {
     return html`
       <dialog class="base" @close=${forwardEvent(this)} @keydown=${__privateGet$9(this, _handleKeyDown)}>
         <div class="inner">
-          ${when(
-      this.dismissible,
-      () => html`<odx-icon-button class="dismiss-action" icon="core::close" variant="ghost" @click=${this.dismiss}>×</odx-icon-button >`
-    )}
           <odx-stack class="header" align="center" horizontal>
             <slot name="header"></slot>
+            ${when(
+      this.dismissible,
+      () => html`<odx-icon-button class="dismiss-action" icon="core::close" variant="ghost" @click=${this.dismiss} autofocus></odx-icon-button>`
+    )}
           </odx-stack>
           <div class="content">
             <slot></slot>
@@ -3123,13 +3123,13 @@ __decorateClass$z([
   property({ type: Boolean, attribute: "backdrop-disabled" })
 ], OdxModal.prototype, "backdropDisabled", 2);
 __decorateClass$z([
-  property({ type: Boolean })
+  property({ type: Boolean, useDefault: true })
 ], OdxModal.prototype, "dismissible", 2);
 __decorateClass$z([
-  property({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true, useDefault: true })
 ], OdxModal.prototype, "open", 2);
 __decorateClass$z([
-  property({ reflect: true })
+  property({ reflect: true, useDefault: true })
 ], OdxModal.prototype, "layout", 2);
 OdxModal = __decorateClass$z([
   customElement("odx-modal", [styles$x])
@@ -3366,7 +3366,7 @@ OdxPagination = __decorateClass$u([
   customElement("odx-pagination", [styles$s])
 ], OdxPagination);
 
-const styles$r = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0;display:flex;flex-wrap:wrap;gap:var(--odx-size-50);align-items:center;padding-block:var(--odx-size-25);padding-inline:var(--odx-size-75);line-height:1rem;color:var(--_color-foreground)}.base,.indicator{inline-size:100%}.base{position:relative;border-radius:var(--odx-border-radius-md);background:var(--_track-color);block-size:var(--_track-size);inline-size:100%;overflow:hidden}.indicator{transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0 center;transform-origin:0% 50%;transition:var(--odx-transition-reduced);transition-property:background-color,transform;background-color:var(--_indicator-color);block-size:100%}[part=label]{flex:1;margin-block:calc(-1 * var(--odx-size-25));padding-block:var(--odx-size-25);text-align:start}[part=value]{align-self:flex-end;margin-inline-start:auto;text-align:end}:host([condensed]){flex-wrap:nowrap;padding-block:0;[part=label]{flex:1 1 auto}[part=value]{order:99}}:host([state=\"confirm\"]){--_indicator-color: var(--odx-color-background-confirmation-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: var(--odx-color-background-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"success\"]){--_indicator-color: var(--odx-color-background-success-rest)}:host([indeterminate]) .indicator{animation:indeterminate 1.5s linear infinite}@keyframes indeterminate{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}";
+const styles$r = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0;display:flex;flex-wrap:wrap;gap:var(--odx-size-50);align-items:center;padding-block:var(--odx-size-25);padding-inline:var(--odx-size-75);line-height:1rem;color:var(--_color-foreground)}.base,.indicator{inline-size:100%}.base{position:relative;border-radius:var(--odx-border-radius-md);background:var(--_track-color);block-size:var(--_track-size);inline-size:100%;overflow:hidden}.indicator{transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0 center;transform-origin:0% 50%;transition:var(--odx-transition-reduced);transition-property:background-color,transform;background-color:var(--_indicator-color);block-size:100%}[part=label]{flex:1;margin-block:calc(-1 * var(--odx-size-25));padding-block:var(--odx-size-25);text-align:start}[part=value]{align-self:flex-end;margin-inline-start:auto;text-align:end}:host([condensed]){flex-wrap:nowrap;padding-block:0;[part=label]{flex:1 1 auto}[part=value]{order:99}}:host([state=\"confirm\"]){--_indicator-color: var(--odx-color-background-confirmation-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-danger-rest);--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"success\"]){--_indicator-color: var(--odx-color-background-success-rest)}:host([indeterminate]) .indicator{animation:indeterminate 1.5s linear infinite}@keyframes indeterminate{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}";
 
 var __defProp$t = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;

package/dist/types/components/modal/modal.d.ts

@@ -19,9 +19,9 @@ export declare class OdxModal extends CustomElement {
     private dialog;
     private modalContainer;
     backdropDisabled?: boolean;
-    dismissible?: boolean;
+    dismissible: boolean;
     open: boolean;
-    layout?: ModalLayout;
+    layout: ModalLayout;
     constructor();
     connectedCallback(): void;
     canShow?: ModalGuardFn;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.52",
+  "version": "1.0.0-beta.53",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",