@odx/foundation 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/assets/fonts.css

@@ -2,19 +2,19 @@
   font-family: "Draeger Pangea Text";
   font-style: normal;
   font-weight: 400;
-  src: url("./assets/draeger-pangea-text-regular.woff2") format("woff2");
+  src: url("./draeger-pangea-text-regular.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "Draeger Pangea Text";
   font-style: normal;
   font-weight: 500;
-  src: url("./assets/draeger-pangea-text-medium.woff2") format("woff2");
+  src: url("./draeger-pangea-text-medium.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "Draeger Pangea Text";
   font-style: normal;
   font-weight: 600;
-  src: url("./assets/draeger-pangea-text-semibold.woff2") format("woff2");
+  src: url("./draeger-pangea-text-semibold.woff2") format("woff2");
 }

package/dist/components/icon-button/icon-button.component.js

@@ -1,7 +1,6 @@
 import { optionalAttr, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
 import { OdxButtonComponent } from '../button/button.component.js';
 
 var __defProp = Object.defineProperty;
@@ -18,7 +17,6 @@ let OdxIconButtonComponent = class extends OdxButtonComponent {
   renderContent() {
     return html`
       <odx-icon name=${optionalAttr(this.icon)}></odx-icon>
-      ${when(this.loading, () => html`<odx-loading-spinner class="spinner"></odx-loading-spinner>`)}
       <odx-visually-hidden>
         <slot></slot>
       </odx-visually-hidden>

package/dist/components/loading-overlay/loading-overlay.component.js

@@ -1,4 +1,4 @@
-import { WithLoadingState, CustomElement, waitForAnimations, emptySlotFallbackFix, customElement } from '@odx/foundation';
+import { WithLoadingState, CustomElement, waitForAnimations, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
 import styles from './loading-overlay.component.css.js';
@@ -48,9 +48,7 @@ let OdxLoadingOverlayComponent = class extends WithLoadingState(CustomElement) {
     return html`
       <div part="overlay">
         <div class="content">
-          <slot ${emptySlotFallbackFix()}>
-            <odx-loading-spinner></odx-loading-spinner>
-          </slot>
+          <odx-loading-spinner></odx-loading-spinner>
         </div>
       </div>
     `;

package/dist/components/separator/separator.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--color: var(--odx-color-separator);--size: var(--odx-size-px);--inline-space: var(--odx-size-12);--block-space: var(--odx-size-25);display:block;block-size:var(--size);background-color:var(--color);margin-block:calc(var(--block-space) - .5 * var(--size));margin-inline:var(--inline-space);pointer-events:none;user-select:none}:host([vertical]:not([vertical=\"false\"])){min-block-size:var(--odx-size-100);block-size:calc(100% - var(--block-space) * 2);inline-size:var(--size);margin-block:var(--block-space);margin-inline:calc(var(--inline-space) - .5 * var(--size))}:host([highlight]:not([highlight=\"false\"])){--color: var(--odx-color-separator-strong)}";
+const styles = "@layer base{:host{--color: var(--odx-color-separator);--size: var(--odx-size-px);--min-size: var(--odx-size-75);--inline-space: var(--odx-size-12);--block-space: var(--odx-size-75);display:block;margin-block:calc(var(--block-space) - .5 * var(--size));margin-inline:var(--inline-space)}.base{display:flex;align-items:center;column-gap:var(--odx-size-37);&:before,&:after{content:\"\";display:block;flex:1 1 auto;block-size:var(--size);background-color:var(--color);pointer-events:none}}}@layer variants{:host([vertical]){margin-block:var(--block-space);margin-inline:calc(var(--inline-space) - .5 * var(--size));.base{flex-direction:column;&:after,&:before{min-block-size:calc(var(--min-size) / 2);block-size:calc(100% - var(--block-space) * 2);inline-size:var(--size)}}}:host(:not([vertical])){.base{&:after,&:before{min-inline-size:calc(var(--min-size) / 2)}}}:host([highlight]){--color: var(--odx-color-separator-strong)}:host([align=\"start\"]){.base:before{flex:0 0 var(--min-size)}}:host([align=\"end\"]){.base:after{flex:0 0 var(--min-size)}}:host([empty-slot]) .base{gap:0}}";
 
 export { styles as default };

package/dist/components/separator/separator.component.d.ts

@@ -1,12 +1,16 @@
 import { CustomElement } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+import { SeparatorAlign } from './separator.models';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-separator': OdxSeparatorComponent;
     }
 }
 export declare class OdxSeparatorComponent extends CustomElement {
+    align?: SeparatorAlign;
     highlight: boolean;
     vertical: boolean;
     connectedCallback(): void;
+    protected render(): TemplateResult;
 }
 //# sourceMappingURL=separator.component.d.ts.map

package/dist/components/separator/separator.component.js

@@ -1,4 +1,5 @@
-import { CustomElement, customElement } from '@odx/foundation';
+import { CustomElement, emptySlotFallbackFix, customElement } from '@odx/foundation';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './separator.component.css.js';
 
@@ -22,7 +23,19 @@ let OdxSeparatorComponent = class extends CustomElement {
     super.connectedCallback();
     this.role = "separator";
   }
+  render() {
+    return html`
+      <div class="base">
+        <div class="content">
+          <slot ${emptySlotFallbackFix()} @slotchange=${() => this.requestUpdate()}></slot>
+        </div>
+      </div>
+    `;
+  }
 };
+__decorateClass([
+  property({ reflect: true })
+], OdxSeparatorComponent.prototype, "align", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], OdxSeparatorComponent.prototype, "highlight", 2);

package/dist/components/separator/separator.models.d.ts

@@ -0,0 +1,6 @@
+export type SeparatorAlign = (typeof SeparatorAlign)[keyof typeof SeparatorAlign];
+export declare const SeparatorAlign: {
+    readonly START: "start";
+    readonly END: "end";
+};
+//# sourceMappingURL=separator.models.d.ts.map

package/dist/lib/directives/slot-fallback.js

@@ -1,12 +1,12 @@
 import { directive, Directive } from 'lit/directive.js';
+import { toggleAttribute } from '../utils/dom.js';
 
 class SlotFallbackDirective extends Directive {
   update({ options, element }) {
-    if (!options?.host || !(element instanceof HTMLSlotElement)) return;
-    const host = options.host;
-    const slottedElementSelector = element.name ? `[slot="${element.name}"]` : "*";
-    if (host.querySelectorAll(slottedElementSelector).length > 0 || host.textContent?.trim()) return;
-    host.textContent = "";
+    const host = options?.host;
+    if (!host || !(element instanceof HTMLSlotElement)) return;
+    const attributeName = ["empty-slot", element.name].filter(Boolean).join("-");
+    toggleAttribute(host, attributeName, !host.textContent?.trim() && element.assignedElements().length === 0);
   }
   render() {
   }

package/package.json

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

package/public/assets/fonts.css

@@ -2,19 +2,19 @@
   font-family: "Draeger Pangea Text";
   font-style: normal;
   font-weight: 400;
-  src: url("./assets/draeger-pangea-text-regular.woff2") format("woff2");
+  src: url("./draeger-pangea-text-regular.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "Draeger Pangea Text";
   font-style: normal;
   font-weight: 500;
-  src: url("./assets/draeger-pangea-text-medium.woff2") format("woff2");
+  src: url("./draeger-pangea-text-medium.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "Draeger Pangea Text";
   font-style: normal;
   font-weight: 600;
-  src: url("./assets/draeger-pangea-text-semibold.woff2") format("woff2");
+  src: url("./draeger-pangea-text-semibold.woff2") format("woff2");
 }