WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

feat(ui): own responsive marketing layout APIs
Quality / quality (windows-latest) (push) Waiting to run
Details
Quality / quality (ubuntu-latest) (push) Failing after 10m42s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-24 19:44:26 +05:30
parent 3b402b4e36
commit f9e285b182
15 changed files with 589 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/COMPONENTS.md
+11 -11
View File
@@ -146,7 +146,7 @@ Theme-aware, responsive button group component.
Group related content in a responsive themed surface with title, description, content, and supporting slots.
- Mount: `data-component="Card"`
- Props: `title: string = "Card title"`, `titleKey: string = ""`, `subtitle: string = ""`, `subtitleKey: string = ""`, `description: string = ""`, `descriptionKey: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionLabelKey: string = ""`, `actionHref: string = ""`, `headerActions: unknown[] = []`, `navigation: unknown[] = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: unknown[] = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""`
- Props: `title: string = ""`, `icon: string = ""`, `titleKey: string = ""`, `subtitle: string = ""`, `subtitleKey: string = ""`, `description: string = ""`, `descriptionKey: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionLabelKey: string = ""`, `actionHref: string = ""`, `headerActions: unknown[] = []`, `navigation: unknown[] = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: unknown[] = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `radius: string = "default"`, `shadow: string = "default"`, `equalHeight: boolean = false`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""`
- Slots: `default`
- Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `navigate({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)`
@@ -337,7 +337,7 @@ Reusable portal dashboard component.
Reusable preference switcher component.
- Mount: `data-component="PreferenceSwitcher"`
- Props: `size: string = "default"`, `color: string = "primary"`, `themeLabel: string = "Theme"`, `colorLabel: string = "Accent color"`, `languageLabel: string = "Language"`, `languages: string = [`, `colors: string = [`, `compact: boolean = true`, `class: string = ""`
- Props: `size: string = "default"`, `color: string = "primary"`, `themeLabel: string = "Theme"`, `colorLabel: string = "Accent color"`, `languageLabel: string = "Language"`, `languages: string = [`, `colors: string = [`, `compact: boolean = true`, `iconOnly: boolean = true`, `themeIcon: string = "icon-[lucide--sun-moon]"`, `colorIcon: string = "icon-[lucide--palette]"`, `languageIcon: string = "icon-[lucide--languages]"`, `panelPlacement: string = "bottom-end"`, `mobilePanel: string = "dropdown"`, `showCurrentLanguage: boolean = true`, `class: string = ""`
- Slots: None
- Outputs: `theme({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `color({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `language({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`
@@ -375,7 +375,7 @@ Arrange operational metrics, KPIs, public statistics, or service indicators in a
Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.
- Mount: `data-component="StatsBar"`
- Props: `items: unknown[] = []`, `columns: number = 4`, `compact: boolean = true`, `dividers: boolean = true`, `icons: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `maxWidth: string = "xl"`, `class: string = ""`
- Props: `items: unknown[] = []`, `columns: number = 4`, `compact: boolean = true`, `dividers: boolean = true`, `icons: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `maxWidth: string = "xl"`, `radius: string = "default"`, `shadow: string = "default"`, `gutter: string = "md"`, `outerSpacing: string = "none"`, `mobileColumns: number = 1`, `class: string = ""`
- Slots: None
- Outputs: None
@@ -606,7 +606,7 @@ Arrange feature cards, services, solutions, or benefits in a responsive equal-he
Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.
- Mount: `data-component="Footer"`
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: unknown[] = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `copyrightKey: string = ""`, `translationPrefix: string = ""`, `class: string = ""`
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: unknown[] = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `mobileColumns: number = 2`, `mobileCopyrightAlign: string = "center"`, `copyright: string = ""`, `copyrightKey: string = ""`, `translationPrefix: string = ""`, `class: string = ""`
- Slots: `pre-footer`, `post-footer`, `copyright-left`, `copyright-right`
- Outputs: `select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`
@@ -698,7 +698,7 @@ Apply consistent readable responsive typography, widths, columns, spacing, and e
Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.
- Mount: `data-component="AnnouncementBar"`
- Props: `badge: string = ""`, `badgeIcon: string = ""`, `message: string = "Announcement"`, `description: string = ""`, `icon: string = "icon-[lucide--megaphone]"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss announcement"`, `sticky: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `width: string = "default"`, `color: string = "primary"`, `variant: string = "soft"`, `role: string = "status"`, `live: string = "polite"`, `class: string = ""`
- Props: `badge: string = ""`, `badgeIcon: string = ""`, `message: string = "Announcement"`, `description: string = ""`, `icon: string = "icon-[lucide--megaphone]"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss announcement"`, `sticky: boolean = false`, `compact: boolean = false`, `flush: boolean = false`, `mobileCompact: boolean = false`, `mobileMessageLines: number = 2`, `hideBadgeOnMobile: boolean = false`, `hideDescriptionOnMobile: boolean = false`, `mobileActionSize: string = "default"`, `gutter: string = "md"`, `contentGutter: string = "md"`, `flushMobile: boolean = false`, `size: string = "default"`, `width: string = "default"`, `color: string = "primary"`, `variant: string = "soft"`, `role: string = "status"`, `live: string = "polite"`, `class: string = ""`
- Slots: None
- Outputs: `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`
@@ -707,7 +707,7 @@ Publish a responsive notice with badge, icon, supporting copy, action, dismiss b
Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.
- Mount: `data-component="CTASection"`
- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `spacing: string = "none"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualPosition: string = "right"`, `maxWidth: string = "xl"`, `fullBleed: boolean = false`, `class: string = ""`
- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `spacing: string = "none"`, `radius: string = "default"`, `titleMaxWidth: string = ""`, `contentPadding: string = "default"`, `mobilePadding: string = "default"`, `mobileActions: string = "stack"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualPosition: string = "right"`, `maxWidth: string = "xl"`, `fullBleed: boolean = false`, `class: string = ""`
- Slots: `default`, `actions`, `visual`, `footer`
- Outputs: None
@@ -725,7 +725,7 @@ Present one linked feature or service with media, icon, badge, description, and
Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.
- Mount: `data-component="FeatureIconCard"`
- Props: `icon: string = "icon-[lucide--sparkles]"`, `iconSize: string = "md"`, `iconVariant: string = "soft"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Explore"`, `badge: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `hover: string = "lift"`, `class: string = ""`
- Props: `icon: string = "icon-[lucide--sparkles]"`, `iconSize: string = "md"`, `iconVariant: string = "soft"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Explore"`, `badge: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `hover: string = "lift"`, `radius: string = "default"`, `shadow: string = "default"`, `clickableSurface: boolean = false`, `descriptionTone: string = "default"`, `class: string = ""`
- Slots: `default`, `footer`
- Outputs: None
@@ -770,7 +770,7 @@ Introduce an internal or public page with breadcrumbs, icon, title, description,
Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.
- Mount: `data-component="SplitHero"`
- Props: `eyebrow: string = ""`, `eyebrowIcon: string = "icon-[lucide--sparkles]"`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "xl"`, `fullBleed: boolean = true`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualStyle: string = "panel"`, `trustItems: unknown[] = []`, `class: string = ""`
- Props: `eyebrow: string = ""`, `eyebrowIcon: string = "icon-[lucide--sparkles]"`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "xl"`, `fullBleed: boolean = true`, `gutter: string = "md"`, `contentGutter: string = "md"`, `flushMobile: boolean = false`, `titleSize: string = "default"`, `titleMaxWidth: string = ""`, `descriptionWeight: string = "default"`, `mobileTitleSize: string = "default"`, `mobileStack: boolean = true`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualStyle: string = "panel"`, `trustItems: unknown[] = []`, `class: string = ""`
- Slots: `default`, `actions`, `trust`, `visual`
- Outputs: None
@@ -826,8 +826,8 @@ Theme-aware, responsive nav component.
Theme-aware, responsive navbar component.
- Mount: `data-component="Navbar"`
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Primary navigation"`, `topbarLabel: string = "Utility navigation"`, `brand: Record<string, unknown> = {}`, `items: unknown[] = []`, `actions: unknown[] = []`, `active: string = ""`, `sticky: boolean = false`, `openOnHover: boolean = false`, `maxWidth: string = "full"`, `mobileLabel: string = "Toggle navigation"`, `translationPrefix: string = ""`, `class: string = ""`
- Slots: `topbar`, `actions`
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Primary navigation"`, `topbarLabel: string = "Utility navigation"`, `brand: Record<string, unknown> = {}`, `items: unknown[] = []`, `actions: unknown[] = []`, `active: string = ""`, `sticky: boolean = false`, `openOnHover: boolean = false`, `maxWidth: string = "full"`, `mobileLabel: string = "Toggle navigation"`, `collapseAt: string = "900px"`, `mobilePanel: string = "content"`, `mobileUtilitiesPosition: string = "header"`, `gutter: string = "md"`, `contentGutter: string = "md"`, `flushMobile: boolean = false`, `translationPrefix: string = ""`, `class: string = ""`
- Slots: `topbar`, `actions`, `utilities`
- Outputs: `toggle({ open: boolean })`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ item: string | number | boolean | null | object; value: string | number | boolean; level: string })`, `action({ item: string | number | boolean | null | object; value: string | number | boolean })`
### Pagination
@@ -844,7 +844,7 @@ Theme-aware, responsive pagination component.
Theme-aware, responsive scrollspy component.
- Mount: `data-component="Scrollspy"`
- Props: `color: string = "primary"`, `size: string = "default"`, `items: unknown[] = []`, `active: string = ""`, `label: string = "On this page"`, `heading: string = ""`, `class: string = ""`
- Props: `color: string = "primary"`, `size: string = "default"`, `items: unknown[] = []`, `active: string = ""`, `label: string = "On this page"`, `heading: string = ""`, `sticky: boolean = false`, `topOffset: string = "6rem"`, `sectionOffset: string = "7rem"`, `collapseAt: string = "800px"`, `class: string = ""`
- Slots: `default`
- Outputs: `change({ href: string; label: string })`
packages/ui/component-reference.json
+380 -2
View File
@@ -806,6 +806,69 @@
"default": "false",
"options": []
},
{
"name": "flush",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "mobileCompact",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "mobileMessageLines",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "hideBadgeOnMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "hideDescriptionOnMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "mobileActionSize",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "gutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "contentGutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "flushMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "size",
"type": "string",
@@ -2187,6 +2250,41 @@
"default": "\"none\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "titleMaxWidth",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "contentPadding",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "mobilePadding",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "mobileActions",
"type": "string",
"required": false,
"default": "\"stack\"",
"options": []
},
{
"name": "primaryLabel",
"type": "string",
@@ -2322,7 +2420,14 @@
"name": "title",
"type": "string",
"required": false,
"default": "\"Card title\"",
"default": "\"\"",
"options": []
},
{
"name": "icon",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
@@ -2528,6 +2633,27 @@
"default": "\"none\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "shadow",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "equalHeight",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "scrollable",
"type": "boolean",
@@ -5868,6 +5994,34 @@
"default": "\"lift\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "shadow",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "clickableSurface",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "descriptionTone",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "class",
"type": "string",
@@ -6233,6 +6387,20 @@
"default": "\"compact\"",
"options": []
},
{
"name": "mobileColumns",
"type": "number",
"required": false,
"default": "2",
"options": []
},
{
"name": "mobileCopyrightAlign",
"type": "string",
"required": false,
"default": "\"center\"",
"options": []
},
{
"name": "copyright",
"type": "string",
@@ -8948,6 +9116,48 @@
"default": "\"Toggle navigation\"",
"options": []
},
{
"name": "collapseAt",
"type": "string",
"required": false,
"default": "\"900px\"",
"options": []
},
{
"name": "mobilePanel",
"type": "string",
"required": false,
"default": "\"content\"",
"options": []
},
{
"name": "mobileUtilitiesPosition",
"type": "string",
"required": false,
"default": "\"header\"",
"options": []
},
{
"name": "gutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "contentGutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "flushMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "translationPrefix",
"type": "string",
@@ -8963,7 +9173,7 @@
"options": []
}
],
"slots": ["topbar", "actions"],
"slots": ["topbar", "actions", "utilities"],
"outputs": [
{
"name": "toggle",
@@ -9882,6 +10092,55 @@
"default": "true",
"options": []
},
{
"name": "iconOnly",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "themeIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--sun-moon]\"",
"options": []
},
{
"name": "colorIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--palette]\"",
"options": []
},
{
"name": "languageIcon",
"type": "string",
"required": false,
"default": "\"icon-[lucide--languages]\"",
"options": []
},
{
"name": "panelPlacement",
"type": "string",
"required": false,
"default": "\"bottom-end\"",
"options": []
},
{
"name": "mobilePanel",
"type": "string",
"required": false,
"default": "\"dropdown\"",
"options": []
},
{
"name": "showCurrentLanguage",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "class",
"type": "string",
@@ -10588,6 +10847,34 @@
"default": "\"\"",
"options": []
},
{
"name": "sticky",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "topOffset",
"type": "string",
"required": false,
"default": "\"6rem\"",
"options": []
},
{
"name": "sectionOffset",
"type": "string",
"required": false,
"default": "\"7rem\"",
"options": []
},
{
"name": "collapseAt",
"type": "string",
"required": false,
"default": "\"800px\"",
"options": []
},
{
"name": "class",
"type": "string",
@@ -11402,6 +11689,62 @@
"default": "true",
"options": []
},
{
"name": "gutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "contentGutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "flushMobile",
"type": "boolean",
"required": false,
"default": "false",
"options": []
},
{
"name": "titleSize",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "titleMaxWidth",
"type": "string",
"required": false,
"default": "\"\"",
"options": []
},
{
"name": "descriptionWeight",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "mobileTitleSize",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "mobileStack",
"type": "boolean",
"required": false,
"default": "true",
"options": []
},
{
"name": "backgroundImage",
"type": "string",
@@ -11554,6 +11897,41 @@
"default": "\"xl\"",
"options": []
},
{
"name": "radius",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "shadow",
"type": "string",
"required": false,
"default": "\"default\"",
"options": []
},
{
"name": "gutter",
"type": "string",
"required": false,
"default": "\"md\"",
"options": []
},
{
"name": "outerSpacing",
"type": "string",
"required": false,
"default": "\"none\"",
"options": []
},
{
"name": "mobileColumns",
"type": "number",
"required": false,
"default": "1",
"options": []
},
{
"name": "class",
"type": "string",
packages/ui/components/AnnouncementBar.wrn
+21
View File
@@ -16,6 +16,15 @@ badge: string = ""
dismissLabel: string = "Dismiss announcement"
sticky: boolean = false
compact: boolean = false
flush: boolean = false
mobileCompact: boolean = false
mobileMessageLines: number = 2
hideBadgeOnMobile: boolean = false
hideDescriptionOnMobile: boolean = false
mobileActionSize: string = "default"
gutter: string = "md"
contentGutter: string = "md"
flushMobile: boolean = false
size: string = "default"
width: string = "default"
color: string = "primary"
@@ -36,6 +45,7 @@ badge: string = ""
data-color='{color}'
data-variant='{variant}'
data-compact='{compact}'
data-flush='{flush ? "true" : "false"}' data-mobile-compact='{mobileCompact ? "true" : "false"}' data-mobile-message-lines='{mobileMessageLines}' data-hide-badge-mobile='{hideBadgeOnMobile ? "true" : "false"}' data-hide-description-mobile='{hideDescriptionOnMobile ? "true" : "false"}' data-mobile-action-size='{mobileActionSize}' data-gutter='{gutter}' data-content-gutter='{contentGutter}' data-flush-mobile='{flushMobile ? "true" : "false"}'
data-sticky='{sticky}'
data-show='{!dismissed}'
aria-hidden='{dismissed ? "true" : "false"}'
@@ -163,6 +173,8 @@ badge: string = ""
margin-inline: auto;
}
.wrn-announcement[data-flush="true"] .wrn-announcement__surface { border-radius: 0; box-shadow: none; }
.wrn-announcement[data-width="wide"] .wrn-announcement__surface {
width: min(calc(100% - 2rem), 90rem);
}
@@ -573,6 +585,15 @@ badge: string = ""
}
@media (max-width: 639px) {
.wrn-announcement[data-mobile-compact="true"] .wrn-announcement__inner,
.wrn-announcement[data-compact="true"] .wrn-announcement__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; }
.wrn-announcement[data-hide-badge-mobile="true"] .wrn-announcement__badge,
.wrn-announcement[data-mobile-compact="true"] .wrn-announcement__badge { display: none; }
.wrn-announcement[data-hide-description-mobile="true"] .wrn-announcement__description,
.wrn-announcement[data-mobile-compact="true"] .wrn-announcement__description { display: none; }
.wrn-announcement[data-mobile-message-lines="2"] .wrn-announcement__message { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wrn-announcement[data-mobile-action-size="sm"] .wrn-announcement__action { min-height: 2.25rem; padding-inline: 0.7rem; }
.wrn-announcement[data-flush-mobile="false"] .wrn-announcement__inner { padding-inline: 1rem; }
.wrn-announcement__surface,
.wrn-announcement[data-width="wide"] .wrn-announcement__surface {
width: calc(100% - 1rem);
packages/ui/components/CTASection.wrn
+14 -3
View File
@@ -9,6 +9,11 @@ component CTASection {
color: string = "primary"
variant: string = "solid"
spacing: string = "none"
radius: string = "default"
titleMaxWidth: string = ""
contentPadding: string = "default"
mobilePadding: string = "default"
mobileActions: string = "stack"
primaryLabel: string = "Get started"
primaryHref: string = "#"
primaryIcon: string = ""
@@ -37,6 +42,8 @@ component CTASection {
data-color='{color}'
data-variant='{variant}'
data-spacing='{spacing}'
data-radius='{radius}' data-content-padding='{contentPadding}' data-mobile-padding='{mobilePadding}' data-mobile-actions='{mobileActions}'
style='--wrn-cta-title-max-width: {titleMaxWidth || "18ch"}'
data-max-width='{maxWidth}'
data-full-bleed='{fullBleed ? "true" : "false"}'
data-visual-position='{visualPosition}'
@@ -288,6 +295,8 @@ component CTASection {
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 70px color-mix(in srgb, black 15%, transparent);
}
.wrn-cta-section[data-radius="xl"] .wrn-cta-section__surface { border-radius: 1.5rem; }
.wrn-cta-section[data-content-padding="lg"] .wrn-cta-section__surface { padding: 3.5rem clamp(1.5rem, 5vw, 4rem); }
.wrn-cta-section[data-size="compact"] .wrn-cta-section__surface,
.wrn-cta-section[data-size="sm"] .wrn-cta-section__surface {
@@ -429,7 +438,7 @@ component CTASection {
}
.wrn-cta-section__title {
max-width: 18ch;
max-width: var(--wrn-cta-title-max-width);
margin: 0.75rem 0 0;
color: var(--wrn-color-text);
font-size: clamp(2rem, 5vw, 4rem);
@@ -665,11 +674,11 @@ component CTASection {
line-height: 1.5;
}
.wrn-cta-section__footer:empty {
.wrn-cta-section__footer:not(:has(> *)) {
display: none;
}
.wrn-cta-section__footer:not(:empty) {
.wrn-cta-section__footer:has(> *) {
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
@@ -699,6 +708,8 @@ component CTASection {
}
@media (max-width: 639px) {
.wrn-cta-section[data-mobile-padding="md"] .wrn-cta-section__surface { padding: 2.5rem 1.25rem; }
.wrn-cta-section[data-mobile-actions="inline"] .wrn-cta-section__action { width: auto; }
.wrn-cta-section__surface {
padding: 1.6rem;
border-radius: 1.2rem;
packages/ui/components/Card.wrn
+13 -1
View File
@@ -9,7 +9,8 @@ component Card {
}
props {
title: string = "Card title"
title: string = ""
icon: string = ""
titleKey: string = ""
subtitle: string = ""
subtitleKey: string = ""
@@ -39,6 +40,9 @@ component Card {
layout: string = "vertical"
align: string = "left"
hover: string = "none"
radius: string = "default"
shadow: string = "default"
equalHeight: boolean = false
scrollable: boolean = false
maxHeight: string = "18rem"
dismissible: boolean = false
@@ -84,6 +88,7 @@ component Card {
data-layout='{layout}'
data-hover='{hover}'
data-align='{align}'
data-radius='{radius}' data-shadow='{shadow}' data-equal-height='{equalHeight ? "true" : "false"}'
class='wrn-component wrn-next--card wrn-component--color-{color} wrn-component--size-{size} wrn-next--variant-{variant} {class}'
>
{#if items.length > 0}
@@ -271,6 +276,7 @@ component Card {
<p>{emptyTitle}</p>
</div>
{:else}
{#if icon}<span class='wrn-next__card-icon {icon}' aria-hidden="true"></span>{/if}
{#if description}
<p class="wrn-next__card-description" data-t='{descriptionKey}'>{description}</p>
{/if}
@@ -343,6 +349,12 @@ component Card {
.wrn-next--card[data-size="sm"] {
--wrn-card-padding: 0.85rem;
}
.wrn-next--card[data-size="compact"] .wrn-next__card-body { padding: 1rem; }
.wrn-next--card[data-radius="lg"] > .wrn-next__card-panel { border-radius: 1rem; }
.wrn-next--card[data-shadow="none"] > .wrn-next__card-panel { box-shadow: none; }
.wrn-next--card[data-equal-height="true"], .wrn-next--card[data-equal-height="true"] > .wrn-next__card-panel { height: 100%; }
.wrn-next--card[data-layout="horizontal"] .wrn-next__card-body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.8rem; }
.wrn-next__card-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 0.7rem; color: var(--wrn-color-primary); background: color-mix(in srgb, var(--wrn-color-primary) 12%, transparent); font-size: 1.15rem; }
.wrn-next--card[data-size="lg"] {
--wrn-card-padding: 1.75rem;
packages/ui/components/FeatureIconCard.wrn
+10 -1
View File
@@ -15,13 +15,17 @@ component FeatureIconCard {
variant: string = "default"
align: string = "left"
hover: string = "lift"
radius: string = "default"
shadow: string = "default"
clickableSurface: boolean = false
descriptionTone: string = "default"
class: string = ""
}
view {
<article
data-ui-component="FeatureIconCard"
data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}'
data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}' data-radius='{radius}' data-shadow='{shadow}' data-clickable-surface='{clickableSurface ? "true" : "false"}' data-description-tone='{descriptionTone}'
class='wrn-feature-icon-card {class}'
>
<div
@@ -62,6 +66,11 @@ component FeatureIconCard {
style {
.wrn-feature-icon-card { position: relative; display: flex; height: 100%; flex-direction: column; padding: 1.5rem; border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 2); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); transition: transform var(--wrn-motion-base), border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base); }
.wrn-feature-icon-card[data-size="sm"] { padding: 1.25rem; } .wrn-feature-icon-card[data-size="lg"] { padding: 2rem; }
.wrn-feature-icon-card[data-size="compact"] { min-height: 0; padding: 1.25rem; }
.wrn-feature-icon-card[data-radius="lg"] { border-radius: 1rem; }
.wrn-feature-icon-card[data-shadow="sm"] { box-shadow: 0 5px 18px rgb(15 23 42 / 0.06); }
.wrn-feature-icon-card[data-description-tone="muted"] .wrn-feature-icon-card__description { color: var(--wrn-color-text-muted); font-weight: 500; }
.wrn-feature-icon-card[data-clickable-surface="true"] .wrn-feature-icon-card__action::after { position: absolute; inset: 0; content: ""; }
.wrn-feature-icon-card[data-variant="soft"] { background: var(--wrn-color-surface-soft); }
.wrn-feature-icon-card[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
.wrn-feature-icon-card[data-hover="lift"]:hover { transform: translateY(-0.25rem); }
packages/ui/components/Footer.wrn
+6
View File
@@ -12,6 +12,8 @@ component Footer {
items: unknown[] = []
columns: number = 3
maxWidth: string = "compact"
mobileColumns: number = 2
mobileCopyrightAlign: string = "center"
copyright: string = ""
copyrightKey: string = ""
translationPrefix: string = ""
@@ -36,6 +38,7 @@ component Footer {
data-ui-component="Footer"
data-size='{size}'
data-color='{color}'
data-mobile-columns='{mobileColumns}' data-mobile-copyright-align='{mobileCopyrightAlign}'
class='wrn-footer {maxWidth === "full" ? "wrn-footer--width-full" : ""} {class}'
>
<div
@@ -531,6 +534,9 @@ component Footer {
.wrn-footer__links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wrn-footer[data-mobile-columns="1"] .wrn-footer__links { grid-template-columns: 1fr; }
.wrn-footer[data-mobile-columns="2"] .wrn-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wrn-footer[data-mobile-copyright-align="start"] :is(.wrn-footer__copyright-left, .wrn-footer__copyright-right) { justify-content: flex-start; text-align: left; }
.wrn-footer__bottom,
.wrn-footer__bottom--slots {
grid-template-columns: 1fr;
packages/ui/components/Navbar.wrn
+58 -6
View File
@@ -20,6 +20,12 @@ size: string = "default"
openOnHover: boolean = false
maxWidth: string = "full"
mobileLabel: string = "Toggle navigation"
collapseAt: string = "900px"
mobilePanel: string = "content"
mobileUtilitiesPosition: string = "header"
gutter: string = "md"
contentGutter: string = "md"
flushMobile: boolean = false
translationPrefix: string = ""
class: string = ""
}
@@ -70,7 +76,7 @@ size: string = "default"
}
view {
<header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
<header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}" data-collapse-at="{collapseAt}" data-mobile-panel="{mobilePanel}" data-mobile-utilities-position="{mobileUtilitiesPosition}" data-gutter="{gutter}" data-content-gutter="{contentGutter}" data-flush-mobile="{flushMobile ? 'true' : 'false'}">
<div class="wrn-navbar__topbar" aria-label="{topbarLabel}">
<slot name="topbar" />
</div>
@@ -93,10 +99,6 @@ size: string = "default"
</a>
{/if}
<button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
</button>
<div class="wrn-navbar__collapse {mobileOpen ? 'is-open' : ''}">
<nav class="wrn-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal">
{#each items as item}
@@ -149,6 +151,12 @@ size: string = "default"
<slot name="actions" />
</div>
</div>
<div class="wrn-navbar__utilities"><slot name="utilities" /></div>
<button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
</button>
</div>
</header>
}
@@ -198,6 +206,17 @@ size: string = "default"
gap: 1.5rem;
}
.wrn-navbar[data-gutter="sm"] .wrn-navbar__main { padding-inline: 1rem; }
.wrn-navbar[data-gutter="lg"] .wrn-navbar__main { padding-inline: clamp(1.5rem, 5vw, 4rem); }
.wrn-navbar__utilities {
display: inline-flex;
align-items: center;
flex: none;
}
.wrn-navbar__utilities:not(:has(> *)) { display: none; }
.wrn-navbar--width-full .wrn-navbar__main {
width: 100%;
max-width: none;
@@ -532,12 +551,15 @@ size: string = "default"
background: var(--wrn-color-surface);
border-bottom: 1px solid var(--wrn-color-border);
box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
height: calc(100dvh - 3.5rem);
height: auto;
max-height: calc(100dvh - 3.5rem);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.wrn-navbar[data-mobile-panel="sheet"] .wrn-navbar__collapse {
height: calc(100dvh - 3.5rem);
}
.wrn-navbar__collapse.is-open {
display: flex;
}
@@ -582,7 +604,37 @@ size: string = "default"
}
}
@media (max-width: 1100px) and (min-width: 901px) {
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__toggle { display: block; }
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__collapse {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
max-height: calc(100dvh - 3.5rem);
padding: 0.75rem 1rem 1rem;
align-items: stretch;
flex-direction: column;
overflow-y: auto;
background: var(--wrn-color-surface);
border-bottom: 1px solid var(--wrn-color-border);
box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
}
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__collapse.is-open { display: flex; }
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__menus,
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__actions {
width: 100%;
align-items: stretch;
flex: none;
flex-direction: column;
}
.wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__menu-link, .wrn-navbar__dropdown > summary, .wrn-navbar__action) { width: 100%; }
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__panel { position: static; width: 100%; max-width: none; transform: none; }
}
@media (max-width: 600px) {
.wrn-navbar[data-flush-mobile="false"] .wrn-navbar__main { padding-inline: 1rem; }
.wrn-navbar__brand-copy small {
display: none;
}
packages/ui/components/PreferenceSwitcher.wrn
+28 -9
View File
@@ -25,6 +25,13 @@ size: string = "default"
{"label": "Amber", "value": "amber", "hex": "#d97706"}
]
compact: boolean = true
iconOnly: boolean = true
themeIcon: string = "icon-[lucide--sun-moon]"
colorIcon: string = "icon-[lucide--palette]"
languageIcon: string = "icon-[lucide--languages]"
panelPlacement: string = "bottom-end"
mobilePanel: string = "dropdown"
showCurrentLanguage: boolean = true
class: string = ""
}
@@ -37,11 +44,11 @@ size: string = "default"
}
view {
<div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences aria-label="Display and language preferences">
<div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences data-icon-only="{iconOnly ? 'true' : 'false'}" data-panel-placement="{panelPlacement}" data-mobile-panel="{mobilePanel}" aria-label="Display and language preferences">
<details class="wrn-preferences__menu" name="wrn-preference-menu">
<summary aria-label="{themeLabel}" title="{themeLabel}">
<span class="icon-[lucide--sun-moon]" aria-hidden="true"></span>
{#if !compact}<span>{themeLabel}</span>{/if}
<span class="{themeIcon}" aria-hidden="true"></span>
{#if !iconOnly && !compact}<span>{themeLabel}</span>{/if}
</summary>
<div class="wrn-preferences__panel">
<strong>{themeLabel}</strong>
@@ -54,8 +61,8 @@ size: string = "default"
<details class="wrn-preferences__menu" name="wrn-preference-menu">
<summary aria-label="{colorLabel}" title="{colorLabel}">
<span class="icon-[lucide--palette]" aria-hidden="true"></span>
{#if !compact}<span>{colorLabel}</span>{/if}
<span class="{colorIcon}" aria-hidden="true"></span>
{#if !iconOnly && !compact}<span>{colorLabel}</span>{/if}
</summary>
<div class="wrn-preferences__panel wrn-preferences__panel--colors">
<strong>{colorLabel}</strong>
@@ -69,9 +76,9 @@ size: string = "default"
<details class="wrn-preferences__menu wrn-preferences__menu--language" name="wrn-preference-menu">
<summary aria-label="{languageLabel}" title="{languageLabel}">
<span class="icon-[lucide--languages]" aria-hidden="true"></span>
<span class="wrn-preferences__current-language" aria-hidden="true">EN</span>
{#if !compact}<span>{languageLabel}</span>{/if}
<span class="{languageIcon}" aria-hidden="true"></span>
{#if showCurrentLanguage}<span class="wrn-preferences__current-language" aria-hidden="true">EN</span>{/if}
{#if !iconOnly && !compact}<span>{languageLabel}</span>{/if}
</summary>
<div class="wrn-preferences__panel wrn-preferences__panel--language">
<strong>{languageLabel}</strong>
@@ -157,6 +164,9 @@ size: string = "default"
animation: wrn-component-enter 160ms ease both;
}
.wrn-preferences[data-panel-placement="bottom-start"] .wrn-preferences__panel { right: auto; left: 0; }
.wrn-preferences[data-panel-placement="bottom-center"] .wrn-preferences__panel { right: auto; left: 50%; transform: translateX(-50%); }
.wrn-preferences__panel > strong {
padding-inline: 0.25rem;
font-size: 0.7rem;
@@ -242,7 +252,7 @@ size: string = "default"
}
@media (max-width: 640px) {
.wrn-preferences__panel {
.wrn-preferences[data-mobile-panel="sheet"] .wrn-preferences__panel {
position: fixed;
top: auto;
right: 1rem;
@@ -250,6 +260,15 @@ size: string = "default"
left: 1rem;
width: auto;
}
.wrn-preferences[data-mobile-panel="dropdown"] .wrn-preferences__panel {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
bottom: auto;
left: auto;
width: max-content;
max-width: min(22rem, calc(100vw - 2rem));
}
}
/* Shared component foundation. */
packages/ui/components/Scrollspy.wrn
+8
View File
@@ -24,6 +24,10 @@ component Scrollspy {
active: string = ""
label: string = "On this page"
heading: string = ""
sticky: boolean = false
topOffset: string = "6rem"
sectionOffset: string = "7rem"
collapseAt: string = "800px"
class: string = ""
}
@@ -44,6 +48,7 @@ component Scrollspy {
class='wrn-scrollspy {class}'
data-color='{color}'
data-size='{size}'
data-sticky='{sticky ? "true" : "false"}' data-collapse-at='{collapseAt}' style='--wrn-scrollspy-top: {topOffset}; --wrn-scrollspy-section-offset: {sectionOffset};'
data-wrn-scrollspy="true"
role="navigation"
aria-label='{label}'
@@ -74,6 +79,8 @@ component Scrollspy {
--scrollspy-accent: var(--wrn-color-primary);
max-width: 100%;
}
.wrn-scrollspy[data-sticky="true"] { position: sticky; top: var(--wrn-scrollspy-top); height: max-content; }
.wrn-scrollspy__link { scroll-margin-top: var(--wrn-scrollspy-section-offset); }
.wrn-scrollspy:not(:has(.wrn-scrollspy__item)):not(:has(slot > *)) {
display: none;
@@ -152,6 +159,7 @@ component Scrollspy {
* line rather than a screenful.
*/
@media (max-width: 767px) {
.wrn-scrollspy[data-collapse-at="800px"] { position: static; }
.wrn-scrollspy__list {
grid-auto-flow: column;
grid-auto-columns: max-content;
packages/ui/components/SplitHero.wrn
+16
View File
@@ -20,6 +20,14 @@ component SplitHero {
variant: string = "default"
maxWidth: string = "xl"
fullBleed: boolean = true
gutter: string = "md"
contentGutter: string = "md"
flushMobile: boolean = false
titleSize: string = "default"
titleMaxWidth: string = ""
descriptionWeight: string = "default"
mobileTitleSize: string = "default"
mobileStack: boolean = true
backgroundImage: string = ""
visualImage: string = ""
visualAlt: string = ""
@@ -45,6 +53,8 @@ component SplitHero {
data-variant='{variant}'
data-max-width='{maxWidth}'
data-full-bleed='{fullBleed ? "true" : "false"}'
data-gutter='{gutter}' data-content-gutter='{contentGutter}' data-flush-mobile='{flushMobile ? "true" : "false"}' data-title-size='{titleSize}' data-description-weight='{descriptionWeight}' data-mobile-title-size='{mobileTitleSize}' data-mobile-stack='{mobileStack ? "true" : "false"}'
style='--wrn-split-title-max-width: {titleMaxWidth || "18ch"}'
data-visual-style='{visualStyle}'
class='wrn-split-hero {class}'
>
@@ -413,6 +423,7 @@ component SplitHero {
}
.wrn-split-hero__title {
max-width: var(--wrn-split-title-max-width);
max-width: 15ch;
margin: 1.45rem 0 0;
color: var(--wrn-color-text);
@@ -421,6 +432,8 @@ component SplitHero {
line-height: 1.02;
letter-spacing: -0.05em;
}
.wrn-split-hero[data-title-size="xl"] .wrn-split-hero__title { font-size: clamp(3rem, 5.5vw, 5rem); }
.wrn-split-hero[data-description-weight="medium"] .wrn-split-hero__description { font-weight: 500; }
.wrn-split-hero[data-size="compact"] .wrn-split-hero__title,
.wrn-split-hero[data-size="sm"] .wrn-split-hero__title {
@@ -771,6 +784,7 @@ component SplitHero {
.wrn-split-hero[data-ratio="content"] .wrn-split-hero__layout {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.wrn-split-hero[data-ratio="wide-copy"] .wrn-split-hero__layout { grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr); }
.wrn-split-hero[data-ratio="visual"] .wrn-split-hero__layout {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
@@ -786,6 +800,8 @@ component SplitHero {
}
@media (max-width: 639px) {
.wrn-split-hero[data-flush-mobile="false"] .wrn-split-hero__inner { width: calc(100% - 2rem); }
.wrn-split-hero[data-mobile-title-size="lg"] .wrn-split-hero__title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
.wrn-split-hero__inner {
padding-block: 3.25rem;
}
packages/ui/components/StatsBar.wrn
+12
View File
@@ -9,6 +9,11 @@ component StatsBar {
color: string = "primary"
variant: string = "raised"
maxWidth: string = "xl"
radius: string = "default"
shadow: string = "default"
gutter: string = "md"
outerSpacing: string = "none"
mobileColumns: number = 1
class: string = ""
}
@@ -24,6 +29,7 @@ component StatsBar {
data-color='{color}'
data-variant='{variant}'
data-max-width='{maxWidth}'
data-radius='{radius}' data-shadow='{shadow}' data-gutter='{gutter}' data-outer-spacing='{outerSpacing}' data-mobile-columns='{mobileColumns}'
class='wrn-stats-bar {class}'
aria-label="Key statistics"
>
@@ -149,6 +155,10 @@ component StatsBar {
width: min(calc(100% - 2rem), 80rem);
margin-inline: auto;
}
.wrn-stats-bar[data-outer-spacing="md"] { margin-block: 2rem; }
.wrn-stats-bar[data-radius="xl"] .wrn-stats-bar__surface { overflow: hidden; border-radius: 1.25rem; }
.wrn-stats-bar[data-shadow="sm"] .wrn-stats-bar__surface { box-shadow: 0 10px 30px rgb(15 23 42 / 0.05); }
.wrn-stats-bar[data-variant="card"] .wrn-stats-bar__surface { border: 1px solid var(--wrn-color-border); background: var(--wrn-color-surface); }
.wrn-stats-bar[data-max-width="compact"] .wrn-stats-bar__inner {
width: min(calc(100% - 2rem), 64rem);
@@ -480,6 +490,8 @@ component StatsBar {
}
@media (max-width: 639px) {
.wrn-stats-bar[data-mobile-columns="1"] .wrn-stats-bar__surface { grid-template-columns: 1fr; }
.wrn-stats-bar[data-gutter="md"] .wrn-stats-bar__inner { width: calc(100% - 2rem); }
.wrn-stats-bar[data-max-width="full"] .wrn-stats-bar__surface {
border-inline: 0;
border-radius: 0;
packages/ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
"version": "0.8.25",
"version": "0.8.26",
"private": true,
"type": "module",
"main": "src/index.ts",