@sky.ui/core 0.0.1

package/dist/sky-flexbar/sky-flexbar.d.ts

@@ -0,0 +1,189 @@
+import { LitElement, PropertyValues } from "lit";
+export type SkyFlexbarDirection = "horizontal" | "vertical";
+export type SkyFlexbarDirectionChangedDetail = {
+    flexDirection: SkyFlexbarDirection;
+};
+export type SkyFlexbarMenuToggleDetail = {
+    open: boolean;
+};
+/**
+ * @element sky-flexbar
+ *
+ * @summary Responsive action bar that moves overflowing items into a hamburger menu.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/flexbar
+ * @dependency sky-icon
+ *
+ * @uiVModel isHamburgerOpen menu-toggle detail=open
+ *
+ * @slot - Default slot for visible bar items. Apply `class="menu-parent"` to each.
+ * @slot hamburger - Receives items that overflow the main bar.
+ *
+ * @property {boolean} isHamburgerOpen - Whether the overflow menu is open.
+ * @property {boolean} isFullyHidden - Whether all slotted items are currently overflowed.
+ * @property {number} gapThreshold - Reserved space in px used during overflow measurement.
+ * @property {SkyFlexbarDirection} flexDirection - Current layout direction.
+ * @property {number} stackAt - Width threshold (px) for switching to vertical mode; `0` disables.
+ * @property {string} partialIcon - Icon shown when only some items overflow.
+ * @property {string} fullIcon - Icon shown when all items overflow.
+ *
+ * @fires {CustomEvent<SkyFlexbarDirectionChangedDetail>} flex-direction-changed - Fired when layout direction changes.
+ * @fires {CustomEvent<SkyFlexbarMenuToggleDetail>} menu-toggle - Fired when the hamburger menu opens or closes.
+ * @method openMenu Opens the hamburger menu.
+ * @method closeMenu Closes the hamburger menu.
+ * @method toggleMenu Toggles the hamburger menu state.
+ * @method recalculateLayout Re-runs layout and overflow measurement.
+ *
+ * @csspart container - The outer flex container.
+ * @csspart hamburger-button - The hamburger/ellipsis toggle button.
+ * @csspart menu - The dropdown menu container.
+ * @csspart menu-inner - Wrapper inside the dropdown menu.
+ *
+ * @Behavior
+ * - Automatically measures available space using ResizeObserver
+ * - Moves overflowing `.menu-parent` items into hamburger menu
+ * - Switches between horizontal and vertical layouts based on width
+ * - Uses PopoverController for dropdown positioning and management
+ * - Maintains accessibility with proper ARIA attributes
+ *
+ * - Items with `class="menu-parent"` are measured for fit
+ * - Overflowing items are moved to `slot="hamburger"`
+ * - Hamburger button shows different icons based on overflow state
+ * - Menu automatically closes when all items fit in main bar
+ *
+ * - `stackAt` property controls vertical stacking breakpoint
+ * - Dynamically switches between horizontal/vertical layouts
+ * - Emits `flex-direction-changed` events for child components
+ *
+ * @example
+ * ```html
+ * <sky-flexbar stack-at="640" partial-icon="ion:ellipsis-horizontal" full-icon="ion:menu">
+ *   <sky-flexitem class="menu-parent">
+ *     <span slot="title">Home</span>
+ *     <span slot="content">Dashboard</span>
+ *   </sky-flexitem>
+ *   <sky-flexitem class="menu-parent">
+ *     <span slot="title">Reports</span>
+ *     <span slot="content">Monthly</span>
+ *   </sky-flexitem>
+ * </sky-flexbar>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-flexbar stack-at="640">
+ *     <sky-flexitem class="menu-parent"><span slot="title">Home</span><span slot="content">Dashboard</span></sky-flexitem>
+ *     <sky-flexitem class="menu-parent"><span slot="title">Reports</span><span slot="content">Monthly</span></sky-flexitem>
+ *   </sky-flexbar>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-flexbar stack-at="640">
+ *       <sky-flexitem class="menu-parent"><span slot="title">Home</span><span slot="content">Dashboard</span></sky-flexitem>
+ *       <sky-flexitem class="menu-parent"><span slot="title">Reports</span><span slot="content">Monthly</span></sky-flexitem>
+ *     </sky-flexbar>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyFlexbar extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    /**
+     * Whether the dropdown menu is open.
+     * @public
+     */
+    isHamburgerOpen: boolean;
+    /**
+     * True if all items overflow into the menu.
+     * @public
+     */
+    isFullyHidden: boolean;
+    /**
+     * Space (px) reserved for paddings/margins when measuring.
+     * @public
+     */
+    gapThreshold: number;
+    /**
+     * Current layout direction.
+     * @public
+     */
+    flexDirection: SkyFlexbarDirection;
+    /**
+     * Stack vertically when component width is below this (px). `0` disables.
+     * @public
+     */
+    stackAt: number;
+    /**
+     * Icon name for "some items overflow" state.
+     * @public
+     */
+    partialIcon: string;
+    /**
+     * Icon name for "all items overflow" state.
+     * @public
+     */
+    fullIcon: string;
+    /** @private */
+    private _ro?;
+    /** @private */
+    private _itemElements;
+    /** @private */
+    private _scheduled;
+    /** @private */
+    private _initialized;
+    /** @private */
+    private _mo?;
+    /** @private */
+    private hamburgerEl;
+    /** @private */
+    private dropdownPopover;
+    static styles: import("lit").CSSResult;
+    /** @protected */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    /** @protected */
+    connectedCallback(): void;
+    /** @protected */
+    disconnectedCallback(): void;
+    /**
+     * Collects all .menu-parent elements for measurement.
+     * @private
+     */
+    private _collectItems;
+    /**
+     * Schedules a measurement for the next animation frame.
+     * @private
+     */
+    private _scheduleMeasure;
+    /**
+     * Measures available space and manages item overflow.
+     * @private
+     */
+    private _measure;
+    /**
+     * Opens the hamburger menu.
+     * @public
+     */
+    openMenu(): void;
+    /**
+     * Closes the hamburger menu.
+     * @public
+     */
+    closeMenu(): void;
+    /**
+     * Toggles the hamburger menu.
+     * @public
+     */
+    toggleMenu(): void;
+    /**
+     * Forces a recalculation of item layout.
+     * Useful when items change size dynamically.
+     * @public
+     */
+    recalculateLayout(): void;
+    /** @protected */
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-flexbar/sky-flexbar.js

@@ -0,0 +1,148 @@
+import{__decorate as e,__metadata as t}from"tslib";import{LitElement as r,css as i,html as s}from"lit";import{property as o,state as n,query as a,customElement as d}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{PopoverController as p}from"../helper/controllers/popover-controller.js";import{SkyIcon as h}from"../sky-icon/sky-icon.js";let c=class extends r{constructor(){super(...arguments),this.isHamburgerOpen=!1,this.isFullyHidden=!1,this.gapThreshold=100,this.flexDirection="horizontal",this.stackAt=500,this.partialIcon="ion:ellipsis-horizontal",this.fullIcon="ion:menu",this._itemElements=[],this._scheduled=!1,this._initialized=!1,this.dropdownPopover=new p(this,{getAnchor:()=>this,getPopover:()=>this.hamburgerEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>"bottom",getAlign:()=>"start",getGap:()=>6,getPadding:()=>8,getMatchAnchorWidth:()=>!0,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>160,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,onOpenChange:(e,t)=>{this.isHamburgerOpen=e,this.dispatchEvent(new CustomEvent("menu-toggle",{detail:{open:e},bubbles:!0,composed:!0}))}})}static{this.dependencies={"sky-icon":h}}static{this.styles=i`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      position: relative;
+      box-sizing: border-box;
+      font-family: var(--sky-font);
+      color: var(--sky-text-primary, #000);
+      border: var(--sky-border-primary);
+      background-color: var(--sky-glass-primary);
+      padding: 5px;
+      border-radius: var(--sky-radius-secondary);
+      box-shadow: var(--sky-box-shadow-primary);
+      transition: border-radius 0.3s ease;
+     
+    }
+
+    :host::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      border-radius: inherit;
+    }
+
+    .main-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .main-items {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .spacer {
+      flex: 1 1 auto;
+    }
+
+    .hamburger-btn {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      padding: 6px;
+      width: 28px;
+      height: 28px;
+      min-width: 28px;
+      min-height: 28px;
+      flex: 0 0 auto;
+      margin-left: auto;
+      line-height: 1;
+      font-size: 16px;
+      color: var(--sky-text-primary);
+      background: var(--sky-hover-primary);
+      border: var(--sky-border-primary);
+      border-radius: var(--sky-radius-secondary);
+      transition:
+        background-color 0.2s ease,
+        color 0.2s ease;
+    }
+
+    .hamburger-btn:hover {
+      color: var(--sky-active-primary);
+    }
+
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+    }
+
+    .hamburger-menu {
+      position: fixed;
+      top: var(--sky-dd-top);
+      left: var(--sky-dd-left);
+      width: var(--sky-dd-width);
+      margin: 0;
+      box-shadow: var(--sky-box-shadow-primary);
+      border-radius: var(--sky-radius-secondary);
+      background-color: var(--sky-glass-primary);
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      border: var(--sky-border-primary);
+     
+    }
+
+    .hamburger-inner {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      box-sizing: border-box;
+    }
+  `}firstUpdated(e){super.firstUpdated(e),this.dropdownPopover.refreshTargets()}connectedCallback(){super.connectedCallback(),this._ro=new ResizeObserver(()=>this._scheduleMeasure()),this._ro.observe(this),this._mo=new MutationObserver(()=>this._collectItems()),this._mo.observe(this,{childList:!0,subtree:!0}),this._collectItems(),this.updateComplete.then(()=>this._measure())}disconnectedCallback(){super.disconnectedCallback(),this._ro?.disconnect(),this._mo?.disconnect()}_collectItems(){this._itemElements=Array.from(this.querySelectorAll(".menu-parent")),this._scheduleMeasure()}_scheduleMeasure(){this._scheduled||(this._scheduled=!0,requestAnimationFrame(()=>{this._scheduled=!1,this._measure()}))}_measure(){if(0===this._itemElements.length)return;for(const e of this._itemElements)e.removeAttribute("slot");const e=this.getBoundingClientRect().width,t=this.stackAt>0&&e<this.stackAt?"vertical":"horizontal";this._initialized&&t!==this.flexDirection?(this.flexDirection=t,this.dispatchEvent(new CustomEvent("flex-direction-changed",{detail:{flexDirection:t},bubbles:!0,composed:!0}))):this.flexDirection=t;const r=this.shadowRoot?.querySelector(".main-container"),i=this.shadowRoot?.querySelector(".hamburger-btn"),s=i&&i.offsetWidth||28,o=r?r.offsetWidth-this.gapThreshold-(s+8):0;let n=0;const a=[];for(const e of this._itemElements){n+=e.getBoundingClientRect().width,n>o&&a.push(e)}const d=a.length>0;i&&(i.style.display=d?"flex":"none");for(const e of a)e.setAttribute("slot","hamburger");this.isFullyHidden=a.length===this._itemElements.length,d||this.dropdownPopover.closePopover(),this._initialized||(this._initialized=!0)}openMenu(){this.dropdownPopover.openPopover()}closeMenu(){this.dropdownPopover.closePopover()}toggleMenu(){this.dropdownPopover.toggle()}recalculateLayout(){this._measure()}render(){const e="menu-"+(this.id||Math.random().toString(36).slice(2));return s`
+      <div class="main-container" part="container">
+        <div class="main-items">
+          <!-- visible items -->
+          <slot></slot>
+        </div>
+
+        <div class="spacer"></div>
+
+        <button
+          class="hamburger-btn"
+          part="hamburger-button"
+          @click=${()=>this.dropdownPopover.toggle()}
+          @keydown=${e=>("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.dropdownPopover.toggle())}
+          aria-label="More"
+          aria-haspopup="menu"
+          .aria-expanded=${String(this.isHamburgerOpen)}
+          aria-controls=${e}
+          tabindex="0"
+        >
+          ${l(this.isFullyHidden,()=>s`<sky-icon icon="${this.fullIcon}"></sky-icon>`,()=>s`<sky-icon icon="${this.partialIcon}"></sky-icon>`)}
+        </button>
+      </div>
+
+      <div
+        id=${e}
+        class="hamburger-menu"
+        @toggle=${this.dropdownPopover.onToggle}
+        popover="manual"
+        part="menu"
+        role="menu"
+        ?inert=${!this.isHamburgerOpen}
+        aria-label="Additional menu items"
+      >
+        <div class="hamburger-inner" part="menu-inner">
+          <!-- overflow items (same nodes, just slot="hamburger") -->
+          <slot name="hamburger"></slot>
+        </div>
+      </div>
+    `}};e([o({type:Boolean}),t("design:type",Object)],c.prototype,"isHamburgerOpen",void 0),e([o({type:Boolean}),t("design:type",Object)],c.prototype,"isFullyHidden",void 0),e([o({type:Number}),t("design:type",Object)],c.prototype,"gapThreshold",void 0),e([o({type:String,reflect:!0}),t("design:type",String)],c.prototype,"flexDirection",void 0),e([o({type:Number}),t("design:type",Object)],c.prototype,"stackAt",void 0),e([o({type:String}),t("design:type",Object)],c.prototype,"partialIcon",void 0),e([o({type:String}),t("design:type",Object)],c.prototype,"fullIcon",void 0),e([n(),t("design:type",ResizeObserver)],c.prototype,"_ro",void 0),e([n(),t("design:type",Array)],c.prototype,"_itemElements",void 0),e([a(".hamburger-menu"),t("design:type",HTMLElement)],c.prototype,"hamburgerEl",void 0),c=e([d("sky-flexbar")],c);export{c as SkyFlexbar};
+//# sourceMappingURL=sky-flexbar.js.map

package/dist/sky-flexbar/sky-flexbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-flexbar.js","sources":["../../src/sky-flexbar/sky-flexbar.ts"],"sourcesContent":[null],"names":["SkyFlexbar","LitElement","constructor","this","isHamburgerOpen","isFullyHidden","gapThreshold","flexDirection","stackAt","partialIcon","fullIcon","_itemElements","_scheduled","_initialized","dropdownPopover","PopoverController","getAnchor","getPopover","hamburgerEl","cssVarLeft","cssVarTop","cssVarWidth","getPlacement","getAlign","getGap","getPadding","getMatchAnchorWidth","getMaxWidthToViewport","getMaxWidthMode","getFlip","getFlipOrder","getAnimateReposition","getRepositionMs","getCloseOnEscape","getCloseOnOutside","getRestoreFocusOnClose","onOpenChange","open","meta","dispatchEvent","CustomEvent","detail","bubbles","composed","dependencies","SkyIcon","styles","css","firstUpdated","_changedProperties","super","refreshTargets","connectedCallback","_ro","ResizeObserver","_scheduleMeasure","observe","_mo","MutationObserver","_collectItems","childList","subtree","updateComplete","then","_measure","disconnectedCallback","disconnect","Array","from","querySelectorAll","requestAnimationFrame","length","item","removeAttribute","w","getBoundingClientRect","width","newDir","mainContainer","shadowRoot","querySelector","btn","btnWidth","offsetWidth","available","total","hidden","el","push","showHamburger","style","display","setAttribute","closePopover","openMenu","openPopover","closeMenu","toggleMenu","toggle","recalculateLayout","render","menuId","id","Math","random","toString","slice","html","e","key","preventDefault","String","when","onToggle","__decorate","property","type","Boolean","prototype","Number","reflect","state","query","HTMLElement","customElement"],"mappings":"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"}

package/dist/sky-flexbox/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-flexbox";

package/dist/sky-flexbox/index.js

@@ -0,0 +1 @@
+export * from './sky-flexbox.js';

package/dist/sky-flexbox/sky-flexbox.d.ts

@@ -0,0 +1,156 @@
+import { LitElement } from "lit";
+export type SkyFlexboxDirection = "row" | "row-reverse" | "column" | "column-reverse";
+export type SkyFlexboxWrap = "nowrap" | "wrap" | "wrap-reverse";
+export type SkyFlexboxJustify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+export type SkyFlexboxAlign = "stretch" | "flex-start" | "center" | "flex-end" | "baseline";
+export type SkyFlexboxAlignContent = "normal" | "stretch" | "center" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+/**
+ * @element sky-flexbox
+ *
+ * @summary Flexbox container with grid-like span support for slotted children.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/flexbox
+ *
+ * @slot - Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).
+ *
+ * @property {SkyFlexboxDirection} direction - Flex direction.
+ * @property {SkyFlexboxWrap} wrap - Flex wrap behavior.
+ * @property {SkyFlexboxJustify} justify - Main-axis alignment.
+ * @property {SkyFlexboxAlign} align - Cross-axis alignment.
+ * @property {SkyFlexboxAlignContent} alignContent - Multi-line cross-axis distribution.
+ * @property {string} gap - Shared row/column gap value.
+ * @property {string | undefined} gapX - Horizontal gap override.
+ * @property {string | undefined} gapY - Vertical gap override.
+ * @property {number} col - Total column count used for span calculations.
+ *
+ * @fires {Event} slotchange - Fired when slotted children change.
+ * @method recalculateSpans Recomputes slotted child span CSS variables.
+ *
+ * @csspart container - The flex container element.
+ *
+ * @Behavior
+ * - Implements CSS Flexbox with custom property-based configuration
+ * - Supports responsive span calculations based on column grid system
+ * - Automatically manages CSS custom properties for child elements
+ * - Handles responsive breakpoints through span attributes
+ *
+ * - Uses a configurable column count (default: 12)
+ * - Calculates item widths based on span values (1-col through total columns)
+ * - Supports responsive spans: `span-lg`, `span-md`, `span-sm`, `span-xs`
+ * - Clamps span values to valid range (1 to column count)
+ *
+ * - Supports unified `gap` property
+ * - Optional `gapX` and `gapY` for separate horizontal/vertical spacing
+ * - Gap values can use any CSS unit (px, rem, em, %, etc.)
+ *
+ * @example
+ * ```html
+ * <sky-flexbox col="12" gap="16px">
+ *   <sky-flexcol span="8" span-md="12">
+ *     Main content
+ *   </sky-flexcol>
+ *   <sky-flexcol span="4" span-md="12">
+ *     Sidebar
+ *   </sky-flexcol>
+ * </sky-flexbox>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-flexbox col="12" gap="16px">
+ *     <sky-flexcol span="8" span-md="12">Main content</sky-flexcol>
+ *     <sky-flexcol span="4" span-md="12">Sidebar</sky-flexcol>
+ *   </sky-flexbox>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-flexbox col="12" gap="16px">
+ *       <sky-flexcol span="8" span-md="12">Main content</sky-flexcol>
+ *       <sky-flexcol span="4" span-md="12">Sidebar</sky-flexcol>
+ *     </sky-flexbox>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyFlexbox extends LitElement {
+    /**
+     * Flex direction.
+     * @public
+     */
+    direction: SkyFlexboxDirection;
+    /**
+     * Wrap behavior.
+     * @public
+     */
+    wrap: SkyFlexboxWrap;
+    /**
+     * Main axis justification.
+     * @public
+     */
+    justify: SkyFlexboxJustify;
+    /**
+     * Cross axis alignment.
+     * @public
+     */
+    align: SkyFlexboxAlign;
+    /**
+     * Multi-line alignment (when wrapping).
+     * @public
+     */
+    alignContent: SkyFlexboxAlignContent;
+    /**
+     * Shorthand gap; used if gapX/gapY not provided.
+     * @public
+     */
+    gap: string;
+    /**
+     * Column gap.
+     * @public
+     */
+    gapX?: string;
+    /**
+     * Row gap.
+     * @public
+     */
+    gapY?: string;
+    /**
+     * Total columns used for span calculation.
+     * @public
+     */
+    col: number;
+    static styles: import("lit").CSSResult;
+    /** @protected */
+    firstUpdated(): void;
+    /** @protected */
+    updated(changed: Map<string | number | symbol, unknown>): void;
+    /**
+     * Syncs component properties to CSS custom properties.
+     * @private
+     */
+    private syncVars;
+    /**
+     * Forces recalculation of spans for all child elements.
+     * Useful when dynamically adding/removing items.
+     * @public
+     */
+    recalculateSpans(): void;
+    /** @protected */
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Reads span attributes off slotted children and maps them to CSS vars:
+     * span, span-lg, span-md, span-sm, span-xs
+     * @private
+     */
+    private updateSpans;
+    /**
+     * Clamps span value to valid range (1 to column count).
+     * @param raw - Raw span value from attribute
+     * @returns Clamped number or null if invalid
+     * @private
+     */
+    private clampSpan;
+}

package/dist/sky-flexbox/sky-flexbox.js

@@ -0,0 +1,40 @@
+import{__decorate as t,__metadata as n}from"tslib";import{LitElement as s,css as a,html as i}from"lit";import{property as e,customElement as r}from"lit/decorators.js";let p=class extends s{constructor(){super(...arguments),this.direction="row",this.wrap="wrap",this.justify="flex-start",this.align="stretch",this.alignContent="normal",this.gap="16px",this.col=12,this.updateSpans=()=>{const t=this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[];for(const n of t){if(!(n instanceof HTMLElement))continue;const t=n,s=this.clampSpan(null!=t.span?String(t.span):null),a=this.clampSpan(null!=t.spanLg?String(t.spanLg):null),i=this.clampSpan(null!=t.spanMd?String(t.spanMd):null),e=this.clampSpan(null!=t.spanSm?String(t.spanSm):null),r=this.clampSpan(null!=t.spanXs?String(t.spanXs):null);s&&n.style.setProperty("--span",String(s)),a&&n.style.setProperty("--span-lg",String(a)),i&&n.style.setProperty("--span-md",String(i)),e&&n.style.setProperty("--span-sm",String(e)),r&&n.style.setProperty("--span-xs",String(r))}}}static{this.styles=a`
+    :host {
+      display: block;
+    }
+
+    .flex-container {
+      display: flex;
+      box-sizing: border-box;
+      flex-wrap: var(--wrap, wrap);
+      gap: var(--gap-y, var(--gap, 16px)) var(--gap-x, var(--gap, 16px));
+      justify-content: var(--justify, flex-start);
+      align-items: var(--align, stretch);
+      align-content: var(--align-content, normal);
+      flex-direction: var(--direction, row);
+    }
+
+    /* Default behaviour for any slotted child: */
+    ::slotted(*) {
+      /* Current span, responsive-aware */
+      --span-current: var(--span, 1);
+
+      /**
+     * Calculate width per column:
+     * columnWidth = (100% - (columns - 1) * gapX) / columns
+     * itemWidth   = columnWidth * span
+     */
+      flex-basis: calc(
+        (
+            (100% - (var(--columns, 12) - 1) * var(--gap-x, var(--gap, 16px))) /
+              var(--columns, 12)
+          ) *
+          var(--span-current)
+      );
+    }
+  `}firstUpdated(){this.syncVars(),this.updateSpans()}updated(t){(t.has("wrap")||t.has("gap")||t.has("gapX")||t.has("gapY")||t.has("col")||t.has("justify")||t.has("direction")||t.has("align")||t.has("alignContent"))&&this.syncVars(),t.has("col")&&this.updateSpans()}syncVars(){const t={"--wrap":this.wrap,"--gap":this.gap,"--gap-x":this.gapX??this.gap,"--gap-y":this.gapY??this.gap,"--columns":String(this.col),"--justify":this.justify,"--direction":this.direction,"--align":this.align,"--align-content":this.alignContent};Object.entries(t).forEach(([t,n])=>this.style.setProperty(t,n))}recalculateSpans(){this.updateSpans()}render(){return i`
+      <div class="flex-container" part="container">
+        <slot @slotchange=${this.updateSpans}></slot>
+      </div>
+    `}clampSpan(t){if(!t)return null;return Math.max(1,Math.min(this.col,Number(t)||1))}};t([e({type:String}),n("design:type",String)],p.prototype,"direction",void 0),t([e({type:String}),n("design:type",String)],p.prototype,"wrap",void 0),t([e({type:String}),n("design:type",String)],p.prototype,"justify",void 0),t([e({type:String}),n("design:type",String)],p.prototype,"align",void 0),t([e({type:String}),n("design:type",String)],p.prototype,"alignContent",void 0),t([e({type:String}),n("design:type",String)],p.prototype,"gap",void 0),t([e({type:String}),n("design:type",String)],p.prototype,"gapX",void 0),t([e({type:String}),n("design:type",String)],p.prototype,"gapY",void 0),t([e({type:Number}),n("design:type",Number)],p.prototype,"col",void 0),p=t([r("sky-flexbox")],p);export{p as SkyFlexbox};
+//# sourceMappingURL=sky-flexbox.js.map

package/dist/sky-flexbox/sky-flexbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-flexbox.js","sources":["../../src/sky-flexbox/sky-flexbox.ts"],"sourcesContent":[null],"names":["SkyFlexbox","LitElement","constructor","this","direction","wrap","justify","align","alignContent","gap","col","updateSpans","nodes","shadowRoot","querySelector","assignedElements","flatten","el","HTMLElement","elAny","base","clampSpan","span","String","lg","spanLg","md","spanMd","sm","spanSm","xs","spanXs","style","setProperty","styles","css","firstUpdated","syncVars","updated","changed","has","gapX","gapY","Object","entries","forEach","k","v","recalculateSpans","render","html","raw","Math","max","min","Number","__decorate","property","type","prototype","customElement"],"mappings":"uKAkGO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAMLC,KAAAC,UAAiC,MAOjCD,KAAAE,KAAuB,OAOvBF,KAAAG,QAA6B,aAO7BH,KAAAI,MAAyB,UAOzBJ,KAAAK,aAAuC,SAMXL,KAAAM,IAAc,OAoBdN,KAAAO,IAAc,GA0GlCP,KAAAQ,YAAc,KACpB,MAAMC,EACJT,KAAKU,YACDC,cAAc,SACdC,iBAAiB,CAAEC,SAAS,KAAW,GAC7C,IAAK,MAAMC,KAAML,EAAO,CACtB,KAAMK,aAAcC,aAAc,SAElC,MAAMC,EAAQF,EAERG,EAAOjB,KAAKkB,UAAwB,MAAdF,EAAMG,KAAeC,OAAOJ,EAAMG,MAAQ,MAChEE,EAAKrB,KAAKkB,UAA0B,MAAhBF,EAAMM,OAAiBF,OAAOJ,EAAMM,QAAU,MAClEC,EAAKvB,KAAKkB,UAA0B,MAAhBF,EAAMQ,OAAiBJ,OAAOJ,EAAMQ,QAAU,MAClEC,EAAKzB,KAAKkB,UAA0B,MAAhBF,EAAMU,OAAiBN,OAAOJ,EAAMU,QAAU,MAClEC,EAAK3B,KAAKkB,UAA0B,MAAhBF,EAAMY,OAAiBR,OAAOJ,EAAMY,QAAU,MAEpEX,GAAMH,EAAGe,MAAMC,YAAY,SAAUV,OAAOH,IAC5CI,GAAIP,EAAGe,MAAMC,YAAY,YAAaV,OAAOC,IAC7CE,GAAIT,EAAGe,MAAMC,YAAY,YAAaV,OAAOG,IAC7CE,GAAIX,EAAGe,MAAMC,YAAY,YAAaV,OAAOK,IAC7CE,GAAIb,EAAGe,MAAMC,YAAY,YAAaV,OAAOO,GACnD,EAcJ,QA3IkB3B,KAAA+B,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkC1B,CAGO,YAAAC,GACPjC,KAAKkC,WACLlC,KAAKQ,aACP,CAGS,OAAA2B,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,QACZD,EAAQC,IAAI,SACZD,EAAQC,IAAI,SACZD,EAAQC,IAAI,QACZD,EAAQC,IAAI,YACZD,EAAQC,IAAI,cACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,kBAEZrC,KAAKkC,WAEHE,EAAQC,IAAI,QACdrC,KAAKQ,aAET,CAMQ,QAAA0B,GACN,MAAMH,EAAS,CACb,SAAU/B,KAAKE,KACf,QAASF,KAAKM,IACd,UAAWN,KAAKsC,MAAQtC,KAAKM,IAC7B,UAAWN,KAAKuC,MAAQvC,KAAKM,IAC7B,YAAac,OAAOpB,KAAKO,KACzB,YAAaP,KAAKG,QAClB,cAAeH,KAAKC,UACpB,UAAWD,KAAKI,MAChB,kBAAmBJ,KAAKK,cAE1BmC,OAAOC,QAAQV,GAAQW,QAAQ,EAAEC,EAAGC,KAAO5C,KAAK6B,MAAMC,YAAYa,EAAGC,GACvE,CAOO,gBAAAC,GACL7C,KAAKQ,aACP,CAGS,MAAAsC,GACP,OAAOC,CAAI;;4BAEa/C,KAAKQ;;KAG/B,CAqCQ,SAAAU,CAAU8B,GAChB,IAAKA,EAAK,OAAO,KAEjB,OADUC,KAAKC,IAAI,EAAGD,KAAKE,IAAInD,KAAKO,IAAK6C,OAAOJ,IAAQ,GAE1D,GAlMAK,EAAA,CADCC,EAAS,CAAEC,KAAMnC,kCACqBvB,EAAA2D,UAAA,oBAOvCH,EAAA,CADCC,EAAS,CAAEC,KAAMnC,kCACYvB,EAAA2D,UAAA,eAO9BH,EAAA,CADCC,EAAS,CAAEC,KAAMnC,kCACwBvB,EAAA2D,UAAA,kBAO1CH,EAAA,CADCC,EAAS,CAAEC,KAAMnC,kCACiBvB,EAAA2D,UAAA,gBAOnCH,EAAA,CADCC,EAAS,CAAEC,KAAMnC,kCAC8BvB,EAAA2D,UAAA,uBAMpBH,EAAA,CAA3BC,EAAS,CAAEC,KAAMnC,kCAA+BvB,EAAA2D,UAAA,cAOjDH,EAAA,CADCC,EAAS,CAAEC,KAAMnC,kCACJvB,EAAA2D,UAAA,eAOdH,EAAA,CADCC,EAAS,CAAEC,KAAMnC,kCACJvB,EAAA2D,UAAA,eAMcH,EAAA,CAA3BC,EAAS,CAAEC,KAAMH,kCAA2BvD,EAAA2D,UAAA,cA5DlC3D,EAAUwD,EAAA,CADtBI,EAAc,gBACF5D"}

package/dist/sky-flexcol/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-flexcol";

package/dist/sky-flexcol/index.js

@@ -0,0 +1 @@
+export * from './sky-flexcol.js';