0.14.4

Fixed

• Fix an issue where the icon function name atoms don't exist yet when the icon
  component is rendered.

0.14.3

Changed

• Simplify example styles for icon component.

Fixed

• Remove extraneous whitespace from icon component.
• Handle modifiers without values and boolean modifiers in stories.

0.14.2

Fixed

• Icon story: Render all configured icons instead of only the first one.

0.14.1

Fixed

• Toggle hidden attribute in toggle button story properly.
• Set class name as string in the container function of some stories.

0.14.0

[0.14.0] - 2026-03-16

Changed

• Move data-numerator and data-denominator attributes in image component to inner image-frame element.

Fixed

• Add modifier data attributes to image component.

HTML diff

Before:

<figure class="image" data-numerator="16" data-denominator="9">
  <div class="image-frame">
    <img src="" alt="" loading="">
  </div>
  <figcaption></figcaption>
</figure>

After:

```html
<figure class="image">
  <div class="image-frame" data-numerator="16" data-denominator="9">
    <img src="" alt="" loading="">
  </div>
  <figcaption></figcaption>
</figure>

0.13.3

[0.13.3] - 2026-03-14

Changed

• Allow popovertarget attribute on button component.

0.13.2

Changed

• Require phoenix_storybook ~> 1.0.

0.13.1

Changed

• Add @doc type: {type} tags to compiled components for ExDoc grouping.

0.13.0

This release contains significant breaking changes. Check your component
styles carefully when upgrading.

Added

• Add :type option to modifiers, so that any attribute type can be used
  instead of only strings.

Changed

• Rename mix dog.classes to mix dog.safelist.
• Rename Doggo.classes/1 to Doggo.safelist/1.
• Include data attributes in mix dog.safelist and Doggo.safelist/1 output.
• Use data- attributes instead of classes for modifiers (see upgrade guide
  below).
• button_link component
  • Remove disabled_class option.
  • Use data-disabled attribute instead of the disabled_class
    (selector: [data-disabled]).
• field component
  • Remove addon_left_class, addon_right_class, and visually_hidden_class
    options.
  • Use data-addon attribute instead of addon_left_class and
    addon_right_class (selectors: [data-addon~="left"],
    [data-addon~="right"]).
  • Use data-visually-hidden attribute instead of visually_hidden_class
    (selector: [data-visually-hidden]).
  • Use data-invalid attribute instead of has-errors class
    (selector: [data-invalid]).
  • Use data-state attribute instead of {base_class}-switch-state-{on|off}
    classes (selectors: [data-state="on"], [data-state="off"]).
• frame and image component
  • Make ratio required for frame component.
  • Change format of ratio attribute (before: 16-by-9, after: 16:9).
  • Use data-numerator and data-denominator attributes instead of adding
    a class for the ratio (before: class="is-16-by-9", after:
    data-numerator="16" data-denominator="9").
• icon and icon_sprite component
  • Remove text_position_after_class, text_position_before_class,
    text_position_hidden_class, and visually_hidden_class options.
  • Use data-text-position class instead of text_position_* classes
    (selectors: [data-text-position="before"],
    [data-text-position="after"], [data-text-position="hidden"]).
  • Use data-visually-hidden attribute instead of visually_hidden_class
    (selector: [data-visually-hidden]).
• stack component
  • Remove recursive_class option.
  • Use data-recursive attribute instead of recursive_class
    (selector: [data-recursive]).
• steps component
  • Remove current_class, completed_class, upcoming_class, and
    visually_hidden_class options.
  • Use data-visually-hidden attribute instead of visually_hidden_class
    (selector: [data-visually-hidden]).
  • Use data-state attribute instead of current_class, completed_class,
    and upcoming_class (selectors: [data-state="current"],
    [data-state="completed"], [data-state="upcoming"]).

Removed

• Remove class_name_fun option.
• Remove Doggo.modifier_class_name/2.

Upgrade Guide

In previous versions, modifier attribute values would be reflected with CSS
classes in the HTML output.

For example, if you had a tag component with a size modifier like this:

build_tag(
  modifiers: [
    size: [values: ["small", "medium", "large"], default: "medium"]
  ]
)

And you used it like:

<.tag size="small">Hello</.tag>

This would result in the addition of an is-small class.

<span class="tag is-small">Hello</span>

The implementation was changed to use separate data attributes for each modifier
instead. Now, the generated HTML will look like this:

<span class="tag" data-size="small">Hello</span>

In your CSS styles, you will need to change the selectors accordingly.

Before:

.tag.is-small {
}

After:

.tag[data-size="small"] {
}

0.12.0

Changed

• Breaking: The icon component renders the inner SVG with a referenced icon
  module now instead of using an inner block.
• Add navigation slot to page_header component.