systemlink-cli 1.5.1__tar.gz → 1.5.2__tar.gz

{systemlink_cli-1.5.1 → systemlink_cli-1.5.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: systemlink-cli
-Version: 1.5.1
+Version: 1.5.2
 Summary: SystemLink Integrator CLI - cross-platform CLI for SystemLink workflows and templates.
 License-File: LICENSE
 Author: Fred Visser

{systemlink_cli-1.5.1 → systemlink_cli-1.5.2}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "systemlink-cli"
-version = "1.5.1"
+version = "1.5.2"
 description = "SystemLink Integrator CLI - cross-platform CLI for SystemLink workflows and templates."
 authors = ["Fred Visser <fred.visser@emerson.com>"]
 packages = [{ include = "slcli" }]

{systemlink_cli-1.5.1 → systemlink_cli-1.5.2}/slcli/_version.py

@@ -1,4 +1,4 @@
 """Version information for slcli."""
 
 # This file is auto-generated. Do not edit manually.
-__version__ = "1.5.1"
+__version__ = "1.5.2"

{systemlink_cli-1.5.1 → systemlink_cli-1.5.2}/slcli/skills/systemlink-webapp/SKILL.md

@@ -80,6 +80,9 @@ Use Nimble layout tokens and spacing rules consistently across the shell and fea
   aligned multi-column layouts.
 - Inside accordion panels, keep a column layout with `mediumPadding` gaps and
   `standardPadding` bottom padding.
+- In dense side panels with tabs, use `15px 30px 30px 15px` on the tab container,
+  `20px 0 0 15px` on the active tab panel, let the panel own scrolling, and avoid forcing nested
+  content blocks to `height: 100%`.
 - Treat `controlHeight` (32px), `controlSlimHeight` (24px), and `labelHeight` (16px) as the
   baseline sizing tokens for controls and labels.
 - Separate major sections with `largePadding` and subsections with `standardPadding`.
@@ -380,6 +383,36 @@ If you want compile-time token values in SCSS, you can also import Nimble's toke
 }
 ```
 
+### Tabs in dense side panels
+
+When placing Nimble tabs inside a dense side panel or details pane, use the tab wrapper and panel
+as the layout primitives instead of forcing inner content blocks to fill the available height.
+
+```scss
+.details-tabs {
+  padding: 15px 30px 30px 15px;
+}
+
+.details-tab-panel {
+  padding: 20px 0 0 15px;
+  overflow: auto;
+}
+
+.details-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ni-nimble-medium-padding, 8px);
+}
+```
+
+- Use `padding: 15px 30px 30px 15px` on the tab control container.
+- Use `padding: 20px 0 0 15px` on the active tab panel content region.
+- Let the tab panel container handle scrolling.
+- Do not force nested form blocks or content stacks to `height: 100%`; that tends to stretch the
+  layout and creates inconsistent vertical spacing between controls.
+- Inside the active tab panel, keep stacked controls on an `8px` gap via
+  `var(--ni-nimble-medium-padding, 8px)` unless a tighter layout is explicitly needed.
+
 ### Why this pattern?
 
 1. **Themability** — All colors flow through Nimble's theme-aware tokens. If Nimble changes color ramps or adds dark mode, your app automatically inherits it.

{systemlink_cli-1.5.1 → systemlink_cli-1.5.2}/slcli/skills/systemlink-webapp/references/layout-patterns.md

@@ -63,9 +63,36 @@ Inside accordion item content panels:
 - Indent content by the icon width plus padding so it aligns with the header text.
 - Use `standardPadding` (16px) for bottom padding before the next section.
 
+## Tabs in side panels
+
+When using tabs inside a dense side panel or details pane:
+
+- Use `padding: 15px 30px 30px 15px` on the tab control container.
+- Use `padding: 20px 0 0 15px` on the active tab panel content region.
+- Let the tab panel container own scrolling.
+- Avoid forcing nested form or content blocks to `height: 100%`; it tends to distort vertical
+  spacing between controls.
+- Inside the active tab panel, keep stacked controls on a `mediumPadding` (8px) gap unless a
+  tighter layout is explicitly needed.
+
+```html
+<div style="padding: 15px 30px 30px 15px;">
+  <nimble-tabs>
+    <nimble-tab id="details">Details</nimble-tab>
+    <nimble-tab id="settings">Settings</nimble-tab>
+  </nimble-tabs>
+  <div
+    style="padding: 20px 0 0 15px; overflow: auto; display: flex; flex-direction: column; gap: var(--ni-nimble-medium-padding);"
+  >
+    <nimble-text-field>Label 1</nimble-text-field>
+    <nimble-text-field>Label 2</nimble-text-field>
+  </div>
+</div>
+```
+
 ## Section spacing
 
 Between major sections or groups of controls:
 
 - Use `largePadding` (24px) between distinct content areas.
-- Use `standardPadding` (16px) for subsections within a group.
+- Use `standardPadding` (16px) for subsections within a group.