@kubex/zinc 1.1.98 → 1.1.99

package/docs/pages/components/background.md

@@ -0,0 +1,143 @@
+---
+meta:
+  title: Background
+  description: Layer a colour, decorative image, image strength, motion and contrast overlay behind content.
+layout: component
+---
+
+`zn-background` builds a presentation background without making assumptions about the content laid over it. Give the element a height (or let its content establish one), then use the default slot for foreground content.
+
+```html:preview
+<zn-background
+  image="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1400&q=80"
+  color="#18382f"
+  image-strength="full"
+  motion="drift"
+  overlay="strong"
+  overlay-tone="dark"
+  floating-icons="school,lightbulb,auto_awesome,psychology,rocket_launch,public"
+  style="min-height: 24rem; border-radius: var(--zn-border-radius-large); color: white;">
+  <zn-sp style="max-width: 38rem;" xl>
+    <h2>Build a calm, legible canvas</h2>
+    <p>The image, movement and contrast treatment stay behind any slotted Zinc or HTML content.</p>
+  </zn-sp>
+</zn-background>
+```
+
+## Treatments
+
+Use `image-strength="soft|medium|full"` to set the image opacity, `motion="none|drift|breathe"` to choose its movement, and `overlay="none|soft|strong"` to control the contrast gradient. `overlay-tone="light"` places a white gradient over the image; use `dark` when light foreground content needs a dark gradient.
+
+Motion automatically stops for people who request reduced motion. Set `paused` when a background remains in the document but is not currently visible, such as an inactive slide.
+
+### Image strength
+
+```html:preview
+<zn-cols layout="1,1,1">
+  <zn-background color="#dcefeb" image="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=70" image-strength="soft" overlay="soft" style="min-height: 13rem;">
+    <zn-sp><strong>Soft image</strong></zn-sp>
+  </zn-background>
+  <zn-background color="#dcefeb" image="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=70" image-strength="medium" overlay="soft" style="min-height: 13rem;">
+    <zn-sp><strong>Medium image</strong></zn-sp>
+  </zn-background>
+  <zn-background color="#10231d" image="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=70" image-strength="full" overlay="strong" overlay-tone="dark" style="min-height: 13rem; color: white;">
+    <zn-sp><strong>Full image</strong></zn-sp>
+  </zn-background>
+</zn-cols>
+```
+
+### Motion
+
+`drift` slowly travels across the image, while `breathe` gently changes its scale. The oversized image canvas keeps the edges covered throughout both animations.
+
+```html:preview
+<zn-cols layout="1,1,1">
+  <zn-background
+    color="#18382f"
+    image="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=900&q=75"
+    motion="none"
+    overlay="strong"
+    overlay-tone="dark"
+    style="min-height: 14rem; color: white;">
+    <zn-sp><strong>No motion</strong></zn-sp>
+  </zn-background>
+  <zn-background
+    color="#18382f"
+    image="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=900&q=75"
+    motion="drift"
+    overlay="strong"
+    overlay-tone="dark"
+    style="min-height: 14rem; color: white;">
+    <zn-sp><strong>Gentle drift</strong></zn-sp>
+  </zn-background>
+  <zn-background
+    color="#18382f"
+    image="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=900&q=75"
+    motion="breathe"
+    overlay="strong"
+    overlay-tone="dark"
+    style="min-height: 14rem; color: white;">
+    <zn-sp><strong>Gentle breathe</strong></zn-sp>
+  </zn-background>
+</zn-cols>
+```
+
+### Overlay strength
+
+The overlay sits above the image and below the slotted content. Choose its strength based on how much contrast the foreground needs.
+
+```html:preview
+<zn-cols layout="1,1,1">
+  <zn-background
+    color="#dcefeb"
+    image="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=900&q=75"
+    overlay="none"
+    style="min-height: 14rem;">
+    <zn-sp><strong>No overlay</strong></zn-sp>
+  </zn-background>
+  <zn-background
+    color="#dcefeb"
+    image="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=900&q=75"
+    overlay="soft"
+    overlay-tone="light"
+    style="min-height: 14rem;">
+    <zn-sp><strong>Soft light overlay</strong></zn-sp>
+  </zn-background>
+  <zn-background
+    color="#10231d"
+    image="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=900&q=75"
+    overlay="strong"
+    overlay-tone="dark"
+    style="min-height: 14rem; color: white;">
+    <zn-sp><strong>Strong dark overlay</strong></zn-sp>
+  </zn-background>
+</zn-cols>
+```
+
+### Floating icons
+
+Pass up to eight comma-separated Zinc icon names to `floating-icons`. The icons are decorative and non-interactive. Each uses a fixed ambient anchor with its own timing and fades between 1% and no more than 50% opacity.
+
+Icon size follows the background width: 5% of the available space, capped at 150px. Floating motion stops when reduced motion is requested or when the background has `paused`.
+
+```html:preview
+<zn-background
+  color="#151b34"
+  image="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?w=1400&q=80"
+  image-strength="medium"
+  overlay="strong"
+  overlay-tone="dark"
+  floating-icons="rocket_launch,public,star,science,satellite_alt,explore,orbit,auto_awesome"
+  style="min-height: 28rem; color: white; --zn-background-floating-icon-color: #d9e2ff;">
+  <zn-sp style="max-width: 34rem;" xl>
+    <h2>Explore the next horizon</h2>
+    <p>Floating icons remain a background treatment, so the foreground content keeps normal focus and pointer behaviour.</p>
+  </zn-sp>
+</zn-background>
+```
+
+## CSS customisation
+
+Use `--zn-background-image-position` to change the image focal point, `--zn-background-overlay-angle` to turn the overlay gradient, and `--zn-background-floating-icon-color` to recolour the ambient icons. `--zn-background-color` provides a reusable fallback when the `color` attribute is omitted.
+
+The `base`, `image`, `overlay`, `floating-icons`, `floating-icon`, and `content` CSS parts are available for application-specific treatments that cannot be expressed with the attributes or custom properties.

package/docs/pages/components/checkbox-group.md

@@ -106,6 +106,18 @@ This option can be combined with the `horizontal` attribute.
 :::tip
 When [checkboxes](/components/checkbox) are wrapped with the Checkbox Group , adding the `contained` attribute to the
 parent Checkbox Group or to _any_ checkbox in the group will create `contained` checkboxes for the entire group.
+
+Contained checkboxes can also render as [multi-select cards](/components/checkbox#multi-select-cards) with an image,
+title, description, and positioned indicator. The checkbox group continues to manage validation and submits every
+selected value under the group's name.
+
+Contained checkboxes are rounded by default; add `square` to the group to square off every checkbox in it. With
+`horizontal`, cards in a row are given equal height, and `--zn-checkbox-group-column-width` (default `152px`) sets the
+minimum column width used by the grid.
+
+Add `wrap` to lay the checkboxes out as a wrapping row instead of an equal-width grid: each card starts from
+`--zn-checkbox-group-column-width` and grows to fill its line, and setting that property to `auto` sizes every card from
+its own content.
 :::
 
 ### Disabling Options
@@ -193,4 +205,4 @@ make the browser display the error message you provide. To clear the error, call
     });
   });
 </script>
-```
+```

package/docs/pages/components/checkbox.md

@@ -188,6 +188,64 @@ Add the `contained` attribute to draw a card-like container around a checkbox. T
 When checkboxes are wrapped with [Checkbox Group](/components/checkbox-group), adding the `contained` attribute to the parent Checkbox Group or to _any_ checkbox in the group will create `contained` checkboxes for the entire group.
 :::
 
+### Multi-select Cards
+
+Contained checkboxes support the same card content and placement options as [contained radios](/components/radio#selection-cards),
+while preserving checkbox semantics. Use them inside `zn-checkbox-group` when people may select more than one card.
+
+Set the title with `card-title` (or use the default slot), supporting text with `description`, and an image with `src`
+and `image-alt` or the `image` slot. `image-position` accepts `top`, `right`, `bottom`, and `left`. Cards are rounded
+by default; add `square` to the group to square off every card.
+
+```html:preview
+<zn-checkbox-group
+  label="Choose benefits"
+  help-text="Select all that apply"
+  name="benefits"
+  contained
+  horizontal>
+  <zn-checkbox
+    value="health"
+    card-title="Health insurance"
+    description="Medical and dental cover."
+    image-position="top"
+    control-position="top-right">
+    <zn-icon slot="image" src="health_and_safety" size="64"></zn-icon>
+  </zn-checkbox>
+  <zn-checkbox
+    value="pension"
+    card-title="Pension"
+    description="Employer contribution matching."
+    image-position="top"
+    control-position="top-right">
+    <zn-icon slot="image" src="savings" size="64"></zn-icon>
+  </zn-checkbox>
+</zn-checkbox-group>
+```
+
+Image and control placement is identical for radio and checkbox cards. See the
+[image and indicator position examples](/components/radio#image-and-indicator-positions) for a visual matrix of the
+four image directions, indicator corners, centered edge positions, and a hidden indicator.
+
+`control-position` accepts `top-left`, `top-center`, `top-right`, `center-left`, `center`, `center-right`,
+`bottom-left`, `bottom-center`, and `bottom-right`. The default `start` position retains the standard inline checkbox;
+use `none` to hide the indicator so the card itself shows the selected state, while keeping checkbox semantics and the
+full-card click target — see [hiding the input](/components/radio#hiding-the-radio-input) for what that looks like.
+
+```html:preview
+<zn-checkbox-group label="Choose add-ons" name="addons" contained horizontal wrap>
+  <zn-checkbox value="support" card-title="Priority support" description="One hour response time" control-position="none"></zn-checkbox>
+  <zn-checkbox value="backups" card-title="Daily backups" description="Retained for 30 days" control-position="none"></zn-checkbox>
+  <zn-checkbox value="audit" card-title="Audit log" description="Exportable as CSV" control-position="none"></zn-checkbox>
+</zn-checkbox-group>
+```
+
+Card dimensions can be adjusted with `--zn-selection-card-image-width`, `--zn-selection-card-image-height`,
+`--zn-selection-card-min-height`, `--zn-selection-card-content-min-width`, and `--zn-selection-card-title-font-size`.
+Use `--zn-selection-card-padding` for the inset around the card, `--zn-selection-card-gap` for the space between its
+regions, `--zn-selection-card-control-offset` for indicator placement, `--zn-selection-card-border-radius` for the
+corner radius, and `--zn-checkbox-group-column-width` on the group to control how many cards sit in a row.
+
 ### Borderless
 
 Use the `borderless` attribute to remove borders from the checkbox.
@@ -483,4 +541,4 @@ Checkboxes provide several methods for programmatic control:
     alert('Checkbox is ' + (isValid ? 'valid' : 'invalid'));
   });
 </script>
-```
+```

package/docs/pages/components/radio-group.md

@@ -161,6 +161,18 @@ This option can be combined with the `horizontal` attribute.
 :::tip
 When [radios](/components/radio) are wrapped with the Radio Group, adding the `contained` attribute to the
 parent Radio Group or to _any_ radio in the group will create `contained` radios for the entire group.
+
+Contained radios can also render as richer [selection cards](/components/radio#selection-cards) with an image, title,
+description, and positioned indicator. The radio group continues to manage their single selection, validation,
+keyboard navigation, and submitted form value.
+
+Contained radios are rounded by default; add `square` to the group to square off every radio in it. With
+`horizontal`, cards in a row are given equal height, and `--zn-radio-group-column-width` (default `152px`) sets the
+minimum column width used by the grid.
+
+Add `wrap` to lay the radios out as a wrapping row instead of an equal-width grid: each card starts from
+`--zn-radio-group-column-width` and grows to fill its line, and setting that property to `auto` sizes every card from
+its own content.
 :::
 
 ### Disabling Options

package/docs/pages/components/radio.md

@@ -111,6 +111,194 @@ Add the `contained` attribute to draw a card-like container around a radio. This
 <zn-radio name="payment" value="bank" description="Direct bank transfer (3-5 business days)" contained>Bank Transfer</zn-radio>
 ```
 
+Containers are rounded by default. Add `square` to square off the corners; setting it on a
+[radio group](/components/radio-group) squares every radio in the group.
+
+```html:preview
+<zn-radio-group name="delivery" value="standard" contained square>
+  <zn-radio value="standard" description="Arrives in 3-5 working days">Standard delivery</zn-radio>
+  <zn-radio value="express" description="Arrives the next working day">Express delivery</zn-radio>
+</zn-radio-group>
+```
+
+### Selection Cards
+
+A contained radio can combine an image, title, supporting text, and a freely positioned radio indicator. Set the title
+with `card-title` (or use the default slot), and set supporting text with `description` (or the `description` slot).
+Provide an image with `src` and `image-alt`, or place richer content such as `zn-icon` in the `image` slot.
+
+Use these cards inside [`zn-radio-group`](/components/radio-group) for a single-select form input. Adding both
+`contained` and `horizontal` to the group produces a responsive grid of equal-height cards that stacks when the
+available width becomes narrow.
+
+```html:preview
+<zn-radio-group label="Choose a pricing plan" name="plan" value="complete" contained horizontal>
+  <zn-radio
+    value="basic"
+    card-title="Basic"
+    description="For smaller businesses, with simple salaries and pay schedules."
+    control-position="top-right">
+    <zn-icon slot="image" src="support" size="64"></zn-icon>
+  </zn-radio>
+  <zn-radio
+    value="complete"
+    card-title="Complete"
+    description="For growing businesses that want to create a rewarding place to work."
+    control-position="top-right">
+    <zn-icon slot="image" src="potted_plant" size="64"></zn-icon>
+  </zn-radio>
+</zn-radio-group>
+```
+
+#### Image and Indicator Positions
+
+Set `image-position` to `top`, `right`, `bottom`, or `left` (the default), and `control-position` to any corner,
+edge centre, or `center`. Content is never placed underneath a positioned indicator — the card reserves a gutter for
+it — so wider columns leave more room for text. Use `--zn-radio-group-column-width` on the group to control how many
+cards sit in a row, or add `wrap` to the group to let cards grow to fill each line instead of sharing equal-width
+columns.
+
+```html:preview
+<zn-radio-group
+  label="Card position examples"
+  name="position-example"
+  contained
+  horizontal
+  style="--zn-radio-group-column-width: 24rem;">
+  <zn-radio
+    value="top"
+    card-title="Image above"
+    description="Top image, top-left control."
+    image-position="top"
+    control-position="top-left"
+    checked>
+    <zn-icon slot="image" src="image" size="48"></zn-icon>
+  </zn-radio>
+  <zn-radio
+    value="right"
+    card-title="Image right"
+    description="Right image, top-right control."
+    image-position="right"
+    control-position="top-right">
+    <zn-icon slot="image" src="image" size="48"></zn-icon>
+  </zn-radio>
+  <zn-radio
+    value="bottom"
+    card-title="Image below"
+    description="Bottom image, bottom-left control."
+    image-position="bottom"
+    control-position="bottom-left">
+    <zn-icon slot="image" src="image" size="48"></zn-icon>
+  </zn-radio>
+  <zn-radio
+    value="left"
+    card-title="Image left"
+    description="Left image, bottom-right control."
+    image-position="left"
+    control-position="bottom-right">
+    <zn-icon slot="image" src="image" size="48"></zn-icon>
+  </zn-radio>
+</zn-radio-group>
+```
+
+#### Indicators on an Edge
+
+The indicator can also be centred along any edge of the card.
+
+```html:preview
+<zn-radio-group
+  label="Additional indicator positions"
+  name="control-example"
+  contained
+  horizontal
+  style="--zn-radio-group-column-width: 18rem;">
+  <zn-radio
+    value="top-center"
+    card-title="Top center"
+    description="Centered along the top edge."
+    control-position="top-center">
+    <zn-icon slot="image" src="filter_center_focus" size="48"></zn-icon>
+  </zn-radio>
+  <zn-radio
+    value="center-right"
+    card-title="Center right"
+    description="Centered along the right edge."
+    control-position="center-right">
+    <zn-icon slot="image" src="filter_center_focus" size="48"></zn-icon>
+  </zn-radio>
+  <zn-radio
+    value="bottom-center"
+    card-title="Bottom center"
+    description="Centered along the bottom edge."
+    control-position="bottom-center">
+    <zn-icon slot="image" src="filter_center_focus" size="48"></zn-icon>
+  </zn-radio>
+</zn-radio-group>
+```
+
+#### Hiding the Radio Input
+
+Set `control-position="none"` to hide the radio itself so the card *is* the control — selection is shown by the card's
+highlighted border and background alone. Nothing is removed from the DOM: the native radio still receives focus, still
+responds to arrow keys within a [radio group](/components/radio-group), still submits its value, and the whole card
+stays clickable. Focusing a card in this state draws a focus ring around the card.
+
+```html:preview
+<zn-radio-group label="Choose a theme" name="theme" value="light" contained horizontal>
+  <zn-radio
+    value="light"
+    card-title="Light"
+    description="Bright background with dark text."
+    image-position="top"
+    control-position="none">
+    <zn-icon slot="image" src="light_mode" size="48"></zn-icon>
+  </zn-radio>
+  <zn-radio
+    value="dark"
+    card-title="Dark"
+    description="Dark background with light text."
+    image-position="top"
+    control-position="none">
+    <zn-icon slot="image" src="dark_mode" size="48"></zn-icon>
+  </zn-radio>
+  <zn-radio
+    value="system"
+    card-title="System"
+    description="Follows your device setting."
+    image-position="top"
+    control-position="none">
+    <zn-icon slot="image" src="contrast" size="48"></zn-icon>
+  </zn-radio>
+</zn-radio-group>
+```
+
+It works just as well without an image, which gives a compact set of button-like options.
+
+```html:preview
+<zn-radio-group label="Billing period" name="billing" value="annual" contained horizontal wrap>
+  <zn-radio value="monthly" card-title="Monthly" description="£29 per month" control-position="none"></zn-radio>
+  <zn-radio value="annual" card-title="Annual" description="£290 per year, two months free" control-position="none"></zn-radio>
+</zn-radio-group>
+```
+
+:::warning
+Because a hidden indicator removes the usual radio affordance, keep the selected state obvious — a short title with
+supporting text, as above, reads better than an image on its own.
+:::
+
+:::tip
+Card attributes only apply to `contained` radios. `control-position` accepts `top-left`, `top-center`, `top-right`,
+`center-left`, `center`, `center-right`, `bottom-left`, `bottom-center`, `bottom-right`, `none`, and the default
+`start`, which keeps the standard inline radio.
+:::
+
+Card dimensions can be adjusted with `--zn-selection-card-image-width`, `--zn-selection-card-image-height`,
+`--zn-selection-card-min-height`, and `--zn-selection-card-title-font-size`. Use `--zn-selection-card-padding` for the
+inset around the card, `--zn-selection-card-gap` for the space between its regions,
+`--zn-selection-card-control-offset` to change the indicator's distance from an edge,
+`--zn-selection-card-content-min-width` for the width the text keeps before it wraps below a side image, and
+`--zn-selection-card-border-radius` for the corner radius.
+
 ### Horizontal Layout
 
 Use the `horizontal` attribute to apply styles relevant to radios in a horizontal layout.

package/docs/pages/components/remarkd-editor.md

@@ -135,6 +135,28 @@ NOTE: The value is the same remarkd source either way."
 ></zn-remarkd-editor>
 ```
 
+### Height
+
+The editor never grows taller than the viewport: past that, its body scrolls and
+the toolbar stays in reach. Override the cap with `--remarkd-editor-max-height` —
+useful when the editor sits below a header and should only fill the space left on
+screen.
+
+All scrolling stays inside the editor's own body: adding a block or opening the
+image / include picker brings the new content into view, and dragging a block to a
+scroll edge keeps the content moving. Neither touches the page or panel around the
+editor.
+
+```html:preview
+<zn-remarkd-editor
+  style="--remarkd-editor-max-height: 20rem"
+  value="A short editor.
+
+Add blocks from the toolbar and the body starts scrolling once the content
+outgrows the 20rem cap set here."
+></zn-remarkd-editor>
+```
+
 ### Form Integration
 
 `zn-remarkd-editor` is a [form control](/getting-started/form-controls); its

package/docs/pages/components/scroll-container.md

@@ -5,10 +5,10 @@ meta:
 layout: component
 ---
 
-The scroll container provides a flexible scrolling area with optional header and footer slots that remain fixed while the main content scrolls. It supports automatic scrolling to the bottom, making it ideal for chat applications, activity feeds, and log viewers.
+The scroll container provides a flexible scrolling area with optional header and footer slots that remain fixed while the main content scrolls. It supports automatic scrolling to the bottom, making it ideal for chat applications, activity feeds, and log viewers. Set `height` to constrain the block-level container and enable scrolling when its content exceeds that height.
 
 ```html:preview
-<zn-scroll-container style="height: 300px; display: block; border: 1px solid var(--zn-color-neutral-200);">
+<zn-scroll-container height="300px" style="border: 1px solid var(--zn-color-neutral-200);">
   <div slot="header" style="padding: 1rem; background: var(--zn-color-neutral-100); border-bottom: 1px solid var(--zn-color-neutral-200);">
     <strong>Header Area</strong>
   </div>
@@ -39,7 +39,7 @@ The scroll container provides a flexible scrolling area with optional header and
 The most common use case is a simple vertical scrolling container. The main content area scrolls while header and footer remain fixed.
 
 ```html:preview
-<zn-scroll-container style="height: 400px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
+<zn-scroll-container height="400px" style="border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
   <div style="padding: 1rem;">
     <h3 style="margin-top: 0;">Scrollable Content Area</h3>
     <p>This container has a fixed height and the content will scroll vertically when it exceeds the available space.</p>
@@ -60,7 +60,7 @@ The most common use case is a simple vertical scrolling container. The main cont
 Use the `header` slot to add a fixed header that remains visible while content scrolls.
 
 ```html:preview
-<zn-scroll-container style="height: 350px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
+<zn-scroll-container height="350px" style="border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
   <div slot="header" style="padding: 1rem; background: var(--zn-color-primary-50); border-bottom: 2px solid var(--zn-color-primary-200);">
     <h3 style="margin: 0;">Document Title</h3>
     <p style="margin: 0.5rem 0 0 0; font-size: 0.875rem; color: var(--zn-color-neutral-600);">Last updated: January 23, 2026</p>
@@ -91,7 +91,7 @@ Use the `header` slot to add a fixed header that remains visible while content s
 Use the `footer` slot to add a fixed footer that remains at the bottom. The footer is positioned absolutely and the scrollable area has padding to account for its height.
 
 ```html:preview
-<zn-scroll-container style="height: 350px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
+<zn-scroll-container height="350px" style="border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
   <div style="padding: 1rem;">
     <h4>Content Area</h4>
     <p>The footer remains fixed at the bottom while this content scrolls.</p>
@@ -116,7 +116,7 @@ Use the `footer` slot to add a fixed footer that remains at the bottom. The foot
 Combine both header and footer slots for maximum control. The scrollable area sits between them.
 
 ```html:preview
-<zn-scroll-container style="height: 400px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
+<zn-scroll-container height="400px" style="border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
   <div slot="header" style="padding: 1rem; background: var(--zn-color-neutral-100); border-bottom: 1px solid var(--zn-color-neutral-200);">
     <h3 style="margin: 0;">Messages</h3>
   </div>
@@ -156,7 +156,7 @@ Combine both header and footer slots for maximum control. The scrollable area si
 Use the `start-scrolled` attribute to automatically scroll to the bottom when the component loads or when new content is added. This is perfect for chat interfaces, activity logs, and notification feeds.
 
 ```html:preview
-<zn-scroll-container start-scrolled style="height: 300px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
+<zn-scroll-container height="300px" start-scrolled style="border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
   <div slot="header" style="padding: 1rem; background: var(--zn-color-neutral-100); border-bottom: 1px solid var(--zn-color-neutral-200);">
     <h4 style="margin: 0;">Activity Log</h4>
   </div>
@@ -198,7 +198,7 @@ Use the `start-scrolled` attribute to automatically scroll to the bottom when th
 A practical example showing how to build a chat interface with auto-scrolling and dynamic content.
 
 ```html:preview
-<zn-scroll-container id="chat-example" start-scrolled style="height: 450px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+<zn-scroll-container id="chat-example" height="450px" start-scrolled style="border: 1px solid var(--zn-color-neutral-200); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
   <div slot="header" style="padding: 1rem; background: var(--zn-color-primary); color: white; display: flex; align-items: center; gap: 0.75rem;">
     <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--zn-color-primary-700); display: flex; align-items: center; justify-content: center; font-weight: bold;">
       TC
@@ -274,7 +274,7 @@ A practical example showing how to build a chat interface with auto-scrolling an
 Perfect for displaying server logs, build output, or any streaming text content.
 
 ```html:preview
-<zn-scroll-container start-scrolled style="height: 350px; display: block; border: 1px solid var(--zn-color-neutral-800); border-radius: 4px; overflow: hidden; background: var(--zn-color-neutral-900);">
+<zn-scroll-container height="350px" start-scrolled style="border: 1px solid var(--zn-color-neutral-800); border-radius: 4px; overflow: hidden; background: var(--zn-color-neutral-900);">
   <div slot="header" style="padding: 0.75rem 1rem; background: var(--zn-color-neutral-800); color: var(--zn-color-neutral-200); font-family: monospace; font-size: 0.875rem; border-bottom: 1px solid var(--zn-color-neutral-700);">
     <strong>build.log</strong> - Application Build Output
   </div>
@@ -307,7 +307,7 @@ Perfect for displaying server logs, build output, or any streaming text content.
 A practical example showing an activity feed that automatically scrolls to show the latest activity.
 
 ```html:preview
-<zn-scroll-container id="activity-feed" start-scrolled style="height: 400px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
+<zn-scroll-container id="activity-feed" height="400px" start-scrolled style="border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
   <div slot="header" style="padding: 1rem; background: var(--zn-color-neutral-50); border-bottom: 1px solid var(--zn-color-neutral-200); display: flex; justify-content: space-between; align-items: center;">
     <h4 style="margin: 0;">Recent Activity</h4>
     <zn-chip size="small" type="info">Live</zn-chip>
@@ -358,7 +358,7 @@ A practical example showing an activity feed that automatically scrolls to show
 A comprehensive example showing how to build a notification center with categorized notifications.
 
 ```html:preview
-<zn-scroll-container start-scrolled style="height: 450px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+<zn-scroll-container height="450px" start-scrolled style="border: 1px solid var(--zn-color-neutral-200); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
   <div slot="header" style="padding: 1.25rem; background: var(--zn-color-white); border-bottom: 1px solid var(--zn-color-neutral-200);">
     <div style="display: flex; justify-content: space-between; align-items: center;">
       <div>
@@ -460,7 +460,7 @@ A comprehensive example showing how to build a notification center with categori
 You can programmatically scroll to the bottom using the `scrollEnd()` method.
 
 ```html:preview
-<zn-scroll-container id="programmatic-scroll" style="height: 300px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
+<zn-scroll-container id="programmatic-scroll" height="300px" style="border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
   <div id="scroll-content" style="padding: 1rem;">
     <p>Content line 1</p>
     <p>Content line 2</p>
@@ -507,7 +507,7 @@ You can programmatically scroll to the bottom using the `scrollEnd()` method.
 The footer's height is automatically tracked and the scrollable area adjusts accordingly. This happens dynamically when the footer content changes size.
 
 ```html:preview
-<zn-scroll-container start-scrolled style="height: 400px; display: block; border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
+<zn-scroll-container height="400px" start-scrolled style="border: 1px solid var(--zn-color-neutral-200); border-radius: 4px; overflow: hidden;">
   <div style="padding: 1rem;">
     <p>The scrollable area automatically adjusts its padding based on the footer's height.</p>
     <p>This ensures that content is never hidden behind the fixed footer.</p>
@@ -552,7 +552,7 @@ The footer's height is automatically tracked and the scrollable area adjusts acc
 A minimal example showing just the essential markup.
 
 ```html:preview
-<zn-scroll-container style="height: 250px; display: block; border: 1px solid var(--zn-color-neutral-200);">
+<zn-scroll-container height="250px" style="border: 1px solid var(--zn-color-neutral-200);">
   <div style="padding: 1rem;">
     <p>Simple scrollable content without header or footer.</p>
     <p>Just add content to the default slot.</p>
@@ -565,4 +565,3 @@ A minimal example showing just the essential markup.
 </zn-scroll-container>
 ```
 
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.98",
+  "version": "1.1.99",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",