@kubex/zinc 1.0.3 → 1.0.5

package/src/components/data-table/data-table.scss

@@ -150,7 +150,7 @@ table {
     }
 
     &--last div {
-      justify-content: flex-end;
+      flex-direction: row-reverse !important;
     }
 
     &--left div {
@@ -193,6 +193,11 @@ table {
       justify-content: center;
     }
 
+    &--actions {
+      width: 25px;
+      min-width: 25px;
+    }
+
     .caption {
       flex-grow: 1;
       flex-direction: column;

package/src/components/datepicker/datepicker.scss

@@ -12,7 +12,7 @@
   justify-content: start;
   position: relative;
   width: 100%;
-  box-shadow: var(--zn-shadow-medium);
+  box-shadow: var(--zn-shadow-x-small);
   font-family: var(--zn-input-font-family), sans-serif;
   font-weight: var(--zn-input-font-weight);
   letter-spacing: var(--zn-input-letter-spacing);

package/src/components/dialog/dialog.component.ts

@@ -60,6 +60,7 @@ export default class ZnDialog extends ZincElement {
   @query('.dialog__panel') panel: HTMLElement;
   @query('.dialog__overlay') overlay: HTMLElement;
 
+
   /** The dialog's theme variant. */
   @property({reflect: true}) variant: 'default' | 'warning' | 'announcement' = 'default';
 
@@ -78,6 +79,8 @@ export default class ZnDialog extends ZincElement {
    */
   @property({reflect: true}) label: string;
 
+  @property({type: Boolean, reflect: true}) cosmic = false;
+
   /**
    * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
    * accessible way to close the dialog.
@@ -109,6 +112,18 @@ export default class ZnDialog extends ZincElement {
         trigger.addEventListener('click', () => this.show());
       }
     }
+    if (window.CSS.registerProperty) {
+      try {
+        window.CSS.registerProperty({
+          inherits: false,
+          initialValue: '0deg',
+          name: '--rotate',
+          syntax: '<angle>',
+        });
+      } catch (e) {
+        // do nothing
+      }
+    }
   }
 
   disconnectedCallback() {
@@ -181,7 +196,6 @@ export default class ZnDialog extends ZincElement {
         part="base"
         role="alertdialog"
         aria-modal="true"
-        aria-hidden=${this.open ? 'false' : 'true'}
         aria-label=${ifDefined(this.noHeader ? this.label : undefined)}
         aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}
         tabindex="-1"
@@ -195,42 +209,47 @@ export default class ZnDialog extends ZincElement {
           'dialog--announcement': this.variant === 'announcement',
           'dialog--small': this.size === 'small',
           'dialog--medium': this.size === 'medium',
-          'dialog--large': this.size === 'large'
+          'dialog--large': this.size === 'large',
+          'dialog--cosmic': this.cosmic
         })}>
 
-        ${!this.noHeader ? html`
-          <header part="header" class="dialog__header">
-            <h2 part="title" class="dialog__title" id="title">
-              <slot name="header-icon"></slot>
-              <slot name="announcement-intro"></slot>
-              <slot name="label"> ${this.label && this.label.length > 0 ? this.label : String.fromCharCode(65279)}
-              </slot>
-            </h2>
-            <div part="header-actions" class="dialog__header-actions">
-              <slot name="header-actions"></slot>
-              <zn-button
-                part="close-button"
-                exportparts="base:close-button__base"
-                class="dialog__close"
-                icon="close"
-                icon-size="24"
-                type="button"
-                color="transparent"
-                size="content"
-                @click="${() => this.requestClose('close-button')}"
-              ></zn-button>
-            </div>
-          </header>` : ''}
-
-        <div part="body" class="dialog__body" tabindex="-1">
-          <slot></slot>
-        </div>
+        <div class=${classMap({
+          'dialog-container': true,
+        })}>
 
-        <footer part="footer" class="dialog__footer">
-          <slot name="footer"></slot>
-          <slot name="footer-text"></slot>
-        </footer>
+          ${!this.noHeader ? html`
+            <header part="header" class="dialog__header">
+              <h2 part="title" class="dialog__title" id="title">
+                <slot name="header-icon"></slot>
+                <slot name="announcement-intro"></slot>
+                <slot name="label"> ${this.label && this.label.length > 0 ? this.label : String.fromCharCode(65279)}
+                </slot>
+              </h2>
+              <div part="header-actions" class="dialog__header-actions">
+                <slot name="header-actions"></slot>
+                <zn-button
+                  part="close-button"
+                  exportparts="base:close-button__base"
+                  class="dialog__close"
+                  icon="close"
+                  icon-size="24"
+                  type="button"
+                  color="transparent"
+                  size="content"
+                  @click="${() => this.requestClose('close-button')}"
+                ></zn-button>
+              </div>
+            </header>` : ''}
 
+          <div part="body" class="dialog__body" tabindex="-1">
+            <slot></slot>
+          </div>
+
+          <footer part="footer" class="dialog__footer">
+            <slot name="footer"></slot>
+            <slot name="footer-text"></slot>
+          </footer>
+        </div>
       </dialog>
     `;
   }

package/src/components/dialog/dialog.scss

@@ -12,10 +12,18 @@
   display: contents;
 }
 
+.dialog-container {
+  border-radius: var(--zn-border-radius-x-large);
+  background-color: var(--zn-panel-background-color);
+  margin: 2px;
+  overflow: auto;
+}
+
 .dialog {
   flex-direction: column;
   z-index: 2;
-  width: var(--width);
+  width: calc(var(--width) + 1px);
+  overflow: hidden;
   max-width: calc(100% - var(--zn-spacing-2x-large));
   max-height: calc(100% - var(--zn-spacing-2x-large));
   background-color: var(--zn-panel-background-color);
@@ -194,4 +202,10 @@
   &:not(.dialog--has-footer) &__footer {
     display: none;
   }
+
+  &--cosmic {
+    @include wc.cosmic-border();
+    position: relative;
+    border: none !important;
+  }
 }

package/src/components/dropdown/dropdown.component.ts

@@ -370,7 +370,7 @@ export default class ZnDropdown extends ZincElement {
           @focus=${this.handlePreload}
         ></slot>
 
-        <div aria-hidden=${this.open ? 'false' : 'true'} aria-labelledby="dropdown">
+        <div aria-hidden=${this.open ? 'false' : 'true'} ?inert=${!this.open} aria-labelledby="dropdown">
           ${this.fetchedContent ? unsafeHTML(this.fetchedContent) : ''}
           <slot part="panel" class="dropdown__panel"></slot>
         </div>