ArtisanPack UI
DocsDesign SystemUpgrading Livewire UI Components 2.x to 3.0

Upgrading Livewire UI Components 2.x to 3.0

Design System v1.0.0

Livewire UI Components 3.0 is rebuilt on the ArtisanPack UI design system. The components keep their purpose, and three things change underneath them: -...

Livewire UI Components 3.0 is rebuilt on the ArtisanPack UI design system. The components keep their purpose, and three things change underneath them:

  • DaisyUI is gone. Components are styled by @artisanpack-ui/css: plain CSS in cascade layers, driven by design tokens. Tailwind is optional.
  • One API across Livewire, React and Vue. Some components and attributes were renamed to match. Most 2.x tags still render in 3.0 as deprecated aliases, so an app keeps working while you migrate, but the aliases go in the next major.
  • Theming is tokens. The DaisyUI theme generator is replaced by presets built on the tokens.

php artisan artisanpack:upgrade-ui does the mechanical part. This guide covers that command and what is left for you.

How long the old version is supported

The previous major gets security fixes only for 12 months after the new one ships. No features or component fixes are backported. Each repository's SECURITY.md carries the end date from launch day.

The old and new majors can't be mixed in one app: the new CSS replaces DaisyUI, and the two style the same components differently. Upgrade a whole app at once, on a branch.

1. Update the package

Commit your work first, then:

composer require artisanpack-ui/livewire-ui-components:^3.0

2. Run the upgrade command

Preview the changes:

php artisan artisanpack:upgrade-ui --dry-run

The dry run prints a diff of every file it would change and writes nothing. Run it without --dry-run to apply them:

php artisan artisanpack:upgrade-ui
Option What it does
paths Files or directories to upgrade. Default: resources/views
--dry-run Show the changes as a diff without writing
--no-classes Leave raw DaisyUI classes out of the report
--json Print the report as JSON. It writes without asking, so pair it with --dry-run to only report
--force Write without asking. Required when the command can't ask, as in CI

Views in a package or a module are not under resources/views, so pass them: php artisan artisanpack:upgrade-ui packages/billing/resources/views.

What it rewrites. Renamed components (<x-artisanpack-modal> to <x-artisanpack-dialog>), renamed attributes and slots, flags that became values (right to side="end"), per-part class attributes (merged into :classes), label on a self-closing button (moved into the slot) and tooltip attributes (the element is wrapped in <x-artisanpack-tooltip>). It reads values where the name alone isn't enough: on Button, variant="primary" becomes color="primary" and variant="ghost" stays.

What it reports and leaves alone. Each line of the report has the file, line and column:

Label Meaning
manual An attribute, slot or component with no automatic replacement. The message says what to do
review A change that was made and deserves a look
removed An attribute that was deleted because 3.0 has no equivalent
class A raw DaisyUI class, theme variable or DaisyUI configuration. See step 3

What it never touches. Tags that other packages register under the same prefix, such as <x-artisanpack-ec-price>; Blade comments; @verbatim blocks; anything that isn't a Blade component tag. It does not edit PHP, so attributes built in a component class or passed through $attributes->merge() are yours to check: the command flags tags that build their attributes with Blade.

You can run the command again after you fix things by hand: migrated markup has nothing left for it to rewrite. Preview a second run with --dry-run all the same.

3. Remove DaisyUI and adopt the new CSS

Without a bundler

Publish the prebuilt assets and load them in your layout:

php artisan vendor:publish --tag=artisanpack-design-system-assets

<head>
    @apuiThemeScript
    @artisanpackStyles
</head>
<body>
    …
    @artisanpackScripts
    @livewireScripts
</body>

@artisanpackScripts goes before Livewire's script: it registers the behavior engine with Alpine as Alpine starts. @apuiThemeScript applies the stored theme before first paint.

With Vite

npm install @artisanpack-ui/css @artisanpack-ui/behavior
npm uninstall daisyui

Without Tailwind, import the CSS in your entry stylesheet:

@import '@artisanpack-ui/css';

With Tailwind v4, declare the layer order first, so Preflight never restyles a component and a utility on a component still wins. The last import is optional: it adds utilities generated from the tokens (bg-surface-page, text-muted, rounded-control).

@layer theme, base, apui, components, utilities;
@import 'tailwindcss';
@import '@artisanpack-ui/css';
@import '@artisanpack-ui/css/tailwind';

Then delete @plugin "daisyui"; and any @plugin "daisyui/theme" block from your CSS, and register the behavior engine with Alpine:

import apuiBehavior from '@artisanpack-ui/behavior/alpine';

Alpine.plugin(apuiBehavior);

To bring your own styles, import @artisanpack-ui/css/headless instead: the same markup, ARIA and behavior with no component CSS.

Replace raw DaisyUI classes

Markup that used DaisyUI classes directly (btn, card, badge, bg-base-200) has no styles once DaisyUI is gone. The upgrade tool lists every one with its file and line and never rewrites them, because the right replacement depends on the element. For each:

You have Use instead
A component class: btn, badge, card, alert, tab, modal, tooltip, … The component. <a class="btn btn-primary"> is a Button with href. Where you need the bare markup, the apui- class and data attributes: class="apui-button" data-color="primary"
A size or color modifier: btn-sm, badge-success, alert-warning The component's size and color props (data-size, data-color on bare markup)
input, select, textarea, checkbox, toggle, label on native controls The form components, which draw the label, hint and error too
bg-base-100 bg-surface-default with the Tailwind preset, or background: var(--apui-surface-default)
bg-base-200 bg-surface-sunken · var(--apui-surface-sunken)
bg-base-300, border-base-300 border-default · var(--apui-border-default); as a background, bg-surface-sunken
text-base-content text-default · var(--apui-text-default)
text-base-content/70, /60, /50 text-muted · var(--apui-text-muted). text-subtle for the faintest text. Opacity on text is gone: the tokens are checked for contrast, an opacity isn't
text-primary-content, text-error-content, … The color's own foreground: text-primary-foreground, text-error-foreground · var(--apui-color-primary-foreground), var(--apui-color-error-foreground)
bg-primary, text-error, border-success Unchanged with the Tailwind preset. Without Tailwind, the color's own token: var(--apui-color-primary), var(--apui-color-error), var(--apui-color-success)
rounded-box, rounded-btn rounded-surface, rounded-control · var(--apui-radius-surface), var(--apui-radius-control)

The tool marks names such as input, table, link and label as "may be": they are DaisyUI classes and also common class names of your own. Check each.

Left and right are logical now. Use ms-*, me-*, ps-*, pe-*, start-* and end-* next to components so layouts mirror in right-to-left languages.

4. Migrate your theme

php artisan artisanpack:generate-theme wrote Tailwind palettes and DaisyUI variables. It still runs in 3.0, deprecated, and its output has nothing to style. Use the preset generator instead:

php artisan artisanpack:generate-preset acme --primary="#7c3aed"

It writes resources/css/presets/acme.css and refuses to write a preset that fails WCAG 2.2 AA contrast in any theme. Import the file after @artisanpack-ui/css and switch it on with <html data-preset="acme">. --secondary, --accent, --neutral and the --font-* options set the rest of the brand; --format=php or json gives the values as data.

The 2.x theme builder page and its route are removed. The mary-theme storage keys, the class on <html> and the theme-changed events are gone too: the theme lives in data-theme, and ThemeToggle reports a change as value-change.

Repoint theme variables

DaisyUI's custom properties are gone, and nothing aliases them. The tool lists each reference:

DaisyUI Token
--color-base-100 --apui-surface-default
--color-base-200 --apui-surface-sunken
--color-base-300 --apui-border-default
--color-base-content --apui-text-default
--color-primary, --color-error, … --apui-color-primary, --apui-color-error, …
--color-primary-content --apui-color-primary-foreground
--radius-box --apui-radius-surface
--radius-field --apui-radius-field
--radius-selector --apui-radius-control
var(--p), var(--b1), var(--bc) (DaisyUI 4) The same tokens as above

--color-* is also a Tailwind theme namespace, so some of these may be yours and not DaisyUI's. The tool can't tell; you can.

Themes and presets

Before Now
data-theme="light" or a DaisyUI theme name data-theme="light", "dark" or "high-contrast". With no attribute the page follows the system setting
A custom DaisyUI theme, or a generated theme file A preset: a named set of token values switched with data-preset. ledger and harbor ship with the CSS
Glass props with tints and opacities surface="glass" on the component; the look comes from the glass tokens
Per-component color overrides Tokens. Set --apui-color-primary and the rest once, in a preset

Theme, preset and density (data-density="compact") combine, and any element can set them for its subtree.

5. Renamed and consolidated components

2.x Now Notes
<x-artisanpack-choices> <x-artisanpack-combobox> Choices was multiple by default; Combobox is single. The tool adds multiple.
<x-artisanpack-choices-offline> <x-artisanpack-combobox> Choices was multiple by default; Combobox is single. The tool adds multiple.
<x-artisanpack-colorpicker> <x-artisanpack-color-picker>
<x-artisanpack-datepicker> <x-artisanpack-date-picker>
<x-artisanpack-datetime> <x-artisanpack-date-picker> Add time for a date and time.
<x-artisanpack-drawer> <x-artisanpack-drawer> The default side moved from start to end. The tool adds side="start" where it is missing.
<x-artisanpack-dropdown> <x-artisanpack-dropdown-menu>
<x-artisanpack-editor> <x-artisanpack-rich-text-editor>
<x-artisanpack-errors> <x-artisanpack-validation-summary>
<x-artisanpack-group> <x-artisanpack-radio-group> Group is RadioGroup with variant="segmented" and orientation="horizontal". The tool adds variant="segmented" and orientation="horizontal".
<x-artisanpack-header> <x-artisanpack-page-header>
<x-artisanpack-main> <x-artisanpack-app-shell>
<x-artisanpack-modal> <x-artisanpack-dialog>
<x-artisanpack-nav> <x-artisanpack-navbar> Navbar is sticky by default; 2.x nav was not. Add :sticky="false" to keep a bar that scrolls away.
<x-artisanpack-profile> <x-artisanpack-user-menu>
<x-artisanpack-radio> <x-artisanpack-radio-group>
<x-artisanpack-select-group> <x-artisanpack-select> Pass the groups to Select as { label, options } entries.
<x-artisanpack-separator> <x-artisanpack-divider>
<x-artisanpack-subheading> <x-artisanpack-text> Subheading is Text with size="lead". The tool adds size="lead".
<x-artisanpack-tags> <x-artisanpack-combobox> Tags is a Combobox with multiple and allow-create. The tool adds multiple and allow-create.
<x-artisanpack-widget-grid> <x-artisanpack-grid>

6. Changes by component

Every 2.x attribute and slot that changed. "Automatic" says whether artisanpack:upgrade-ui makes the change for you. Attributes are written in kebab-case, as in Blade; the camelCase form is handled the same way.

<x-artisanpack-accordion>

2.x 3.0 Automatic
no-join Removed. Yes
uuid Internal wire:key plumbing; never public API. By hand
collapse-plus-minus Removed, with no replacement. By hand
glass Not in the 3.0 API (planned as surface). Remove it, or check the component's docs for what replaces it. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand

<x-artisanpack-alert>

2.x 3.0 Automatic
shadow Removed. Yes
color-adjustment Per-instance color math. Theming belongs in tokens. By hand
glass Now surface. Yes
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand
uuid Internal wire:key plumbing; never public API. By hand

<x-artisanpack-avatar>

2.x 3.0 Automatic
image Now src. Yes
placeholder Now name. Yes
color-adjustment Per-instance color math. Theming belongs in tokens. By hand
subtitle Gone: lay out a name beside the avatar with a ListItem, or use UserMenu. By hand

<x-artisanpack-badge>

2.x 3.0 Automatic
color-adjustment Per-instance color math. Theming belongs in tokens. By hand
glass Not in the 3.0 API (planned as surface). Remove it, or check the component's docs for what replaces it. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand

<x-artisanpack-breadcrumbs>

2.x 3.0 Automatic
separator Gone: the separator is always a chevron; remove it and style it through classes. By hand
link-item-class Breadcrumbs has no linkItem part. Style it with class, or a classes key: root, list, item, link, separator, current, overflow. By hand
text-item-class Breadcrumbs has no textItem part. Style it with class, or a classes key: root, list, item, link, separator, current, overflow. By hand
icon-class Breadcrumbs has no icon part. Style it with class, or a classes key: root, list, item, link, separator, current, overflow. By hand
separator-class Now the separator key of classes. Yes
no-wire-navigate Now navigate, with the opposite meaning: the flag becomes navigate set to false. Yes

<x-artisanpack-button>

2.x 3.0 Automatic
label Now the default slot. On self-closing tags
icon Now leading-icon. Yes
icon-right Now trailing-icon. Yes
spinner Gone: set the boolean loading prop to show the spinner; there is no wire:target shortcut. By hand
link Now href. Yes
external Gone: add target="_blank" and rel="noopener" to the button yourself. By hand
no-wire-navigate Not in the 3.0 API (planned as navigate). Remove it, or check the component's docs for what replaces it. By hand
responsive Removed. The label no longer hides on small screens; use icon-only for an icon button. Yes
badge Gone: render a Badge inside the button's slot or beside it. By hand
badge-classes Button has no badge part. Style it with class, or a classes key: root, icon, iconEnd, label, spinner. By hand
tooltip Now content on a <x-artisanpack-tooltip> wrapped around the element. Yes
tooltip-left Now content on a <x-artisanpack-tooltip> wrapped around the element with placement="start". Yes
tooltip-right Now content on a <x-artisanpack-tooltip> wrapped around the element with placement="end". Yes
tooltip-bottom Now content on a <x-artisanpack-tooltip> wrapped around the element with placement="bottom". Yes
variant Depends on the value: color for primary, secondary, accent, neutral, success, warning, error, info. Unchanged for solid, soft, outline, ghost, link. For literal values
color-adjustment Per-instance color math. Theming belongs in tokens. By hand
uuid Internal wire:key plumbing; never public API. By hand
tooltip-position Now placement on a <x-artisanpack-tooltip> wrapped around the element. Yes

<x-artisanpack-card>

2.x 3.0 Automatic
subtitle Now description. Yes
separator Removed. The card draws no header rule; use classes if you need one. Yes
shadow Gone: use surface="raised" for an elevated card. By hand
progress-indicator Gone: show a Progress component inside the card while loading. By hand
figure-position Gone: media always sits at the top of the card; lay out side or bottom images yourself. By hand
glass Now surface. Yes
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand
menu Use the actions slot, which now sits at the end of the header; move 2.x bottom actions to footer. By hand
figure Now media. Yes
<x-slot:figure> Now <x-slot:media>. Yes
<x-slot:menu> Use the actions slot, which now sits at the end of the header; move 2.x bottom actions to footer. By hand
<x-slot:subtitle> Now <x-slot:description>. Yes
2.x 3.0 Automatic
without-indicators Removed. Yes
without-arrows Removed. Yes
next-arrow Ignored in 3.0: remove it; the next button is built in (next-label names it). By hand
previous-arrow Ignored in 3.0: remove it; the previous button is built in (previous-label names it). By hand
dots Ignored in 3.0: remove it; the dots are built in and always show. By hand
aria-label Now label. Yes
aria-labelled-by Ignored in 3.0: name the carousel with label instead. By hand
respects-reduced-motion Removed. Ignored: autoplay always respects reduced motion. Yes
content The content scoped slot is now @scope('slide', $slide). By hand

<x-artisanpack-chart>

2.x 3.0 Automatic
options Apex options are dropped; categories, labels and the title still fill labels and title. By hand
theme Series take --apui-chart-1…6. By hand
animated Removed. Yes
animation-speed Gone: remove it; the chart renders on the server with no animation options. By hand
animation-easing Gone: remove it; the chart renders on the server with no animation options. By hand
dynamic-animation Removed. The chart has no animation options. Yes
dynamic-animation-speed Gone: remove it; the chart renders on the server with no animation options. By hand
glass Removed, with no replacement. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand

<x-artisanpack-checkbox>

2.x 3.0 Automatic
right Removed. The label always follows the box. Yes
hint Now description. Yes
hint-class Now the description key of classes. Yes
card Gone on Checkbox: use CheckboxGroup with variant="cards" for card options. By hand
card-class Checkbox has no card part. Style it with class, or a classes key: root, box, control, indicator, label, description, error. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand
<x-slot:hint> Now <x-slot:description>. Yes

<x-artisanpack-checkbox-group>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
option-value Gone: give each options entry a value key. By hand
option-label Gone: give each options entry a label key. By hand
option-hint Gone: give each options entry a description key. By hand
horizontal Now orientation="horizontal". Yes
card Now variant="cards". Yes
card-class CheckboxGroup has no card part. Style it with class, or a classes key: root, label, selectAll, items, hint, error. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-choices> → <x-artisanpack-combobox>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
icon Now leading-icon. Yes
icon-right Removed, with no replacement. By hand
inline Removed. Yes
prefix Removed, with no replacement. By hand
suffix Removed, with no replacement. By hand
searchable Now remote. Yes
single Now multiple, with the opposite meaning: the flag becomes multiple set to false. Yes
compact Removed. Yes
compact-text Removed, with no replacement. By hand
allow-all Removed. Yes
debounce Now integer milliseconds: :debounce="250" for 250ms, :debounce="1000" for 1s. For literal values
min-chars Check the length in the search-model handler. By hand
allow-all-text Removed, with no replacement. By hand
remove-all-text Removed, with no replacement. By hand
search-function The deprecated choices, choices-offline and tags tags still call it. combobox doesn't: set search-model to a property and search in its updated hook, or call your method with wire:search-change="yourMethod($event.detail.search)". By hand
option-value Manual: map options to { value, label, description }. By hand
option-label Manual: see optionValue. By hand
option-sub-label Manual: becomes each option's description. By hand
option-avatar Use the option's icon or the item scoped slot. By hand
values-as-string Removed. Yes
height Removed, with no replacement. By hand
no-result-text Now empty-label. Yes
error-class Now the error key of classes. Yes
omit-error Removed. Yes
first-error-only Removed. Yes
lazy-load Removed. Yes
lazy-load-method Removed, with no replacement. By hand
lazy-load-modifier Removed, with no replacement. By hand
has-more-options Removed. Yes
selection Slot removed; chips render the label. By hand
prepend Removed, with no replacement. By hand
append Removed, with no replacement. By hand

<x-artisanpack-choices-offline> → <x-artisanpack-combobox>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
icon Now leading-icon. Yes
icon-right Removed, with no replacement. By hand
inline Removed. Yes
prefix Removed, with no replacement. By hand
suffix Removed, with no replacement. By hand
searchable Removed. Filtering is always on. Yes
single Now multiple, with the opposite meaning: the flag becomes multiple set to false. Yes
compact Removed. Yes
compact-text Removed, with no replacement. By hand
allow-all Removed. Yes
debounce Now integer milliseconds: :debounce="250" for 250ms, :debounce="1000" for 1s. For literal values
min-chars Check the length in the search-model handler. By hand
allow-all-text Removed, with no replacement. By hand
remove-all-text Removed, with no replacement. By hand
option-value Manual: map options to { value, label, description }. By hand
option-label Manual: see optionValue. By hand
option-sub-label Manual: becomes each option's description. By hand
option-avatar Use the option's icon or the item scoped slot. By hand
values-as-string Removed. Yes
height Removed, with no replacement. By hand
no-result-text Now empty-label. Yes
error-class Now the error key of classes. Yes
omit-error Removed. Yes
first-error-only Removed. Yes
selection Slot removed; chips render the label. By hand
prepend Removed, with no replacement. By hand
append Removed, with no replacement. By hand
search-function The deprecated choices, choices-offline and tags tags still call it. combobox doesn't: set search-model to a property and search in its updated hook, or call your method with wire:search-change="yourMethod($event.detail.search)". By hand

<x-artisanpack-code>

2.x 3.0 Automatic
hint Gone: remove it; Code is read-only and shows no hint. By hand
light-theme The 2.x Ace editor is now CodeEditor; Code is read-only. By hand
dark-theme Removed, with no replacement. By hand
light-class Code has no light part. Style it with class, or a classes key: root, header, file, language, copy, status, pre, line. By hand
dark-class Code has no dark part. Style it with class, or a classes key: root, header, file, language, copy, status, pre, line. By hand
height Removed, with no replacement. By hand
line-height Gone: remove it; set line height through classes or tokens. By hand
print-margin Removed. Yes

<x-artisanpack-collapse>

2.x 3.0 Automatic
name Removed, with no replacement. By hand
separator Removed. Yes
no-icon Removed. Yes
collapse-plus-minus Removed, with no replacement. By hand
glass Not in the 3.0 API (planned as surface). Remove it, or check the component's docs for what replaces it. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand
heading Now label. Yes
content Use the default slot. Deprecated alias kept in 3.0. By hand
<x-slot:content> Use the default slot. Deprecated alias kept in 3.0. By hand
<x-slot:heading> Now <x-slot:label>. Yes

<x-artisanpack-colorpicker> → <x-artisanpack-color-picker>

2.x 3.0 Automatic
icon Gone: remove it; the swatch trigger sits at the start of the field. By hand
icon-right Gone: remove it; the field has no trailing icon. By hand
hint-class Now the hint key of classes. Yes
prefix Ignored in 3.0: remove it. By hand
suffix Ignored in 3.0: remove it. By hand
inline Removed. Ignored in 3.0; the label always sits above the field. Yes
clearable Removed. There is no clear button. Yes
random Removed. There is no random-color button. Yes
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-datepicker> → <x-artisanpack-date-picker>

2.x 3.0 Automatic
icon Ignored in 3.0: remove it; the field has no icon prop. By hand
icon-right Ignored in 3.0: remove it; the calendar trigger sits at the end of the field. By hand
hint-class Now the hint key of classes. Yes
inline Removed. Ignored in 3.0; the label always sits above the field. Yes
config Replace the flatpickr config with mode, min, max, format and time; other options are ignored. By hand
color Ignored in 3.0: remove it; colors come from the theme tokens. By hand
color-adjustment Per-instance color math. Theming belongs in tokens. By hand
theme Ignored in 3.0: remove it; the picker is styled by the design tokens. By hand
font-config Ignored in 3.0: remove it; fonts come from the design tokens. By hand
dark-mode-support Removed. Ignored: dark mode comes from the theme. Yes
prepend Gone: put the related control next to the field instead. By hand
append Gone: put the related control next to the field instead. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-datetime> → <x-artisanpack-date-picker>

2.x 3.0 Automatic
icon Ignored in 3.0: remove it; the field has no icon prop. By hand
icon-right Ignored in 3.0: remove it; the calendar trigger sits at the end of the field. By hand
hint-class Now the hint key of classes. Yes
inline Removed. Ignored in 3.0; the label always sits above the field. Yes
prepend Gone: put the related control next to the field instead. By hand
append Gone: put the related control next to the field instead. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-diff>

2.x 3.0 Automatic
old Now old-content. Yes
new Now new-content. Yes
config Gone: use view, word-level and context instead of the diff2html config. By hand

<x-artisanpack-drawer>

2.x 3.0 Automatic
right Now side="end". Yes
subtitle Now description. Yes
separator Removed. Yes
with-close-button Removed. The close button always renders; hideClose removes it. Yes
close-on-escape Removed. Escape always closes. Yes
without-trap-focus Removed. Disabling focus trap breaks the WCAG 2.2 AA dialog contract. Yes
open-on Removed, with no replacement. By hand
close-on Removed, with no replacement. By hand
glass Now surface. Yes
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand
actions Now footer. Yes
<x-slot:subtitle> Now <x-slot:description>. Yes
<x-slot:actions> Now <x-slot:footer>. Yes

<x-artisanpack-dropdown> → <x-artisanpack-dropdown-menu>

2.x 3.0 Automatic
label Unchanged. Still the trigger's text. Yes
icon Gone: the trigger always shows a chevron; put a custom icon in the label slot. By hand
right Now align="end". Yes
top Removed. DropdownMenu has no vertical placement prop. Yes
no-xanchor Removed. Superseded by behavior-engine positioning. Yes
glass Now surface. Yes
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand
trigger Put the trigger's content in the label slot; the trigger is always a Button. By hand
<x-slot:trigger> Put the trigger's content in the label slot; the trigger is always a Button. By hand

<x-artisanpack-editor> → <x-artisanpack-rich-text-editor>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
gpl-license Removed. The engine runs TinyMCE without it. Yes
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-errors> → <x-artisanpack-validation-summary>

2.x 3.0 Automatic
description Gone: ValidationSummary shows only a title and the list of errors. By hand
icon Gone: the icon follows color (error or warning). By hand

<x-artisanpack-fieldset>

2.x 3.0 Automatic
subtitle Now description. Yes
icon Gone: add an icon to your own content if you need one. By hand
separator Gone: pick a variant (panel, divided or plain) instead. By hand
bg-color Raw color passthrough. Use color or classes. By hand
text-color Raw color passthrough. Use color or classes. By hand
border Gone: pick a variant (panel is bordered) or style through classes. By hand
middle Gone: place the content inside the fieldset yourself. By hand
actions Gone: place the buttons inside the fieldset yourself. By hand
<x-slot:subtitle> Now <x-slot:description>. Yes

<x-artisanpack-file>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
hide-progress Removed. Upload progress always shows in the file list. Yes
crop-after-change Removed. File no longer crops images; ImageLibrary does. Yes
change-text Gone with the image preview: remove it. By hand
crop-title-text Gone with cropping: remove it (ImageLibrary still crops). By hand
crop-cancel-text Gone with cropping: remove it (ImageLibrary still crops). By hand
crop-save-text Gone with cropping: remove it (ImageLibrary still crops). By hand
crop-config Gone with cropping: remove it (ImageLibrary still crops). By hand
crop-mime-type Gone with cropping: remove it (ImageLibrary still crops). By hand
with-drag-drop Removed. The drop zone is always on. Yes
drag-drop-text Use title for the drop zone's main line. By hand
drag-drop-class Now the dropzone key of classes. Yes
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-form>

2.x 3.0 Automatic
no-separator Removed. The actions row has no edge unless you add divided. Yes

<x-artisanpack-group> → <x-artisanpack-radio-group>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
option-value Gone: give each options entry a value key. By hand
option-label Gone: give each options entry a label key. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand
inline Now orientation="horizontal". Yes

<x-artisanpack-header> → <x-artisanpack-page-header>

2.x 3.0 Automatic
subtitle Now description. Yes
separator Removed. Yes
progress-indicator Removed, with no replacement. By hand
progress-indicator-class Removed, with no replacement. By hand
with-anchor Removed. Yes
size level sets the heading. By hand
icon Removed, with no replacement. By hand
icon-classes PageHeader has no icon part. Style it with class, or a classes key: root, breadcrumbs, row, meta, title, description, actions, tabs. By hand
middle Not part of PageHeader: move the content into the actions or meta slot. By hand
<x-slot:subtitle> Now <x-slot:description>. Yes

<x-artisanpack-heading>

2.x 3.0 Automatic
color Gone: use classes for a one-off color. By hand
semibold Removed. Headings are always 600 weight. Yes
bold Removed. Headings are always 600 weight; use classes for a heavier one. Yes
extrabold Removed. Headings are always 600 weight; use classes for a heavier one. Yes
center Gone: center the heading with your own class. By hand
uuid Internal wire:key plumbing; never public API. By hand

<x-artisanpack-icon>

2.x 3.0 Automatic
label Meaning change: was visible text beside the icon, now the accessible name. By hand
uuid Internal wire:key plumbing; never public API. By hand
2.x 3.0 Automatic
aspect-ratio Ignored in 3.0: remove it; thumbnails are always 4:3. By hand
gap Ignored in 3.0: remove it. By hand
enable-lightbox Now lightbox. Yes
show-captions Removed. Ignored: captions show whenever an image has one. Yes
layout Ignored in 3.0: remove it; the gallery is always a grid. By hand
lazy-load Removed. Ignored: thumbnails are always lazy-loaded. Yes
filters Ignored in 3.0: remove it; filter the images array yourself. By hand
items-per-page Ignored in 3.0: remove it; paginate the images array yourself. By hand
loading-style Ignored in 3.0: remove it. By hand

<x-artisanpack-image-library>

2.x 3.0 Automatic
hide-errors Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand
preview Now assets. Yes
with-drag-drop Now droppable. Yes
drag-drop-multiple-text Ignored in 3.0: remove it; the drop overlay no longer counts files. By hand
drag-drop-class Now the dropzone key of classes. Yes

<x-artisanpack-image-slider>

2.x 3.0 Automatic
with-arrows Removed. Ignored: the arrows always show. Yes
with-indicators Removed. Ignored: the dots always show. Yes
auto-play Now autoplay. Yes
auto-play-interval Now interval. Yes
pause-on-hover Removed. Ignored: autoplay always pauses on hover and focus. Yes
transition Ignored in 3.0: remove it; slides always scroll. By hand
transition-duration Ignored in 3.0: remove it; slides always scroll. By hand
show-counter Removed. Ignored: the counter always shows. Yes
enable-lightbox Removed. ImageSlider has no lightbox; use ImageGallery. Yes

<x-artisanpack-input>

2.x 3.0 Automatic
icon Now leading-icon. Yes
icon-right Now trailing-icon. Yes
hint-class Now the hint key of classes. Yes
inline Removed. The label always sits above the field. Yes
clearable Removed. There is no clear button. Yes
money Gone: currency masking isn't built in; format the value yourself. By hand
locale Gone with money: remove it. By hand
prepend Gone: put the control next to the field, or use prefix for text inside the box. By hand
append Gone: put the control next to the field, or use suffix for text inside the box. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-kpi-card>

2.x 3.0 Automatic
title stat.label. By hand
value stat.value. By hand
icon stat.icon. By hand
change stat.change. By hand
change-label stat.description. By hand
sparkline-data Now sparkline. Yes
sparkline-type Always an area sparkline. By hand
sparkline-color Removed, with no replacement. By hand
glass Not in the 3.0 API (planned as surface). Remove it, or check the component's docs for what replaces it. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand
footer Gone: render the content after the card, or use period and target. By hand
<x-slot:footer> Gone: render the content after the card, or use period and target. By hand
2.x 3.0 Automatic
color Gone: use tone, or tokens and classes. By hand
underline Removed. Inline links are always underlined; standalone drops it. Yes
hover-underline Removed. Use standalone for a link without the inline underline. Yes
no-wire-navigate Now navigate, with the opposite meaning: the flag becomes navigate set to false. Yes
icon Now leading-icon. Yes
icon-right Now trailing-icon. Yes
tooltip Now content on a <x-artisanpack-tooltip> wrapped around the element. Yes
tooltip-left Now content on a <x-artisanpack-tooltip> wrapped around the element with placement="start". Yes
tooltip-right Now content on a <x-artisanpack-tooltip> wrapped around the element with placement="end". Yes
tooltip-bottom Now content on a <x-artisanpack-tooltip> wrapped around the element with placement="bottom". Yes
uuid Internal wire:key plumbing; never public API. By hand
tooltip-position Now placement on a <x-artisanpack-tooltip> wrapped around the element. Yes

<x-artisanpack-list-item>

2.x 3.0 Automatic
no-separator Removed. The separator is the List's variant. Yes
no-hover Removed. Hover comes from the row's interactive or href. Yes
link Now href. Yes
icon Now leading-icon. Yes
icon-type Gone: choose the icon with leading-icon or the leading slot. By hand
no-icon Removed. No icon shows unless leading-icon or the leading slot is set. Yes
actions Now trailing. Yes
icon-slot Use the leading slot. By hand
<x-slot:actions> Now <x-slot:trailing>. Yes
<x-slot:avatar> Now <x-slot:leading>. Yes
<x-slot:sub-value> Now <x-slot:description>. Yes
<x-slot:value> Now <x-slot:title>. Yes

<x-artisanpack-loading>

2.x 3.0 Automatic
custom-svg Gone: use variant (spinner or dots). By hand
animated Removed. The indicator always animates. Yes

<x-artisanpack-main> → <x-artisanpack-app-shell>

2.x 3.0 Automatic
content Slot. Use the default slot. By hand
full-width Removed. Yes
with-nav Removed. Put a Menu in the sidebar slot. Yes
collapse-text Now collapse-label. Yes
collapse-icon Ignored in 3.0: remove it; the collapse button's icon is fixed. By hand
<x-slot:content> Slot. Use the default slot. By hand

<x-artisanpack-markdown>

2.x 3.0 Automatic
label Now editor-label. Yes
hint Removed, with no replacement. By hand
hint-class Markdown has no hint part. Style it with class, or a classes key: root, editor, preview, split, task. By hand
disk Markdown image uploads are removed. By hand
folder Removed, with no replacement. By hand
config EasyMDE is removed; use mode="write" or mode="split" for the editor. By hand
error-class Markdown has no error part. Style it with class, or a classes key: root, editor, preview, split, task. By hand
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-menu>

2.x 3.0 Automatic
icon Gone: add a menu-title child for the heading instead. By hand
icon-classes Now the icon key of classes. Yes
separator Gone: add a menu-separator child instead. By hand
active-bg-color Gone: use classes or the design tokens. By hand
glass Not in the 3.0 API (planned as surface). Remove it, or check the component's docs for what replaces it. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand

<x-artisanpack-menu-item>

2.x 3.0 Automatic
icon-classes Per-part class props are gone here. Use class, or the parent's classes. By hand
spinner Gone: remove it. By hand
link Now href. Yes
no-wire-navigate Now navigate, with the opposite meaning: the flag becomes navigate set to false. Yes
badge-classes Per-part class props are gone here. Use class, or the parent's classes. By hand
active Now current. Yes
separator Gone: add a menu-separator child after the item. By hand
bg-color Raw color passthrough. Use color or classes. By hand
role Gone: remove it; role="menuitem" is no longer rendered. By hand

<x-artisanpack-menu-separator>

2.x 3.0 Automatic
icon Gone: the separator is a plain rule; remove it. By hand
icon-classes Per-part class props are gone here. Use class, or the parent's classes. By hand

<x-artisanpack-menu-sub>

2.x 3.0 Automatic
icon-classes Per-part class props are gone here. Use class, or the parent's classes. By hand
active Removed. A sub opens by itself when it holds the current page. Yes
bg-color Raw color passthrough. Use color or classes. By hand

<x-artisanpack-menu-title>

2.x 3.0 Automatic
icon Gone: the title is text only; remove it. By hand
icon-classes Per-part class props are gone here. Use class, or the parent's classes. By hand

<x-artisanpack-modal> → <x-artisanpack-dialog>

2.x 3.0 Automatic
title Unchanged. Still the heading and the accessible name. Yes
subtitle Now description. Yes
box-class Now the root key of classes. Yes
separator Removed. The dialog draws its own header and footer. Yes
persistent Gone: use role="alertdialog" so the backdrop doesn't close it, and hide-close to drop the close button; Escape still closes. By hand
without-trap-focus Removed. Disabling focus trap breaks the WCAG 2.2 AA dialog contract. Yes
glass Now surface. Yes
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand
actions Now footer. Yes
<x-slot:subtitle> Now <x-slot:description>. Yes
<x-slot:actions> Now <x-slot:footer>. Yes

<x-artisanpack-nav> → <x-artisanpack-navbar>

2.x 3.0 Automatic
full-width Removed. The bar is full width; put it in your own container to constrain it. Yes

<x-artisanpack-pagination>

2.x 3.0 Automatic
per-page-values Gone: pair Pagination with a Select for "Rows per page". By hand
simple Removed. There is one design. Yes
compact Removed. There is one design. Yes
advanced Removed. There is one design. Yes
minimal Removed. There is one design. Yes
hide-per-page Removed. Pagination has no per-page select. Yes
hide-page-info Now summary, with the opposite meaning: the flag becomes summary set to false. Yes
show-first-last Removed. There are no first and last buttons. Yes
show-jump-to Removed. There is no jump-to field. Yes
on-each-side Now siblings. Yes
size Gone: there is one size; remove it. By hand
page-info-template Now summary-label. Yes

<x-artisanpack-password>

2.x 3.0 Automatic
icon Now leading-icon. Yes
icon-right Gone: the reveal button sits at the end of the field; remove it. By hand
hint-class Now the hint key of classes. Yes
prefix Gone: remove it. By hand
suffix Gone: remove it. By hand
inline Removed. The label always sits above the field. Yes
clearable Removed. There is no clear button. Yes
password-icon Gone: the reveal button's icons are fixed; remove it. By hand
password-visible-icon Gone: the reveal button's icons are fixed; remove it. By hand
right Removed. The reveal button is always at the end of the field. Yes
only-password Removed. The reveal button always shows. Yes
prepend Gone: put the control next to the field instead. By hand
append Gone: put the control next to the field instead. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand
uuid Internal wire:key plumbing; never public API. By hand

<x-artisanpack-pin>

2.x 3.0 Automatic
size Now length. Yes
numeric Now type="numeric". Yes
hide Now mask. Yes
hide-type Gone: mask always shows a dot; remove it. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-popover>

2.x 3.0 Automatic
position Now placement. Values: left is now start, right is now end. left and right are now start and end. Yes
offset Removed, with no replacement. By hand
glass Not in the 3.0 API (planned as surface). Remove it, or check the component's docs for what replaces it. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand
content Slot. Use the default slot; deprecated alias kept in 3.0. By hand
<x-slot:content> Slot. Use the default slot; deprecated alias kept in 3.0. By hand

<x-artisanpack-profile> → <x-artisanpack-user-menu>

2.x 3.0 Automatic
image Pass the image URL as avatar in the user array. By hand
color Gone: remove it. By hand
color-adjustment Per-instance color math. Theming belongs in tokens. By hand
subtitle Pass the text as role in the user array. By hand
right Not in the 3.0 API (planned as end). Remove it, or check the component's docs for what replaces it. By hand
top Removed. UserMenu has no vertical placement prop. Yes
no-xanchor Removed. Superseded by behavior-engine positioning. Yes

<x-artisanpack-progress-radial>

2.x 3.0 Automatic
unit Gone: use value-text for a value other than a percentage. By hand

<x-artisanpack-radio> → <x-artisanpack-radio-group>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
option-value Gone: give each options entry a value key. By hand
option-label Gone: give each options entry a label key. By hand
option-hint Gone: give each options entry a description key. By hand
inline Now orientation="horizontal". Yes
card variant="cards". By hand
card-class Now the item key of classes. Yes
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-radio-group>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
option-value Gone: give each options entry a value key. By hand
option-label Gone: give each options entry a label key. By hand
option-hint Gone: give each options entry a description key. By hand
horizontal Now orientation="horizontal". Yes
card variant="cards". By hand
card-class Now the item key of classes. Yes
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand
inline Now orientation="horizontal". Yes

<x-artisanpack-range>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-rating>

2.x 3.0 Automatic
total Now max. Yes
icon Gone: the rating always draws stars; remove it. By hand
filled-icon Gone: the rating always draws stars; remove it. By hand
empty-icon Gone: the rating always draws stars; remove it. By hand
color Gone: style the stars through tokens or classes. By hand
filled-color Gone: style the stars through tokens or classes. By hand
empty-color Gone: style the stars through tokens or classes. By hand
half-stars Removed. A readonly rating rounds to the nearest half star by itself. Yes
hover-effect Removed. Remove it. Yes
show-value Removed. A readonly rating shows its value by itself. Yes
value-format Gone: remove it; value-label sets the text alternative (:value, :max). By hand
clearable Removed. There is no clear button. Yes
clear-icon Gone with clearable: remove it. By hand
inline-label Removed. Gone: label is the accessible name, not visible text. Yes
helper Gone: render help text beside the rating yourself. By hand
error Gone: Rating isn't a field and shows no error; render the message yourself. By hand

<x-artisanpack-select>

2.x 3.0 Automatic
icon Now leading-icon. Yes
icon-right Gone: the select's indicator sits at the end; remove it. By hand
hint-class Now the hint key of classes. Yes
prefix Gone: remove it; use leading-icon or a label. By hand
suffix Gone: remove it. By hand
placeholder-value Gone: the placeholder option's value is always empty. By hand
inline Removed. The label always sits above the field. Yes
option-value Gone: give each options entry a value key. By hand
option-label Gone: give each options entry a label key. By hand
prepend Gone: put the control next to the field instead. By hand
append Gone: put the control next to the field instead. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-select-group> → <x-artisanpack-select>

2.x 3.0 Automatic
icon Now leading-icon. Yes
icon-right Gone: the select's indicator sits at the end; remove it. By hand
hint-class Now the hint key of classes. Yes
placeholder-value Gone: the placeholder option's value is always empty. By hand
inline Removed. The label always sits above the field. Yes
option-value Gone: pass groups as [ 'label' => …, 'options' => [ [ 'value' => …, 'label' => … ] ] ]. By hand
option-label Gone: pass groups as [ 'label' => …, 'options' => [ [ 'value' => …, 'label' => … ] ] ]. By hand
prepend Gone: put the control next to the field instead. By hand
append Gone: put the control next to the field instead. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-separator> → <x-artisanpack-divider>

2.x 3.0 Automatic
target The 2.x loading bar is dropped; use Progress. By hand
progress Removed. The 2.x loading bar is dropped; use Progress. Yes
color Use strength. By hand
image Removed, with no replacement. By hand
vertical Now orientation="vertical". Yes

<x-artisanpack-signature>

2.x 3.0 Automatic
clear-text Now clear-label. Yes
hint-class Now the hint key of classes. Yes
config Gone: the signature_pad options no longer apply; use pen-color and modes. By hand
clear-btn-style Gone: style the Clear button through classes. By hand
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-sparkline>

2.x 3.0 Automatic
type Now variant. Yes
color Gone: the trend uses --apui-chart-1; set that token on a parent to change it. By hand
stroke-width Gone: remove it. By hand
curve Gone: remove it. By hand
fill-opacity Gone: remove it; use variant="area" for a filled trend. By hand

<x-artisanpack-spotlight>

2.x 3.0 Automatic
search-text Now placeholder. Yes
no-results-text Now empty-text. Yes
uuid Internal wire:key plumbing; never public API. By hand
append Now footer. Yes
<x-slot:append> Now <x-slot:footer>. Yes

<x-artisanpack-stat>

2.x 3.0 Automatic
title Now label. Yes
tooltip Now content on a <x-artisanpack-tooltip> wrapped around the element. Yes
tooltip-left Now content on a <x-artisanpack-tooltip> wrapped around the element with placement="start". Yes
tooltip-right Now content on a <x-artisanpack-tooltip> wrapped around the element with placement="end". Yes
tooltip-bottom Now content on a <x-artisanpack-tooltip> wrapped around the element with placement="bottom". Yes
icon-position Removed, with no replacement. By hand
title-position Removed, with no replacement. By hand
content-align Removed, with no replacement. By hand
glass Not in the 3.0 API (planned as surface). Remove it, or check the component's docs for what replaces it. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand
sparkline-data Use KpiCard's sparkline. By hand
sparkline-type Removed, with no replacement. By hand
sparkline-color Removed, with no replacement. By hand
change-label Now description. Yes
animate Removed. Yes
animate-duration Removed, with no replacement. By hand

<x-artisanpack-step>

2.x 3.0 Automatic
text Now title. Yes
step-classes Per-part class props are gone here. Use class, or the parent's classes. By hand
data-content Gone: the marker shows the step number, or icon. By hand

<x-artisanpack-steps>

2.x 3.0 Automatic
vertical Now orientation="vertical". Yes
steps-color Not in the 3.0 API (planned as color). Remove it, or check the component's docs for what replaces it. By hand
stepper-classes Steps has no stepper part. Style it with class, or a classes key: root, step, marker, title, connector, description. By hand
glass Not in the 3.0 API (planned as surface). Remove it, or check the component's docs for what replaces it. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand

<x-artisanpack-streamable-content>

2.x 3.0 Automatic
tag Removed, with no replacement. By hand
prose Removed. Yes
placeholder Removed, with no replacement. By hand
show-cursor Removed. The caret part shows while streaming. Yes

<x-artisanpack-subheading> → <x-artisanpack-text>

2.x 3.0 Automatic
color Gone: use tone, or classes for a one-off color. By hand
semibold Now weight="semibold". Yes
bold Now weight="semibold". Yes
center Gone: center the text with your own class. By hand
muted Now tone="muted". Yes

<x-artisanpack-swap>

2.x 3.0 Automatic
true Pass the content in the on slot; as an attribute it is no longer read. By hand
false Pass the content in the off slot; as an attribute it is no longer read. By hand
true-icon Now on-icon. Yes
false-icon Now off-icon. Yes
icon-size Removed, with no replacement. By hand
<x-slot:false> Now <x-slot:off>. Yes
<x-slot:true> Now <x-slot:on>. Yes
<x-slot:after> Gone: put the content beside the swap yourself. By hand
<x-slot:before> Gone: put the content beside the swap yourself. By hand

<x-artisanpack-tab>

2.x 3.0 Automatic
content-classes Per-part class props are gone here. Use class, or the parent's classes. By hand

<x-artisanpack-table>

2.x 3.0 Automatic
striped Removed. Yes
no-headers Now hide-headers. Yes
with-pagination Now paginated. Yes
show-empty-text Removed. No longer needed: an empty table always shows the empty state. Yes
container-class Classes go on the root div. By hand
no-hover Removed. Yes
uuid Internal wire:key plumbing; never public API. By hand
header-glass Removed, with no replacement. By hand
header-glass-tint Replaced by glass surface tokens. By hand
header-glass-tint-opacity Replaced by glass surface tokens. By hand
virtual-scroll Removed. Yes
virtual-row-height Removed, with no replacement. By hand
virtual-buffer Removed, with no replacement. By hand
virtual-container-height Removed, with no replacement. By hand
exportable Removed. TableExporter remains for server-side export. Yes
export-formats Removed, with no replacement. By hand
export-filename Removed, with no replacement. By hand
tr Not rendered: remove it; use row-decoration for row classes. By hand
sort-handle-slot Gone: the drag handle is built in (a grip icon); remove it. By hand

<x-artisanpack-tabs>

2.x 3.0 Automatic
selected Now value. Yes
gap Gone: use classes or the design tokens. By hand
label-color-classes Tabs has no labelColor part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
active-color-classes Tabs has no activeColor part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
label-class Tabs has no label part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
active-class Tabs has no active part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
label-div-class Tabs has no labelDiv part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
tabs-class Tabs has no tabs part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
vertical-tabs-class Tabs has no verticalTabs part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
vertical-label-class Tabs has no verticalLabel part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
vertical-active-class Tabs has no verticalActive part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
vertical-label-div-class Tabs has no verticalLabelDiv part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
vertical-content-class Tabs has no verticalContent part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
vertical-right-active-class Tabs has no verticalRightActive part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
vertical-right-label-div-class Tabs has no verticalRightLabelDiv part. Style it with class, or a classes key: root, list, trigger, icon, count, content. By hand
glass Not in the 3.0 API (planned as surface). Remove it, or check the component's docs for what replaces it. By hand
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand

<x-artisanpack-tags> → <x-artisanpack-combobox>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
icon Now leading-icon. Yes
icon-right Removed, with no replacement. By hand
inline Removed. Yes
prefix Removed, with no replacement. By hand
suffix Removed, with no replacement. By hand
searchable Removed. choices: becomes remote (server search). choices-offline: dropped, filtering is always on. Yes
debounce Now integer milliseconds: :debounce="250" for 250ms, :debounce="1000" for 1s. For literal values
min-chars Check the length in the search-model handler. By hand
search-function The deprecated choices, choices-offline and tags tags still call it. combobox doesn't: set search-model to a property and search in its updated hook, or call your method with wire:search-change="yourMethod($event.detail.search)". By hand
option-value Manual: map options to { value, label, description }. By hand
option-label Manual: see optionValue. By hand
option-sub-label Manual: becomes each option's description. By hand
option-avatar Use the option's icon or the item scoped slot. By hand
height Removed, with no replacement. By hand
no-result-text Now empty-label. Yes
allow-custom-tags Now allow-create. Yes
custom-tags-text Now create-label. Yes
prepend Removed, with no replacement. By hand
append Removed, with no replacement. By hand
error-class Now the error key of classes. Yes
omit-error Removed. Yes
first-error-only Removed. Yes
single Now multiple, with the opposite meaning: the flag becomes multiple set to false. Yes

<x-artisanpack-text>

2.x 3.0 Automatic
color Gone: use tone, or classes for a one-off color. By hand
semibold Now weight="semibold". Yes
bold Now weight="semibold". Yes
center Gone: center the text with your own class. By hand
muted Now tone="muted". Yes
lead Now size="lead". Yes
prose Removed. Text no longer adds prose styles or a bottom margin. Yes

<x-artisanpack-textarea>

2.x 3.0 Automatic
hint-class Now the hint key of classes. Yes
inline Removed. The label always sits above the field. Yes
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand

<x-artisanpack-theme-toggle>

2.x 3.0 Automatic
light Now light-label. Yes
dark Now dark-label. Yes
light-theme Removed, with no replacement. By hand
dark-theme Removed, with no replacement. By hand
light-class ThemeToggle has no light part. Style it with class, or a classes key: root. By hand
dark-class ThemeToggle has no dark part. Style it with class, or a classes key: root. By hand
with-label Removed. Yes

<x-artisanpack-timeline-item>

2.x 3.0 Automatic
subtitle Now time. Yes
pending Removed. Yes
first Removed. Ignored: the list draws its own line. Yes
last Removed. Ignored: the list draws its own line. Yes

<x-artisanpack-toast>

2.x 3.0 Automatic
position Set placement on <x-artisanpack-toaster> instead (for example top-end). By hand
color-adjustment Per-instance color math. Theming belongs in tokens. By hand
duration Set duration on <x-artisanpack-toaster> instead. By hand
glass Now surface. Yes
glass-tint Replaced by glass surface tokens. By hand
glass-tint-opacity Replaced by glass surface tokens. By hand

<x-artisanpack-toggle>

2.x 3.0 Automatic
right Removed. The label always follows the switch. Yes
hint Now description. Yes
hint-class Now the description key of classes. Yes
error-class Now the error key of classes. Yes
omit-error Not in the 3.0 API (planned as hideError). Remove it, or check the component's docs for what replaces it. By hand
<x-slot:hint> Now <x-slot:description>. Yes

<x-artisanpack-widget-grid> → <x-artisanpack-grid>

2.x 3.0 Automatic
cols Now columns. Yes

7. After the command

  • Work through the manual lines of the report, then the class lines.
  • Icons. String icon names resolve against the design system's Lucide set first (leading-icon="plus"). Heroicons and Font Awesome names (o-plus, fa-user) still render through blade-icons, so nothing breaks, but new markup should use the registry names.
  • Events. Components report changes as value-change and open-change. wire:model covers both, so most apps have nothing to do; listeners for 2.x events such as theme-changed or row-selection need the new names.
  • Defaults that moved. A Drawer opens from the end side (the command adds side="start" where 2.x relied on the old default). Combobox is single-select where Choices was multiple (the command adds multiple). A Form draws no separator unless divided is set. A Pin is numeric by default: add type="alphanumeric" where 2.x accepted any character.
  • Run your tests, and look at each page in light, dark and high-contrast themes.

Stay in the Loop

Monthly tips, tutorials and package updates — plus a free Quick Start cheat sheet.

Subscribe
Edit this page on GitHub