Width changes

MrEssex · MrEssex · commit b74e347bc278 · 2025-03-25T18:04:05.000Z
diff --git a/docs/pages/components/action-item.md b/docs/pages/components/action-item.md
@@ -6,7 +6,7 @@ layout: component
 ---
 
 ```html:preview
-<zn-action-item></zn-action-item>
+<zn-action-item caption="Caption" description="Description" uri="#"></zn-action-item>
 ```
 
 ## Examples
diff --git a/docs/pages/components/item.md b/docs/pages/components/item.md
@@ -1,25 +1,25 @@
 ---
 meta:
-  title: Description Item
+  title: Item
   description:
 layout: component
 ---
 
 ```html:preview
 <zn-sp divide no-gap>
-  <zn-description-item caption="Full name">
+  <zn-item caption="Full name">
     <zn-inline-edit name="name" value="Margot Foster"></zn-inline-edit>
-  </zn-description-item>
-  <zn-description-item caption="Full name">
+  </zn-item>
+  <zn-item caption="Full name">
     Margot Foster
-  </zn-description-item>
-  <zn-description-item caption="Full name">
+  </zn-item>
+  <zn-item caption="Full name">
     margot.foster@example.com
-  </zn-description-item>
-  <zn-description-item caption="Full name">
+  </zn-item>
+  <zn-item caption="Full name">
     lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </zn-description-item>
+  </zn-item>
 </zn-sp>
 ```
 
@@ -28,10 +28,10 @@ layout: component
 ### Lots of Content
 
 ```html:preview
-<zn-description-item caption="Full name">
+<zn-item caption="Full name">
   lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna 
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</zn-description-item>
+</zn-item>
 ```
 
 ### Multiple Actions
@@ -40,7 +40,7 @@ Example of multiple actions in a description item.
 
 ```html:preview
 
-<zn-description-item caption="Address">
+<zn-item caption="Address">
   <p><strong>Company</strong> Example here </p>
   <p><strong>Line 1</strong> Example here </p>
   <p><strong>Line 2</strong> Example here </p>
@@ -53,6 +53,6 @@ Example of multiple actions in a description item.
   <zn-button id="address-modal" slot="actions" size="x-small" color="secondary" modal>Edit</zn-button>
   <zn-button id="address-modal" slot="actions" size="x-small" color="secondary" modal>Edit</zn-button>
   
-</zn-description-item>
+</zn-item>
 ```
 
diff --git a/docs/pages/getting-started/example-layout.md b/docs/pages/getting-started/example-layout.md
@@ -21,21 +21,21 @@ component you are using already includes padding or margin it will not be double
     <zn-cols layout="1,1">
       <zn-panel caption="Some Panel" description="Hello World">
         <zn-sp divide no-gap>
-          <zn-description-item label="Full name">
+          <zn-item label="Full name">
             <zn-inline-edit name="name" value="Margot Foster"></zn-inline-edit>
-          </zn-description-item>
-          <zn-description-item label="Full name">
+          </zn-item>
+          <zn-item label="Full name">
             Something
             <zn-button icon="add" color="secondary" size="x-small" slot="actions" icon-size="20"></zn-button>
-          </zn-description-item>
-          <zn-description-item label="Full name">
+          </zn-item>
+          <zn-item label="Full name">
             Something
             <zn-button color="transparent" size="x-small" slot="actions">Update</zn-button>
-          </zn-description-item>
-          <zn-description-item label="Selet Option">
+          </zn-item>
+          <zn-item label="Selet Option">
             <zn-inline-edit name="name" value="1"
                             options="{&quot;1&quot;: &quot;Option 1&quot;,&quot;2&quot;: &quot;Option 2&quot;}"></zn-inline-edit>
-          </zn-description-item>
+          </zn-item>
         </zn-sp>
       </zn-panel>
 
diff --git a/scss/themes/_light.scss b/scss/themes/_light.scss
@@ -351,6 +351,7 @@
   --zn-spacing-lside: 460px; // Not sure what this is @mressex figure it out.
 
   /** Container Sizes */
+  --zn-container: var(--zn-container-hd);
   --zn-container-default: 100%;
   --zn-container-sm: 360px;
   --zn-container-smp: 480px;
diff --git a/src/components/description-item/index.ts b/src/components/description-item/index.ts
diff --git a/src/components/header/header.scss b/src/components/header/header.scss
@@ -20,6 +20,7 @@
     font-size: var(--zn-font-size-medium);
     color: rgba(var(--zn-text-panel-title), 100%);
     margin: 0;
+    line-height: 35px;
   }
 
   &--has-breadcrumb {
diff --git a/src/components/inline-edit/inline-edit.component.ts b/src/components/inline-edit/inline-edit.component.ts
@@ -34,13 +34,10 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     defaultValue: (control: ZnInlineEdit) => control.defaultValue,
   });
 
-
   @property({reflect: true}) value: string;
 
   @property() name: string;
 
-  @property() caption: string;
-
   @property({attribute: 'edit-text'}) editText: string;
 
   @property({type: Boolean}) disabled: boolean
@@ -167,7 +164,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         </zn-select>`;
     }
 
-    const inlineEdit = html`
+    return html`
       <div class="${classMap({
         'ai': true,
         'ai--editing': this.isEditing,
@@ -197,15 +194,5 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                          color="secondary"></zn-button>`}
         </div>
       </div>`;
-
-
-    if (this.caption) {
-      return html`
-        <zn-description-item caption="${this.caption}">
-          ${inlineEdit}
-        </zn-description-item>`;
-    }
-
-    return inlineEdit;
   }
 }
diff --git a/src/components/item/index.ts b/src/components/item/index.ts
@@ -0,0 +1,12 @@
+import ZnItem from './item.component';
+
+export * from './item.component';
+export default ZnItem;
+
+ZnItem.define('zn-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-item': ZnItem;
+  }
+}
diff --git a/src/components/item/item.component.ts b/src/components/item/item.component.ts
@@ -3,7 +3,7 @@ import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {LocalizeController} from '../../utilities/localize';
 import ZincElement from '../../internal/zinc-element';
 
-import styles from './description-item.scss';
+import styles from './item.scss';
 import {classMap} from "lit/directives/class-map.js";
 
 /**
@@ -23,7 +23,7 @@ import {classMap} from "lit/directives/class-map.js";
  *
  * @cssproperty --example - An example CSS custom property.
  */
-export default class ZnDescriptionItem extends ZincElement {
+export default class ZnItem extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
   // @ts-expect-error unused property
diff --git a/src/components/item/item.scss b/src/components/item/item.scss
@@ -4,7 +4,7 @@
   display: block;
   container-type: inline-size;
 
-  --zn-description-item-label-max-width: 300px;
+  --zn-item-label-max-width: 300px;
 }
 
 .description-item {
@@ -13,11 +13,11 @@
   padding: var(--zn-spacing-large);
 
   @include wc.container-query(null, md) {
-    --zn-description-item-label-max-width: 200px;
+    --zn-item-label-max-width: 200px;
   }
 
   @include wc.container-query(null, smp) {
-    --zn-description-item-label-max-width: 150px;
+    --zn-item-label-max-width: 150px;
   }
 
   @include wc.container-query(null, sm) {
@@ -43,7 +43,7 @@
     font-weight: 500;
     color: rgb(var(--zn-text-heading));
     line-height: 33px;
-    max-width: var(--zn-description-item-label-max-width);
+    max-width: var(--zn-item-label-max-width);
     width: 100%;
     flex-shrink: 0;
   }
diff --git a/src/components/item/item.test.ts b/src/components/item/item.test.ts
@@ -1,9 +1,9 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
 
-describe('<zn-description-item>', () => {
+describe('<zn-item>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-description-item></zn-description-item> `);
+    const el = await fixture(html` <zn-item></zn-item> `);
 
     expect(el).to.exist;
   });
diff --git a/src/components/navbar/navbar.component.ts b/src/components/navbar/navbar.component.ts
@@ -87,7 +87,7 @@ export default class ZnNavbar extends ZincElement {
     }
 
     return html`
-      <ul>
+      <ul class="width-container">
         ${this._preItems}
         ${this.navigation.map((item: any) => {
           let content = html`${item.title}`;
diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss
@@ -24,17 +24,11 @@ ul {
   }
 }
 
-
-ul {
-  margin: 0;
-}
-
 :host([stacked]) {
   width: unset;
   height: 100%;
 
   ul {
-    margin: 0;
     padding: 0;
     flex-direction: column;
     gap: 0;
@@ -111,14 +105,12 @@ ul {
 
 :host {
   display: block;
-  overflow: auto;
   width: 100%;
 
   ul {
     display: flex;
     flex-basis: 100%;
     gap: 30px;
-    margin: 0;
     list-style: none;
     border-bottom: 1px solid rgb(var(--zn-border-color));
 
@@ -129,7 +121,7 @@ ul {
 
       user-select: none;
       font-weight: 500;
-      padding: 0 0 var(--zn-spacing-x-small) ;
+      padding: 0 0 var(--zn-spacing-small);
       position: relative;
 
       display: flex;
@@ -222,6 +214,12 @@ button[popovertarget] {
 }
 
 :host([highlight]) {
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+
+  &:host([dropdown]) li {
+    border-bottom: 0;
+  }
+
   ul {
     gap: 0;
     overflow: initial;
@@ -230,12 +228,8 @@ button[popovertarget] {
   li {
     padding-left: var(--zn-spacing-medium);
     padding-right: var(--zn-spacing-medium);
-
-    &:first-of-type {
-      &.active {
-        border-left: none;
-      }
-    }
+    padding-top: var(--zn-spacing-small);
+    position: relative;
 
     &:hover::before,
     &::before:not(.active):not(#dropdown-item) {
@@ -246,10 +240,13 @@ button[popovertarget] {
       border-left: 1px solid rgb(var(--zn-border-color));
       border-right: 1px solid rgb(var(--zn-border-color));
 
-      &:before {
+      &::after {
+        content: '';
+        position: absolute;
         left: 0;
         right: 0;
-        bottom: -2px;
+        bottom: -1px;
+        height: 1px;
         background-color: rgb(var(--zn-panel));
       }
     }
@@ -268,7 +265,14 @@ button[popovertarget] {
   li {
     border-bottom: 1px solid rgb(var(--zn-border-color));
     border-right: 1px solid rgb(var(--zn-border-color));
-    border-left: 0 !important;
+    border-right: 1px solid rgb(var(--zn-border-color));
+    border-left: 0;
+
+    @include wc.container-query(hd) {
+      &:first-of-type {
+        border-left: 1px solid rgb(var(--zn-border-color));
+      }
+    }
 
     &.active {
       border-bottom: 0;
diff --git a/src/components/panel/panel.scss b/src/components/panel/panel.scss
@@ -27,7 +27,7 @@
   background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
 
   &__header {
-    padding: var(--zn-spacing-medium);
+    padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
 
     &::part(base) {
       border-bottom: 0;
diff --git a/src/components/sidebar/sidebar.scss b/src/components/sidebar/sidebar.scss
@@ -272,6 +272,10 @@
       border-left-width: 1px;
     }
 
+    @include wc.container-query(hd) {
+      border-right-width: 1px;
+    }
+
     @include wc.container-query(ph, lg) {
       #content {
         padding-left: 0;
diff --git a/src/components/tabs/tabs.component.ts b/src/components/tabs/tabs.component.ts
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
diff --git a/src/wc.scss b/src/wc.scss
diff --git a/src/zinc.ts b/src/zinc.ts

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@`
`20`	`20`	`font-size: var(--zn-font-size-medium);`
`21`	`21`	`color: rgba(var(--zn-text-panel-title), 100%);`
`22`	`22`	`margin: 0;`
	`23`	`+ line-height: 35px;`
`23`	`24`	`}`
`24`	`25`
`25`	`26`	`&--has-breadcrumb {`