@inglorious/ui 6.0.0 → 7.0.0

package/src/examples/dashboard/before-after-data.js

@@ -0,0 +1,29 @@
+// Self-contained demo images for the Before/After control, so the dashboard
+// renders the comparison without any network requests.
+
+const svg = (label, from, to) =>
+  "data:image/svg+xml," +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540">
+      <defs>
+        <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stop-color="${from}"/>
+          <stop offset="1" stop-color="${to}"/>
+        </linearGradient>
+      </defs>
+      <rect width="960" height="540" fill="url(#g)"/>
+      <text x="48" y="496" font-family="sans-serif" font-size="72" font-weight="700"
+            fill="rgba(255,255,255,0.92)">${label}</text>
+    </svg>`,
+  )
+
+export const beforeAfterImages = {
+  before: {
+    src: svg("BEFORE", "#9ca3af", "#374151"),
+    alt: "Before — grayscale",
+  },
+  after: {
+    src: svg("AFTER", "#22d3ee", "#4f46e5"),
+    alt: "After — color graded",
+  },
+}

package/src/examples/dashboard/primitive-content.js

@@ -1,10 +1,12 @@
-import { html } from "@inglorious/web"
+import { createStore } from "@inglorious/store"
+import { html, mount } from "@inglorious/web"
 
 import { Button } from "../../controls/button/index.js"
 import { ButtonGroup } from "../../controls/button-group/index.js"
 import { Checkbox } from "../../controls/checkbox/index.js"
 import { Combobox } from "../../controls/combobox/index.js"
 import { Fab } from "../../controls/fab/index.js"
+import { FileUpload } from "../../controls/file-upload/index.js"
 import { IconButton } from "../../controls/icon-button/index.js"
 import { Input } from "../../controls/input/index.js"
 import { RadioGroup } from "../../controls/radio-group/index.js"
@@ -12,8 +14,11 @@ import { Rating } from "../../controls/rating/index.js"
 import { Select } from "../../controls/select/index.js"
 import { Slider } from "../../controls/slider/index.js"
 import { Switch } from "../../controls/switch/index.js"
+import { Textarea } from "../../controls/textarea/index.js"
 import { Avatar } from "../../data-display/avatar/index.js"
 import { Badge } from "../../data-display/badge/index.js"
+import { BeforeAfter } from "../../data-display/before-after/index.js"
+import { Carousel } from "../../data-display/carousel/index.js"
 import { Chip } from "../../data-display/chip/index.js"
 import { DataGrid } from "../../data-display/data-grid/index.js"
 import { Divider } from "../../data-display/divider/index.js"
@@ -45,6 +50,7 @@ import { Accordion } from "../../surfaces/accordion/index.js"
 import { AppBar } from "../../surfaces/app-bar/index.js"
 import { Card } from "../../surfaces/card/index.js"
 import { Paper } from "../../surfaces/paper/index.js"
+import { beforeAfterImages } from "./before-after-data.js"
 
 const categoryMeta = {
   layout: {
@@ -102,6 +108,48 @@ const previewRow = (children) =>
 const previewColumn = (children) =>
   html`<div class="iw-primitive-preview-column">${children}</div>`
 
+const livePreviews = new Map()
+
+/**
+ * Entity-driven primitives render their controls from state, so a preview
+ * without a store freezes: a carousel arrow would recompute from the same page
+ * forever, and a dragged divider would never move. Give each one its own store,
+ * created once and reused on every re-render so the preview keeps its state.
+ * @param {Object.<string, any>} types
+ * @param {Object.<string, any>} entity
+ * @returns {HTMLElement}
+ */
+function livePreview(types, entity) {
+  if (!livePreviews.has(entity.id)) {
+    const container = document.createElement("div")
+    // The mount needs an element, but it must not become a box of its own:
+    // as a flex item it would shrink and take the primitive down with it.
+    container.style.display = "contents"
+
+    const store = createStore({ types, entities: { [entity.id]: entity } })
+    mount(store, (api) => api.render(entity.id), container)
+    livePreviews.set(entity.id, container)
+  }
+
+  return livePreviews.get(entity.id)
+}
+
+const carouselSlides = [
+  "#22d3ee",
+  "#4f46e5",
+  "#f59e0b",
+  "#10b981",
+  "#ef4444",
+].map(
+  (color, index) =>
+    html`<div
+      style="display:grid;place-items:center;height:14rem;border-radius:0.5rem;
+             background:${color};color:#fff;font:700 2rem sans-serif;"
+    >
+      ${index + 1}
+    </div>`,
+)
+
 const primitiveDetailsByPath = {
   "/layout/container": {
     summary: "Constrains content width and applies consistent gutters.",
@@ -195,6 +243,38 @@ Grid.render({
         }),
     },
   },
+  "/data-display/carousel": {
+    summary: "Scroll-snapping carousel with arrows and pagination dots.",
+    description:
+      "Carousel lays items out in a scroll-snapping viewport: swiping, momentum and snapping come from the browser, while the current page is the only piece of entity state. Arrows and indicators are overridable sub-renders.",
+    useCases: ["Image galleries", "Feature tours", "Onboarding slides"],
+    example: {
+      code: `import { Carousel } from "@inglorious/ui/carousel"
+
+Carousel.render({
+  id: "demo",
+  label: "Example carousel",
+  items: [slideOne, slideTwo, slideThree],
+  page: 0,
+  gap: "md",
+  isFullWidth: true
+})`,
+      preview: () =>
+        livePreview(
+          { Carousel },
+          {
+            id: "carousel",
+            type: "Carousel",
+            label: "Example carousel",
+            items: carouselSlides,
+            page: 0,
+            gap: "md",
+            isInfinite: true,
+            isFullWidth: true,
+          },
+        ),
+    },
+  },
   "/controls/button": {
     summary: "Action trigger with variants, colors, and shapes.",
     description:
@@ -280,6 +360,36 @@ Checkbox.render({
         ]),
     },
   },
+  "/data-display/before-after": {
+    name: "Before / After",
+    summary: "Drag-to-compare slider for two overlaid images.",
+    description:
+      "Before/After overlays two images and reveals the top one with a draggable divider. The reveal is pure CSS (clip-path) and the divider position is the only piece of entity state; the divider and handle follow the active theme and color mode.",
+    useCases: ["Image comparisons", "Before/after edits", "Visual diffs"],
+    example: {
+      code: `import { BeforeAfter } from "@inglorious/ui/before-after"
+
+BeforeAfter.render({
+  id: "demo",
+  before: { src: "before.jpg", alt: "Before" },
+  after: { src: "after.jpg", alt: "After" },
+  position: 50,
+  isFullWidth: true
+})`,
+      preview: () =>
+        livePreview(
+          { BeforeAfter },
+          {
+            id: "beforeAfter",
+            type: "BeforeAfter",
+            before: beforeAfterImages.before,
+            after: beforeAfterImages.after,
+            position: 50,
+            isFullWidth: true,
+          },
+        ),
+    },
+  },
   "/controls/combobox": {
     summary: "Searchable dropdown with multi-select and tag support.",
     description:
@@ -304,21 +414,26 @@ Combobox.render({
   selectedValue: ["inglorious"]
 })`,
       preview: () =>
-        Combobox.render({
-          label: "Frameworks",
-          placeholder: "Select frameworks...",
-          isMulti: true,
-          isSearchable: true,
-          isClearable: true,
-          options: [
-            { label: "React", value: "react" },
-            { label: "Angular", value: "angular" },
-            { label: "Vue", value: "vue" },
-            { label: "Svelte", value: "svelte" },
-            { label: "Inglorious", value: "inglorious" },
-          ],
-          selectedValue: ["inglorious"],
-        }),
+        livePreview(
+          { Combobox },
+          {
+            id: "combobox",
+            type: "Combobox",
+            label: "Frameworks",
+            placeholder: "Select frameworks...",
+            isMulti: true,
+            isSearchable: true,
+            isClearable: true,
+            options: [
+              { label: "React", value: "react" },
+              { label: "Angular", value: "angular" },
+              { label: "Vue", value: "vue" },
+              { label: "Svelte", value: "svelte" },
+              { label: "Inglorious", value: "inglorious" },
+            ],
+            selectedValue: ["inglorious"],
+          },
+        ),
     },
   },
   "/controls/fab": {
@@ -401,6 +516,73 @@ Input.render({
         ]),
     },
   },
+  "/controls/file-upload": {
+    summary:
+      "File selection area for uploads, attachments, and drag-and-drop flows.",
+    description:
+      "FileUpload wraps the native file input in a clearer interaction area while preserving validation, hints, and selected file summaries.",
+    useCases: ["Attachments", "Bulk upload", "Resume and invoice submissions"],
+    example: {
+      code: `import { FileUpload } from "@inglorious/ui/file-upload"
+
+FileUpload.render({
+  label: "Resume",
+  accept: ".pdf,.doc,.docx",
+  selectedFiles: ["resume.pdf"],
+  hint: "PDF or DOCX up to 5MB"
+})`,
+      preview: () =>
+        previewColumn([
+          FileUpload.render({
+            label: "Resume",
+            accept: ".pdf,.doc,.docx",
+            selectedFiles: ["resume.pdf"],
+            hint: "PDF or DOCX up to 5MB",
+          }),
+          FileUpload.render({
+            label: "Attachments",
+            isMultiple: true,
+            selectedFiles: ["brief.pdf", "notes.md"],
+          }),
+        ]),
+    },
+  },
+  "/controls/textarea": {
+    summary: "Multi-line text entry with validation and auto-sizing support.",
+    description:
+      "Textarea is built for longer responses and keeps its height aligned with the content while supporting helper text and validation states.",
+    useCases: [
+      "Message bodies",
+      "Long-form notes",
+      "Descriptions and feedback",
+    ],
+    example: {
+      code: `import { Textarea } from "@inglorious/ui/textarea"
+
+Textarea.render({
+  label: "Project details",
+  placeholder: "Describe the scope and constraints",
+  rows: 4,
+  hint: "A few sentences are enough"
+})`,
+      preview: () =>
+        previewColumn([
+          Textarea.render({
+            label: "Project details",
+            placeholder: "Describe the scope and constraints",
+            rows: 4,
+            hint: "A few sentences are enough",
+            value: "",
+          }),
+          Textarea.render({
+            label: "Notes",
+            value:
+              "The migration is nearly complete and we're validating the edge cases.",
+            error: "Please keep it under 280 characters.",
+          }),
+        ]),
+    },
+  },
   "/controls/radio-group": {
     summary: "Single-choice selection among visible options.",
     description:
@@ -590,23 +772,28 @@ DataGrid.render({
   pagination: { page: 0, pageSize: 3, pageSizes: [3, 6] }
 })`,
       preview: () =>
-        DataGrid.render({
-          rowId: "id",
-          columns: [
-            { id: "id", title: "ID", type: "number", isSortable: true },
-            { id: "name", title: "Name" },
-            { id: "status", title: "Status" },
-          ],
-          rows: [
-            { id: 1, name: "Alpha", status: "Active" },
-            { id: 2, name: "Beta", status: "Paused" },
-            { id: 3, name: "Gamma", status: "Active" },
-          ],
-          filters: {},
-          sorts: [],
-          selection: [],
-          pagination: { page: 0, pageSize: 3, pageSizes: [3, 6] },
-        }),
+        livePreview(
+          { DataGrid },
+          {
+            id: "dataGrid",
+            type: "DataGrid",
+            rowId: "id",
+            columns: [
+              { id: "id", title: "ID", type: "number", isSortable: true },
+              { id: "name", title: "Name" },
+              { id: "status", title: "Status" },
+            ],
+            rows: [
+              { id: 1, name: "Alpha", status: "Active" },
+              { id: 2, name: "Beta", status: "Paused" },
+              { id: 3, name: "Gamma", status: "Active" },
+            ],
+            filters: {},
+            sorts: [],
+            selection: [],
+            pagination: { page: 0, pageSize: 3, pageSizes: [3, 6] },
+          },
+        ),
     },
   },
   "/data-display/divider": {

package/src/index.js

@@ -9,8 +9,12 @@ export { Rating } from "./controls/rating/index.js"
 export { Select } from "./controls/select/index.js"
 export { Slider } from "./controls/slider/index.js"
 export { Switch } from "./controls/switch/index.js"
+export { Textarea } from "./controls/textarea/index.js"
+export { FileUpload } from "./controls/file-upload/index.js"
 export { Avatar } from "./data-display/avatar/index.js"
 export { Badge } from "./data-display/badge/index.js"
+export { BeforeAfter } from "./data-display/before-after/index.js"
+export { Carousel } from "./data-display/carousel/index.js"
 export { Chip } from "./data-display/chip/index.js"
 export { DataGrid } from "./data-display/data-grid/index.js"
 export { Divider } from "./data-display/divider/index.js"

package/src/layout/flex/flex.stories.js

@@ -38,6 +38,12 @@ export default {
       options: ["none", "sm", "md", "lg", "xl"],
       description: "Inner padding for the flex container.",
     },
+    overflow: {
+      control: "select",
+      options: ["visible", "hidden", "clip", "scroll", "auto"],
+      description:
+        "Overflow behavior. Scrollable values also release flex minimum dimensions.",
+    },
     element: {
       control: "select",
       options: [
@@ -84,6 +90,7 @@ Default.args = {
   align: "stretch",
   gap: "md",
   padding: "none",
+  overflow: "visible",
   element: "div",
   isInline: false,
   isFullWidth: false,
@@ -119,3 +126,45 @@ Wrapped.args = {
     html`<div>Six</div>`,
   ],
 }
+
+export const ScrollableContent = {}
+ScrollableContent.args = {
+  direction: "column",
+  element: "section",
+  overflow: "hidden",
+  className: "iw-flex-scrollable-story",
+  style: { height: "24rem", border: "1px solid var(--iw-color-border)" },
+  children: [
+    Flex.render({
+      element: "header",
+      padding: "md",
+      style: {
+        flex: "0 0 3.5rem",
+        background: "var(--iw-color-surface)",
+      },
+      children: ["Fixed header"],
+    }),
+    Flex.render({
+      element: "main",
+      direction: "column",
+      overflow: "auto",
+      padding: "md",
+      style: { flex: "1 1 0" },
+      children: [
+        html`<div style="min-height: 48rem">
+          This content is intentionally taller than the available space. The
+          header and footer stay visible while this main area scrolls.
+        </div>`,
+      ],
+    }),
+    Flex.render({
+      element: "footer",
+      padding: "md",
+      style: {
+        flex: "0 0 3.5rem",
+        background: "var(--iw-color-surface)",
+      },
+      children: ["Fixed footer"],
+    }),
+  ],
+}

package/src/layout/flex/style.css

@@ -120,4 +120,63 @@
   &.iw-flex-padding-xl {
     padding: var(--iw-space-8);
   }
+
+  /* A flex item needs both minimum dimensions released before either axis can
+     overflow instead of expanding its parent. */
+  &.iw-flex-overflow-auto,
+  &.iw-flex-overflow-scroll,
+  &.iw-flex-overflow-hidden,
+  &.iw-flex-overflow-clip {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &.iw-flex-overflow-auto {
+    overflow: auto;
+  }
+
+  &.iw-flex-overflow-scroll {
+    overflow: scroll;
+  }
+
+  &.iw-flex-overflow-hidden {
+    overflow: hidden;
+  }
+
+  &.iw-flex-overflow-clip {
+    overflow: clip;
+  }
+
+  &.iw-flex-overflow-visible {
+    overflow: visible;
+  }
+
+  &.iw-flex-overflow-auto,
+  &.iw-flex-overflow-scroll {
+    scrollbar-color: var(--iw-color-text-muted) var(--iw-color-surface-hover);
+    scrollbar-width: thin;
+  }
+
+  &.iw-flex-overflow-auto::-webkit-scrollbar,
+  &.iw-flex-overflow-scroll::-webkit-scrollbar {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  &.iw-flex-overflow-auto::-webkit-scrollbar-track,
+  &.iw-flex-overflow-scroll::-webkit-scrollbar-track {
+    background: var(--iw-color-surface-hover);
+  }
+
+  &.iw-flex-overflow-auto::-webkit-scrollbar-thumb,
+  &.iw-flex-overflow-scroll::-webkit-scrollbar-thumb {
+    border: 0.125rem solid var(--iw-color-surface-hover);
+    border-radius: var(--iw-radius-full);
+    background: var(--iw-color-text-muted);
+  }
+
+  &.iw-flex-overflow-auto::-webkit-scrollbar-thumb:hover,
+  &.iw-flex-overflow-scroll::-webkit-scrollbar-thumb:hover {
+    background: var(--iw-color-text-secondary);
+  }
 }

package/src/layout/flex/template.js

@@ -24,6 +24,7 @@ export function render(props) {
     align = "stretch",
     gap = "none",
     padding = "none",
+    overflow = "visible",
     isInline = false,
     isFullWidth = false,
     className = "",
@@ -49,6 +50,7 @@ export function render(props) {
     [`iw-flex-align-${align}`]: true,
     [`iw-flex-gap-${gap}`]: true,
     [`iw-flex-padding-${padding}`]: true,
+    [`iw-flex-overflow-${overflow}`]: true,
     ...extraClasses,
   }
 

package/types/controls/file-upload.d.ts

@@ -0,0 +1,27 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface FileUploadProps {
+  id?: string
+  name?: string
+  label?: string
+  hint?: string
+  error?: string
+  accept?: string
+  isMultiple?: boolean
+  isDisabled?: boolean
+  isRequired?: boolean
+  isFullWidth?: boolean
+  selectedFiles?: string[]
+  title?: string
+  description?: string
+  onChange?: (files: FileList | null) => void
+  onBlur?: () => void
+  onFocus?: () => void
+  [key: string]: unknown
+}
+
+export interface FileUploadType {
+  render(props: FileUploadProps): TemplateResult
+}
+
+export declare const FileUpload: FileUploadType

package/types/controls/input.d.ts

@@ -11,6 +11,12 @@ export interface InputProps {
     | "tel"
     | "url"
     | "search"
+    | "date"
+    | "time"
+    | "datetime-local"
+    | "month"
+    | "week"
+    | "color"
   value?: string
   placeholder?: string
   label?: string

package/types/controls/textarea.d.ts

@@ -0,0 +1,29 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface TextareaProps {
+  id?: string
+  name?: string
+  value?: string
+  placeholder?: string
+  label?: string
+  hint?: string
+  error?: string
+  size?: "sm" | "md" | "lg"
+  rows?: number
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  isFullWidth?: boolean
+  isAutoSize?: boolean
+  isResizable?: boolean
+  onChange?: (value: string) => void
+  onBlur?: () => void
+  onFocus?: () => void
+  [key: string]: unknown
+}
+
+export interface TextareaType {
+  render(props: TextareaProps): TemplateResult
+}
+
+export declare const Textarea: TextareaType

package/types/controls/upload-field.d.ts

@@ -0,0 +1,27 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface FileUploadProps {
+  id?: string
+  name?: string
+  label?: string
+  hint?: string
+  error?: string
+  accept?: string
+  multiple?: boolean
+  isDisabled?: boolean
+  isRequired?: boolean
+  isFullWidth?: boolean
+  selectedFiles?: string[]
+  title?: string
+  description?: string
+  onChange?: (files: FileList | null) => void
+  onBlur?: () => void
+  onFocus?: () => void
+  [key: string]: unknown
+}
+
+export interface FileUploadType {
+  render(props: FileUploadProps): TemplateResult
+}
+
+export declare const FileUpload: FileUploadType

package/types/data-display/before-after.d.ts

@@ -0,0 +1,39 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface BeforeAfterImage {
+  src: string
+  alt?: string
+}
+
+export interface BeforeAfterProps {
+  id?: string
+  type?: string
+  label?: string
+
+  before?: BeforeAfterImage | null
+  after?: BeforeAfterImage | null
+
+  /** Divider location as a percentage (0-100). The only persistent state. */
+  position?: number
+  /** Keyboard increment, in percent, for arrow keys. */
+  step?: number
+
+  isDisabled?: boolean
+  isFullWidth?: boolean
+
+  onPositionChange?: (position: number) => void
+  [key: string]: unknown
+}
+
+export interface BeforeAfterType {
+  create(entity: BeforeAfterProps): void
+  positionChange(entity: BeforeAfterProps, position: number): void
+  render(entity: BeforeAfterProps, api: Api): TemplateResult
+  renderBeforeAfter(props: BeforeAfterProps): TemplateResult
+  renderBefore(props: BeforeAfterProps): TemplateResult
+  renderAfter(props: BeforeAfterProps): TemplateResult
+  renderDivider(props: BeforeAfterProps): TemplateResult
+  renderHandle(props: BeforeAfterProps): TemplateResult
+}
+
+export declare const BeforeAfter: BeforeAfterType