@inglorious/ui 6.1.0 → 7.1.0

package/README.md

@@ -43,3 +43,35 @@ The public CSS exports are:
 - `@inglorious/ui/themes/material.css`
 - `@inglorious/ui/themes/bootstrap.css`
 - `@inglorious/ui/all.css`
+
+## Safe-area utilities
+
+The base styles also expose CSS variables and utility classes for iPhone notch and home-indicator safe areas.
+
+```css
+:root {
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+}
+```
+
+The following utility classes are available:
+
+```css
+.pt-safe {
+  padding-top: var(--safe-area-top);
+}
+.pb-safe {
+  padding-bottom: var(--safe-area-bottom);
+}
+.pl-safe {
+  padding-left: var(--safe-area-left);
+}
+.pr-safe {
+  padding-right: var(--safe-area-right);
+}
+```
+
+These are useful for mobile layouts that need to respect notches, rounded corners, and the home indicator. They are intentionally generic utilities so apps can opt into them without having to define custom safe-area values repeatedly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "6.1.0",
+  "version": "7.1.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -113,6 +113,16 @@
       "import": "./src/controls/switch/index.js"
     },
     "./switch.css": "./src/controls/switch/style.css",
+    "./textarea": {
+      "types": "./types/controls/textarea.d.ts",
+      "import": "./src/controls/textarea/index.js"
+    },
+    "./textarea.css": "./src/controls/textarea/style.css",
+    "./file-upload": {
+      "types": "./types/controls/file-upload.d.ts",
+      "import": "./src/controls/file-upload/index.js"
+    },
+    "./file-upload.css": "./src/controls/file-upload/style.css",
     "./card": {
       "types": "./types/surfaces/card.d.ts",
       "import": "./src/surfaces/card/index.js"
@@ -290,10 +300,10 @@
     "**/*.css"
   ],
   "peerDependencies": {
+    "@inglorious/charts": "10.0.0",
     "@inglorious/store": "11.0.0",
     "@inglorious/utils": "3.8.0",
-    "@inglorious/charts": "9.0.0",
-    "@inglorious/web": "6.3.0"
+    "@inglorious/web": "6.4.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.2.36",
@@ -308,10 +318,10 @@
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
     "@inglorious/eslint-config": "1.1.2",
-    "@inglorious/vite-plugin-vue": "1.0.1",
     "@inglorious/vite-plugin-jsx": "2.0.0",
     "@inglorious/store": "11.0.0",
-    "@inglorious/web": "6.3.0"
+    "@inglorious/vite-plugin-vue": "1.0.1",
+    "@inglorious/web": "6.4.0"
   },
   "engines": {
     "node": ">= 22"

package/src/controls/controls.css

@@ -10,3 +10,5 @@
 @import "./select/style.css";
 @import "./slider/style.css";
 @import "./switch/style.css";
+@import "./textarea/style.css";
+@import "./file-upload/style.css";

package/src/controls/file-upload/file-upload.stories.js

@@ -0,0 +1,93 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { FileUpload } from "./index.js"
+
+export default {
+  title: "Controls/FileUpload",
+  tags: ["autodocs"],
+  render: createRender(FileUpload),
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label rendered above the upload area.",
+    },
+    name: {
+      control: "text",
+      description: "Native HTML file input name attribute.",
+    },
+    accept: {
+      control: "text",
+      description: "Accepted file types, such as .pdf,.png,image/*.",
+    },
+    isMultiple: {
+      control: "boolean",
+      description: "Allows selecting multiple files.",
+    },
+    hint: {
+      control: "text",
+      description: "Helper text shown below the field when there is no error.",
+    },
+    error: {
+      control: "text",
+      description: "Validation message shown below the field.",
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "Disables user input and interaction.",
+    },
+    isRequired: {
+      control: "boolean",
+      description: "Marks the field as required.",
+    },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expands the upload area width to 100% of its container.",
+    },
+    selectedFiles: {
+      control: "object",
+      description: "Current list of selected file names for display.",
+    },
+    onChange: { action: "onChange" },
+    onBlur: { action: "onBlur" },
+    onFocus: { action: "onFocus" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Upload area for files with native input semantics, validation, and a clean drag-and-drop style.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  label: "Resume",
+  name: "resume",
+  accept: ".pdf,.doc,.docx",
+  isMultiple: false,
+  hint: "Upload your resume in PDF or DOC format.",
+  error: "",
+  isDisabled: false,
+  isRequired: false,
+  isFullWidth: false,
+  selectedFiles: [],
+  title: "Choose file",
+  description: "or drag and drop here",
+}
+
+export const Selected = {}
+Selected.args = {
+  ...Default.args,
+  label: "Attachments",
+  isMultiple: true,
+  selectedFiles: ["brief.pdf", "notes.md"],
+}
+
+export const Error = {}
+Error.args = {
+  ...Default.args,
+  label: "Invoice",
+  error: "Only PDF files under 5MB are allowed.",
+  selectedFiles: ["invoice.png"],
+}

package/src/controls/file-upload/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const FileUpload = { ...renderers }

package/src/controls/file-upload/style.css

@@ -0,0 +1,99 @@
+.iw-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-1);
+  font-family: var(--iw-font-family-sans);
+
+  &.iw-upload-full-width .iw-upload-field-box {
+    width: 100%;
+  }
+
+  .iw-upload-label {
+    font-size: var(--iw-font-size-sm);
+    font-weight: var(--iw-font-weight-normal);
+    color: var(--iw-color-text);
+  }
+
+  .iw-upload-required {
+    color: var(--iw-color-error);
+    margin-left: var(--iw-space-1);
+  }
+
+  .iw-upload-field-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 7rem;
+    padding: var(--iw-space-4);
+    border: 1px dashed var(--iw-input-border);
+    border-radius: var(--iw-input-radius);
+    background: var(--iw-input-bg);
+    color: var(--iw-color-text);
+    transition: all var(--iw-transition-fast);
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background: var(--iw-input-bg-hover);
+      border-color: var(--iw-input-border-hover);
+    }
+
+    &:focus-within {
+      border-color: var(--iw-input-border-focus);
+      box-shadow: var(--iw-input-shadow-focus);
+    }
+
+    &.iw-upload-field-error {
+      border-color: var(--iw-color-error);
+
+      &:focus-within {
+        border-color: var(--iw-color-error);
+        box-shadow: 0 0 0 1px var(--iw-color-error);
+      }
+    }
+  }
+
+  .iw-upload-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .iw-upload-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--iw-space-1);
+    pointer-events: none;
+    text-align: center;
+  }
+
+  .iw-upload-title {
+    font-weight: var(--iw-font-weight-medium);
+  }
+
+  .iw-upload-description {
+    color: var(--iw-color-text-muted);
+    font-size: var(--iw-font-size-sm);
+  }
+
+  .iw-upload-field-summary {
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text-muted);
+  }
+
+  .iw-upload-hint,
+  .iw-upload-error-message {
+    font-size: var(--iw-font-size-sm);
+    line-height: var(--iw-line-height-normal);
+  }
+
+  .iw-upload-hint {
+    color: var(--iw-color-text-muted);
+  }
+
+  .iw-upload-error-message {
+    color: var(--iw-color-error);
+  }
+}

package/src/controls/file-upload/template.js

@@ -0,0 +1,100 @@
+/**
+ * @typedef {import('../../../types/controls/file-upload').FileUploadProps} FileUploadProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * Renders a labeled file upload area with optional summary, hint, and error text.
+ * Supports drag-and-drop handling through file input semantics.
+ * @param {FileUploadProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    id,
+    name = "",
+    label,
+    hint,
+    error,
+    accept,
+    isMultiple = false,
+    isDisabled = false,
+    isRequired = false,
+    isFullWidth = false,
+    selectedFiles = [],
+    title = "Choose files",
+    description = "or drag and drop here",
+    onChange,
+    onBlur,
+    onFocus,
+    ...rest
+  } = props
+
+  const uploadId = id || name || "file-upload"
+
+  const wrapperClasses = {
+    "iw-upload": true,
+    "iw-upload-full-width": isFullWidth,
+    "iw-upload-disabled": isDisabled,
+    "iw-upload-has-error": !!error,
+  }
+
+  const fieldClasses = {
+    "iw-upload-field-box": true,
+    "iw-upload-field-error": !!error,
+  }
+
+  const summaryText =
+    selectedFiles.length > 0 ? selectedFiles.join(", ") : "No file selected"
+
+  return html`
+    <div class=${classMap(wrapperClasses)}>
+      ${label
+        ? html`
+            <label for=${uploadId} class="iw-upload-label">
+              ${label}
+              ${isRequired
+                ? html`<span class="iw-upload-required">*</span>`
+                : null}
+            </label>
+          `
+        : null}
+
+      <div class=${classMap(fieldClasses)}>
+        <input
+          id=${uploadId}
+          name=${name}
+          type="file"
+          accept=${accept ?? ""}
+          ?multiple=${isMultiple}
+          ?disabled=${isDisabled}
+          ?required=${isRequired}
+          class="iw-upload-input"
+          @change=${(event) => onChange?.(event.target.files)}
+          @blur=${onBlur}
+          @focus=${onFocus}
+          ${ref((element) => applyElementProps(element, rest))}
+        />
+
+        <div class="iw-upload-content">
+          <span class="iw-upload-title">${title}</span>
+          <span class="iw-upload-description">${description}</span>
+        </div>
+      </div>
+
+      <div class="iw-upload-field-summary">${summaryText}</div>
+
+      ${error
+        ? html`<span class="iw-upload-error-message">${error}</span>`
+        : hint
+          ? html`<span class="iw-upload-hint">${hint}</span>`
+          : null}
+    </div>
+  `
+}

package/src/controls/input/input.stories.js

@@ -1,12 +1,45 @@
+import { html } from "@inglorious/web"
+
 import { createRender } from "../../stories/notifyStory.js"
 import { Input } from "."
 
+const nativeInputTypes = [
+  "text",
+  "password",
+  "email",
+  "number",
+  "tel",
+  "url",
+  "search",
+  "date",
+  "time",
+  "datetime-local",
+  "month",
+  "week",
+  "color",
+]
+
+const nativeInputDefaults = {
+  text: { label: "Text", value: "Hello world" },
+  password: { label: "Password", value: "secret123" },
+  email: { label: "Email", value: "you@example.com" },
+  number: { label: "Number", value: "42" },
+  tel: { label: "Phone", value: "+1 555 123 4567" },
+  url: { label: "Website", value: "https://example.com" },
+  search: { label: "Search", value: "inglorious" },
+  date: { label: "Date", value: "2026-08-10" },
+  time: { label: "Time", value: "09:30" },
+  "datetime-local": { label: "Date and time", value: "2026-08-10T09:30" },
+  month: { label: "Month", value: "2026-08" },
+  week: { label: "Week", value: "2026-W32" },
+  color: { label: "Color", value: "#7c3aed" },
+}
+
 export default {
   title: "Controls/Input",
   tags: ["autodocs"],
   render: createRender(Input),
   argTypes: {
-    // ...notifyActionArgType,
     label: {
       control: "text",
       description: "Field label rendered above the input.",
@@ -19,9 +52,9 @@ export default {
       control: "text",
       description: "Native HTML input name attribute.",
     },
-    type: {
+    inputType: {
       control: "select",
-      options: ["text", "email", "password", "number", "tel", "url", "search"],
+      options: nativeInputTypes,
       description: "Native HTML input type.",
     },
     inputmode: {
@@ -101,6 +134,28 @@ Default.args = {
   isFullWidth: false,
 }
 
+export const ManagedNativeTypes = {
+  render: (args) => html`
+    <div style="display: grid; gap: 1rem; max-width: 40rem;">
+      ${nativeInputTypes.map((inputType) =>
+        Input.render({
+          ...args,
+          ...nativeInputDefaults[inputType],
+          name: `${inputType}-field`,
+          label: nativeInputDefaults[inputType].label,
+          inputType,
+          value: nativeInputDefaults[inputType].value,
+        }),
+      )}
+    </div>
+  `,
+}
+
+ManagedNativeTypes.args = {
+  ...Default.args,
+  label: "Managed native types",
+}
+
 export const WithHint = {}
 WithHint.args = {
   ...Default.args,
@@ -179,3 +234,55 @@ Number.args = {
   inputmode: "decimal",
   "data-testid": "amount-input",
 }
+
+export const Date = {}
+Date.args = {
+  ...Default.args,
+  label: "Date",
+  inputType: "date",
+  value: "2026-08-10",
+  min: "2024-01-01",
+  max: "2027-12-31",
+}
+
+export const Time = {}
+Time.args = {
+  ...Default.args,
+  label: "Time",
+  inputType: "time",
+  value: "09:30",
+  min: "08:00",
+  max: "18:00",
+}
+
+export const DateTimeLocal = {}
+DateTimeLocal.args = {
+  ...Default.args,
+  label: "Date and time",
+  inputType: "datetime-local",
+  value: "2026-08-10T09:30",
+}
+
+export const Month = {}
+Month.args = {
+  ...Default.args,
+  label: "Month",
+  inputType: "month",
+  value: "2026-08",
+}
+
+export const Week = {}
+Week.args = {
+  ...Default.args,
+  label: "Week",
+  inputType: "week",
+  value: "2026-W32",
+}
+
+export const Color = {}
+Color.args = {
+  ...Default.args,
+  label: "Color",
+  inputType: "color",
+  value: "#7c3aed",
+}

package/src/controls/textarea/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const Textarea = { ...renderers }

package/src/controls/textarea/style.css

@@ -0,0 +1,98 @@
+.iw-textarea-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-1);
+  font-family: var(--iw-font-family-sans);
+
+  &.iw-textarea-full-width .iw-textarea {
+    width: 100%;
+  }
+
+  .iw-textarea-label {
+    font-size: var(--iw-font-size-sm);
+    font-weight: var(--iw-font-weight-normal);
+    color: var(--iw-color-text);
+  }
+
+  .iw-textarea-required {
+    color: var(--iw-color-error);
+    margin-left: var(--iw-space-1);
+  }
+
+  .iw-textarea {
+    min-height: 3rem;
+    width: min(100%, 100%);
+    resize: none;
+    padding: var(--iw-space-2) var(--iw-space-3);
+    font-family: inherit;
+    font-size: var(--iw-font-size-base);
+    line-height: 1.5;
+    color: var(--iw-input-text);
+    background-color: var(--iw-input-bg);
+    border: 1px solid var(--iw-input-border);
+    border-radius: var(--iw-input-radius);
+    outline: none;
+    transition: all var(--iw-transition-fast);
+
+    &::placeholder {
+      color: var(--iw-input-text-placeholder);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--iw-input-bg-hover);
+      border-color: var(--iw-input-border-hover);
+    }
+
+    &:focus:not(:disabled) {
+      background-color: var(--iw-input-bg-focus);
+      border-color: var(--iw-input-border-focus);
+      box-shadow: var(--iw-input-shadow-focus);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &.iw-textarea-auto-size {
+      field-sizing: content;
+    }
+
+    &.iw-textarea-resizable {
+      resize: vertical;
+    }
+
+    &.iw-textarea-error {
+      border-color: var(--iw-color-error);
+
+      &:focus {
+        border-color: var(--iw-color-error);
+        box-shadow: 0 0 0 1px var(--iw-color-error);
+      }
+    }
+
+    &.iw-textarea-sm {
+      padding: var(--iw-space-1) var(--iw-space-2);
+      font-size: var(--iw-font-size-sm);
+    }
+
+    &.iw-textarea-lg {
+      padding: var(--iw-space-3) var(--iw-space-4);
+      font-size: var(--iw-font-size-lg);
+    }
+  }
+
+  .iw-textarea-hint,
+  .iw-textarea-error-message {
+    font-size: var(--iw-font-size-sm);
+    line-height: var(--iw-line-height-normal);
+  }
+
+  .iw-textarea-hint {
+    color: var(--iw-color-text-muted);
+  }
+
+  .iw-textarea-error-message {
+    color: var(--iw-color-error);
+  }
+}

package/src/controls/textarea/template.js

@@ -0,0 +1,94 @@
+/**
+ * @typedef {import('../../../types/controls/textarea').TextareaProps} TextareaProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * Renders a labeled textarea field with optional hint and error messaging.
+ * Supports disabled/readonly/required states and emits `onChange` on input.
+ * @param {TextareaProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    id,
+    name = "",
+    value = "",
+    placeholder = "",
+    label,
+    hint,
+    error,
+    size = "md",
+    rows = 4,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    isFullWidth = false,
+    isAutoSize = false,
+    isResizable = false,
+    onChange,
+    onBlur,
+    onFocus,
+    ...rest
+  } = props
+
+  const textareaId = id || name
+
+  const wrapperClasses = {
+    "iw-textarea-field": true,
+    "iw-textarea-full-width": isFullWidth,
+    "iw-textarea-disabled": isDisabled,
+    "iw-textarea-has-error": !!error,
+  }
+
+  const textareaClasses = {
+    "iw-textarea": true,
+    [`iw-textarea-${size}`]: size !== "md",
+    "iw-textarea-error": !!error,
+    "iw-textarea-auto-size": isAutoSize,
+    "iw-textarea-resizable": isResizable,
+  }
+
+  return html`
+    <div class=${classMap(wrapperClasses)}>
+      ${label
+        ? html`
+            <label for=${textareaId} class="iw-textarea-label">
+              ${label}
+              ${isRequired
+                ? html`<span class="iw-textarea-required">*</span>`
+                : null}
+            </label>
+          `
+        : null}
+
+      <textarea
+        id=${textareaId}
+        name=${name}
+        rows=${rows}
+        .value=${value}
+        placeholder=${placeholder}
+        ?disabled=${isDisabled}
+        ?readonly=${isReadOnly}
+        ?required=${isRequired}
+        class=${classMap(textareaClasses)}
+        @input=${(event) => onChange?.(event.target.value)}
+        @blur=${onBlur}
+        @focus=${onFocus}
+        ${ref((element) => applyElementProps(element, rest))}
+      ></textarea>
+
+      ${error
+        ? html`<span class="iw-textarea-error-message">${error}</span>`
+        : hint
+          ? html`<span class="iw-textarea-hint">${hint}</span>`
+          : null}
+    </div>
+  `
+}

package/src/controls/textarea/textarea.stories.js

@@ -0,0 +1,158 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { Textarea } from "."
+
+export default {
+  title: "Controls/Textarea",
+  tags: ["autodocs"],
+  render: createRender(Textarea),
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label rendered above the textarea.",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text shown when value is empty.",
+    },
+    name: {
+      control: "text",
+      description: "Native HTML textarea name attribute.",
+    },
+    value: {
+      control: "text",
+      description: "Current textarea value.",
+    },
+    hint: {
+      control: "text",
+      description: "Helper text shown below the field when there is no error.",
+    },
+    error: {
+      control: "text",
+      description: "Validation message shown below the field.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Size scale for internal spacing and typography.",
+    },
+    rows: {
+      control: "number",
+      description: "Initial number of visible text rows.",
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "Disables user input and interaction.",
+    },
+    isReadOnly: {
+      control: "boolean",
+      description: "Prevents editing while keeping the control focusable.",
+    },
+    isRequired: {
+      control: "boolean",
+      description: "Marks the field as required.",
+    },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expands the textarea width to 100% of its container.",
+    },
+    isAutoSize: {
+      control: "boolean",
+      description:
+        "Applies field-sizing: content so the textarea grows with its content.",
+    },
+    isResizable: {
+      control: "boolean",
+      description: "Enables the browser resize handle for vertical resizing.",
+    },
+    onChange: { action: "onChange" },
+    onBlur: { action: "onBlur" },
+    onFocus: { action: "onFocus" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Multi-line text input with labels, hints, errors, and automatic content sizing support.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  label: "Bio",
+  placeholder: "Tell us a little about yourself",
+  name: "bio",
+  value: "",
+  hint: "",
+  error: "",
+  size: "md",
+  rows: 4,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  isFullWidth: false,
+  isAutoSize: false,
+  isResizable: false,
+}
+
+export const WithHint = {}
+WithHint.args = {
+  ...Default.args,
+  label: "Project notes",
+  hint: "Include any implementation details or blockers.",
+}
+
+export const WithError = {}
+WithError.args = {
+  ...Default.args,
+  label: "Description",
+  value: "This is too long",
+  error: "Please keep the description under 280 characters.",
+}
+
+export const Required = {}
+Required.args = {
+  ...Default.args,
+  label: "Message",
+  placeholder: "Write a quick message",
+  isRequired: true,
+}
+
+export const Disabled = {}
+Disabled.args = {
+  ...Default.args,
+  label: "Disabled textarea",
+  isDisabled: true,
+  value: "Cannot edit this value",
+}
+
+export const Readonly = {}
+Readonly.args = {
+  ...Default.args,
+  label: "Read-only textarea",
+  isReadOnly: true,
+  value: "This field is read-only and not editable.",
+}
+
+export const Small = {}
+Small.args = {
+  ...Default.args,
+  label: "Small textarea",
+  size: "sm",
+}
+
+export const Large = {}
+Large.args = {
+  ...Default.args,
+  label: "Large textarea",
+  size: "lg",
+}
+
+export const FullWidth = {}
+FullWidth.args = {
+  ...Default.args,
+  label: "Full width textarea",
+  placeholder: "This textarea takes the full width of its container",
+  isFullWidth: true,
+}

package/src/examples/dashboard/app-drawer.js

@@ -147,6 +147,12 @@ function getDefaultItems() {
           href: "/controls/icon-button",
         },
         { id: "input", primary: "Input", href: "/controls/input" },
+        {
+          id: "file-upload",
+          primary: "File Upload",
+          href: "/controls/file-upload",
+        },
+        { id: "textarea", primary: "Textarea", href: "/controls/textarea" },
         {
           id: "radio-group",
           primary: "Radio Group",

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

@@ -6,6 +6,7 @@ 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"
@@ -13,6 +14,7 @@ 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"
@@ -514,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:

package/src/index.js

@@ -9,6 +9,8 @@ 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"

package/src/styles/base.css

@@ -1,2 +1,3 @@
 @import "./reset.css";
+@import "./safe-area.css";
 @import "./tokens.css";

package/src/styles/safe-area.css

@@ -0,0 +1,22 @@
+:root {
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+}
+
+.pt-safe {
+  padding-top: var(--safe-area-top);
+}
+
+.pb-safe {
+  padding-bottom: var(--safe-area-bottom);
+}
+
+.pl-safe {
+  padding-left: var(--safe-area-left);
+}
+
+.pr-safe {
+  padding-right: var(--safe-area-right);
+}

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/index.d.ts

@@ -18,6 +18,8 @@ export type { RatingProps, RatingType } from "./controls/rating"
 export type { SelectProps, SelectType, SelectOption } from "./controls/select"
 export type { SliderProps, SliderType } from "./controls/slider"
 export type { SwitchProps, SwitchType } from "./controls/switch"
+export type { TextareaProps, TextareaType } from "./controls/textarea"
+export type { FileUploadProps, FileUploadType } from "./controls/file-upload"
 export type { ContainerProps, ContainerType } from "./layout/container"
 export type { FlexProps, FlexType } from "./layout/flex"
 export type { GridProps, GridType } from "./layout/grid"