@kubex/zinc 1.0.119 → 1.1.0

package/src/components/tile/tile.scss

@@ -1,21 +1,34 @@
 @use "../../wc";
 
+:host {
+  display: block;
+}
+
 .tile {
   position: relative;
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  min-height: 48px;
+  column-gap: var(--zn-spacing-large);
+
+  font-size: var(--zn-text-table-content-font-size);
+  line-height: var(--zn-text-table-content-line-height);
+  font-weight: var(--zn-text-table-content-font-weight);
+  color: var(--zn-text-table-content-color);
 
   &--has-image,
-  &--has-text,
   &--has-caption,
   &--has-description,
   &--has-properties,
-  &--has-actions,
+  &--has-actions {
+    padding-inline: var(--zn-base-gap);
+  }
+
   &--has-image {
     padding: var(--zn-base-gap);
   }
 
-
   &--has-href {
     cursor: pointer;
 
@@ -37,108 +50,136 @@
   }
 }
 
+a {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
 ::slotted(zn-icon) {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.tile__left {
+.tile__link {
   display: flex;
   align-items: center;
-  column-gap: var(--zn-spacing-medium);
-  padding-right: var(--zn-spacing-medium);
-  width: 100%;
-  max-width: 400px;
+  column-gap: var(--zn-spacing-small);
+  min-width: 0;
+}
 
-  @include wc.container-query(null, md) {
-    max-width: 320px;
-  }
+.tile__left {
+  display: flex;
+  align-items: center;
+  column-gap: var(--zn-spacing-small);
+  min-width: 0;
 }
 
-.tile__right {
+.tile__image {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  width: 50%;
-  flex-grow: 1;
-  column-gap: var(--zn-spacing-medium);
+  flex-shrink: 0;
 }
 
-.tile__properties {
+.tile__content {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.tile--inline .tile__content {
   flex-direction: row;
-  column-gap: 30px;
-  overflow: auto;
+  align-items: center;
+  column-gap: var(--zn-spacing-x-small);
+}
 
-  @include wc.container-query(null, md) {
-    display: none;
-  }
+.tile__caption {
+  margin: 0;
+  font-weight: 600;
+  color: rgb(var(--zn-text-heading));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
+.tile--plain .tile__caption {
+  font-weight: var(--zn-text-table-content-font-weight);
+  color: var(--zn-text-table-content-color);
 }
 
-.tile__content {
-  flex: auto;
-  min-width: 0;
+.tile__description {
+  margin: var(--zn-spacing-3x-small) 0 0;
+  font-weight: var(--zn-text-table-content-font-weight);
+  color: var(--zn-text-table-content-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  @extend %property;
+.tile--inline .tile__description {
+  margin: 0;
 }
 
-.tile--inline .tile__content {
+.tile__right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  column-gap: var(--zn-spacing-large);
+  min-width: 0;
+}
+
+.tile__properties {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 5px;
+  column-gap: var(--zn-spacing-large);
+  min-width: 0;
+  overflow: hidden;
 
-  .tile__description {
-    margin: 0;
+  ::slotted(*) {
+    white-space: nowrap;
+  }
+
+  @include wc.container-query(null, sm) {
+    display: none;
   }
 }
 
 .tile__actions {
   display: flex;
+  align-items: center;
   column-gap: var(--zn-spacing-small);
-  margin-left: auto;
+  flex-shrink: 0;
 }
 
-.tile__link {
-  width: 100%;
-}
-
-%property {
-  .tile__caption {
-    display: block;
-    font-weight: 500;
-    margin: 0;
-    font-size: 14px;
-    color: rgb(var(--zn-text-heading));
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
+:host([grouped]) {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: center;
+}
 
-  .tile__description {
-    display: block;
-    font-weight: 400;
-    margin: var(--zn-spacing-2x-small) 0 0;
-    font-size: var(--zn-font-size-medium);
-    color: rgb(var(--zn-text-color));
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
+:host([grouped]) .tile {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: center;
+  justify-items: end;
+  min-height: 48px;
 }
 
-// Tile property
-.tile__property {
-  display: flex;
-  flex-direction: column;
-  max-width: 150px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+:host([grouped]) .tile__link,
+:host([grouped]) .tile__right,
+:host([grouped]) .tile__properties,
+:host([grouped]) .tile__actions {
+  display: contents;
+}
 
-  @extend %property;
+:host([grouped]) .tile__left {
+  grid-column: 1;
+  justify-self: stretch;
+  min-width: 0;
+  overflow: hidden;
 }

package/src/components/tile-group/index.ts

@@ -0,0 +1,12 @@
+import ZnTileGroup from './tile-group.component';
+
+export * from './tile-group.component';
+export default ZnTileGroup;
+
+ZnTileGroup.define('zn-tile-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-tile-group': ZnTileGroup;
+  }
+}

package/src/components/tile-group/tile-group.component.ts

@@ -0,0 +1,66 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './tile-group.scss';
+
+/**
+ * @summary Aligns a list of `zn-tile` rows into shared, content-driven columns so values
+ * and actions line up across every row, with optional dividing borders.
+ * @documentation https://zinc.style/components/tile-group
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-tile
+ *
+ * @slot - One or more `zn-tile` elements.
+ *
+ * @csspart base - The component's base wrapper (the grid container).
+ *
+ * @cssproperty --zn-tile-cols - The number of value/action columns (set automatically).
+ */
+export default class ZnTileGroup extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  /** Draws a dividing border between rows. */
+  @property({attribute: 'divide', type: Boolean, reflect: true}) divide = false;
+
+  private _mutationObserver: MutationObserver | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Re-sync when tiles (or their values/actions) are added or removed so the
+    // shared column count tracks the current content.
+    this._mutationObserver = new MutationObserver(() => this._sync());
+    this._mutationObserver.observe(this, {childList: true, subtree: true});
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._mutationObserver?.disconnect();
+    this._mutationObserver = null;
+  }
+
+  private _handleSlotChange = () => this._sync();
+
+  // Flag each child tile as grouped (so it switches to its subgrid row layout)
+  // and publish the widest row's column count as --zn-tile-cols so the grid
+  // template has enough shared tracks for every row.
+  private _sync() {
+    const tiles = Array.from(this.querySelectorAll<HTMLElement>(':scope > zn-tile'));
+    let cols = 0;
+    for (const tile of tiles) {
+      tile.setAttribute('grouped', '');
+      const count = tile.querySelectorAll(':scope > [slot="properties"], :scope > [slot="actions"]').length;
+      cols = Math.max(cols, count);
+    }
+    this.style.setProperty('--zn-tile-cols', String(Math.max(1, cols)));
+  }
+
+  protected render(): unknown {
+    return html`
+      <div part="base" class="tile-group">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>`;
+  }
+}

package/src/components/tile-group/tile-group.scss

@@ -0,0 +1,23 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.tile-group {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(min(100%, var(--zn-tile-caption-min-width, 7.5rem)), 1fr) repeat(var(--zn-tile-cols, 1), auto);
+  align-items: center;
+  column-gap: var(--zn-spacing-large);
+  row-gap: 0;
+}
+
+slot {
+  display: contents;
+}
+
+:host([divide]) ::slotted(zn-tile:not(:first-child)) {
+  border-top: 1px solid rgb(var(--zn-border-color));
+}

package/src/form-control.scss

@@ -18,7 +18,8 @@
 .form-control--has-label .form-control__label {
   display: inline-block;
   color: var(--zn-input-label-color);
-  font-weight: var(--zn-font-weight-semibold);
+  font-weight: var(--zn-input-label-font-weight);
+  line-height: var(--zn-input-label-line-height);
   margin-bottom: var(--zn-spacing-2x-small);
 }
 

package/src/wc.scss

@@ -12,6 +12,7 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-transform: none;
 
   *, *::before, *::after {
     box-sizing: border-box;

package/src/zinc.ts

@@ -7,6 +7,7 @@ export { default as Popup } from './components/popup';
 export { default as Collapsible } from './components/collapsible';
 export { default as Alert } from './components/alert';
 export { default as ButtonGroup } from './components/button-group';
+export { default as ChatMessage } from './components/chat-message';
 export { default as Chip } from './components/chip';
 export { default as Well } from './components/well';
 export { default as CopyButton } from './components/copy-button';
@@ -21,6 +22,7 @@ export { default as DefinedLabel } from './components/defined-label';
 export { default as EmptyState } from './components/empty-state';
 export { default as Note } from './components/note';
 export { default as Tile } from './components/tile';
+export { default as TileGroup } from './components/tile-group';
 export { default as TileProperty } from './components/tile-property';
 export { default as Chart } from './components/chart';
 export { default as SimpleChart } from './components/simple-chart';

package/src/components/editor/modules/toolbar/tool/tool.scss

@@ -1,5 +0,0 @@
-.tool-action {
-  width: 28px;
-  height: 28px;
-  margin: 3px 2px;
-}