@shohojdhara/atomix 0.3.12 → 0.3.14

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.0.0] - 2026-01-20
+
+### Added
+- **Spinner**: Added `aria-label` (default "Loading") and `role` (default "status") props for improved accessibility.
+- **Badge**: Added `onRemove` callback and `aria-label` support. Providing `onRemove` automatically renders a close button.
+- **Input/Textarea**: Added `defaultValue` prop for uncontrolled component support.
+- **JSDoc**: Added `@default` tags to many component props for better developer experience and documentation.
+
+### Changed (Breaking)
+- **Standardized ARIA Props**: All ARIA-related props have been renamed from camelCase to kebab-case (e.g., `ariaLabel` -> `aria-label`) to align with native React/HTML standards.
+- **Toggle Component**: Refactored API to follow standard React form patterns. Removed `initialOn`, `onToggleOn`, and `onToggleOff`. Added `checked`, `defaultChecked`, and `onChange`.
+- **Rating Component**: Renamed `color` prop to `variant` for consistency with other components.
+- **Accordion Component**: Consolidated `onOpen` and `onClose` into a single `onOpenChange` handler.
+- **Callout Component**: Renamed `oneLine` to `compact` and `toast` to `isToast`.
+
+### Fixed
+- Fixed several accessibility issues across navigation components.
+- Improved focus management in `Modal` component.
+
 ## 0.3.11
 
 ### Patch Changes

package/README.md

@@ -16,6 +16,7 @@
   - [React Integration](#react-integration)
 - [Components](#components)
 - [API](#api)
+- [Migration Guide](#migration-guide)
 - [Contributing](#contributing)
 - [License](#license)
 
@@ -139,6 +140,7 @@ For a complete list, see [components documentation](./src/components/).
 
 ## API
 
+- [v2.0.0 Migration Guide](./MIGRATION_V2.md)
 - [Components API](./docs/components/README.md)
 - [Theme System](./docs/THEME_SYSTEM.md)
 - [CLI Reference](./docs/CLI_API_REFERENCE.md)

package/dist/atomix.css

@@ -1924,14 +1924,14 @@ a, a:hover {
   box-sizing: border-box;
   overflow: hidden;
   pointer-events: none;
-  /* postcss-ignore-start */
+  /* autoprefixer: ignore next */
   -webkit-mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
+  /* autoprefixer: ignore next */
   -webkit-mask-composite: xor;
-          -webkit-mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
-                  mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
-  -webkit-mask-composite: xor;
-          mask-composite: exclude;
-  /* postcss-ignore-end */
+  /* autoprefixer: ignore next */
+  mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
+  /* autoprefixer: ignore next */
+  mask-composite: exclude;
   position: var(--atomix-glass-position);
   top: var(--atomix-glass-top);
   left: var(--atomix-glass-left);
@@ -1941,11 +1941,6 @@ a, a:hover {
   transform: var(--atomix-glass-transform);
   transition: var(--atomix-glass-transition);
 }
-@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)){
-.c-atomix-glass__border-1, .c-atomix-glass__border-2 {
-  -webkit-mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
-}
-}
 .c-atomix-glass__border-1 {
   opacity: var(--atomix-opacity-20, 0.2);
   mix-blend-mode: screen;
@@ -8465,12 +8460,12 @@ a, a:hover {
   --atomix-callout-width: 100%;
   --atomix-callout-padding-x: 1rem;
   --atomix-callout-padding-y: 1rem;
-  --atomix-callout-tost-padding-x: 1rem;
-  --atomix-callout-tost-padding-y: 1rem;
+  --atomix-callout-toast-padding-x: 1rem;
+  --atomix-callout-toast-padding-y: 1rem;
   --atomix-callout-bg: var(--atomix-body-bg);
   --atomix-callout-border-radius: 0.5rem;
   --atomix-callout-border-color: var(--atomix-border-color);
-  --atomix-callout-border-witdh: var(--atomix-border-width);
+  --atomix-callout-border-width: var(--atomix-border-width);
   --atomix-callout-title-font-size: 1rem;
   --atomix-callout-title-font-weight: 600;
   --atomix-callout-title-color: var(--atomix-body-color);
@@ -8560,7 +8555,7 @@ a, a:hover {
 .c-callout__close-btn:focus-visible {
   box-shadow: 0 0 0 2px var(--atomix-callout-border-color);
 }
-.c-callout--oneline .c-callout__message {
+.c-callout--compact .c-callout__message {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -8589,8 +8584,8 @@ a, a:hover {
 }
 .c-callout--toast .c-callout__close-btn {
   position: absolute;
-  top: var(--atomix-callout-tost-padding-y);
-  right: var(--atomix-callout-tost-padding-x);
+  top: var(--atomix-callout-toast-padding-y);
+  right: var(--atomix-callout-toast-padding-x);
 }
 .c-callout--toast:focus-visible {
   outline: 2px solid var(--atomix-callout-border-color);
@@ -8651,7 +8646,7 @@ a, a:hover {
   justify-content: center;
   align-items: center;
   padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
-  border: var(--atomix-callout-border-witdh) solid color-mix(in srgb, var(--atomix-callout-border-color) 20%, transparent);
+  border: var(--atomix-callout-border-width) solid color-mix(in srgb, var(--atomix-callout-border-color) 20%, transparent);
   max-width: var(--atomix-callout-width);
   border-radius: var(--atomix-callout-border-radius);
   width: 100%;
@@ -12949,37 +12944,37 @@ body.is-open-photoviewer {
   border-end-start-radius: var(--atomix-border-radius-pill);
   border-start-start-radius: var(--atomix-border-radius-pill);
 }
-.u-d-inline {
+.u-inline {
   display: inline;
 }
-.u-d-inline-block {
+.u-inline-block {
   display: inline-block;
 }
-.u-d-block {
+.u-block {
   display: block;
 }
-.u-d-grid {
+.u-grid {
   display: grid;
 }
-.u-d-inline-grid {
+.u-inline-grid {
   display: inline-grid;
 }
-.u-d-table {
+.u-table {
   display: table;
 }
-.u-d-table-row {
+.u-table-row {
   display: table-row;
 }
-.u-d-table-cell {
+.u-table-cell {
   display: table-cell;
 }
-.u-d-flex {
+.u-flex {
   display: flex;
 }
-.u-d-inline-flex {
+.u-inline-flex {
   display: inline-flex;
 }
-.u-d-none {
+.u-none {
   display: none;
 }
 .u-flex-fill {
@@ -13018,73 +13013,73 @@ body.is-open-photoviewer {
 .u-flex-wrap-reverse {
   flex-wrap: wrap-reverse;
 }
-.u-justify-content-start {
+.u-justify-start {
   justify-content: flex-start;
 }
-.u-justify-content-end {
+.u-justify-end {
   justify-content: flex-end;
 }
-.u-justify-content-center {
+.u-justify-center {
   justify-content: center;
 }
-.u-justify-content-between {
+.u-justify-between {
   justify-content: space-between;
 }
-.u-justify-content-around {
+.u-justify-around {
   justify-content: space-around;
 }
-.u-justify-content-evenly {
+.u-justify-evenly {
   justify-content: space-evenly;
 }
-.u-align-items-start {
+.u-items-start {
   align-items: flex-start;
 }
-.u-align-items-end {
+.u-items-end {
   align-items: flex-end;
 }
-.u-align-items-center {
+.u-items-center {
   align-items: center;
 }
-.u-align-items-baseline {
+.u-items-baseline {
   align-items: baseline;
 }
-.u-align-items-stretch {
+.u-items-stretch {
   align-items: stretch;
 }
-.u-align-content-start {
+.u-content-start {
   align-content: flex-start;
 }
-.u-align-content-end {
+.u-content-end {
   align-content: flex-end;
 }
-.u-align-content-center {
+.u-content-center {
   align-content: center;
 }
-.u-align-content-between {
+.u-content-between {
   align-content: space-between;
 }
-.u-align-content-around {
+.u-content-around {
   align-content: space-around;
 }
-.u-align-content-stretch {
+.u-content-stretch {
   align-content: stretch;
 }
-.u-align-self-auto {
+.u-self-auto {
   align-self: auto;
 }
-.u-align-self-start {
+.u-self-start {
   align-self: flex-start;
 }
-.u-align-self-end {
+.u-self-end {
   align-self: flex-end;
 }
-.u-align-self-center {
+.u-self-center {
   align-self: center;
 }
-.u-align-self-baseline {
+.u-self-baseline {
   align-self: baseline;
 }
-.u-align-self-stretch {
+.u-self-stretch {
   align-self: stretch;
 }
 .u-order-first {
@@ -15339,64 +15334,64 @@ body.is-open-photoviewer {
   -moz-column-gap: 50rem;
        column-gap: 50rem;
 }
-.u-fs-xs {
+.u-text-xs {
   font-size: 0.75rem;
 }
-.u-fs-sm {
+.u-text-sm {
   font-size: 0.875rem;
 }
-.u-fs-base {
+.u-text-base {
   font-size: 1rem;
 }
-.u-fs-md {
+.u-text-md {
   font-size: 1.125rem;
 }
-.u-fs-lg {
+.u-text-lg {
   font-size: 1.25rem;
 }
-.u-fs-xl {
+.u-text-xl {
   font-size: 1.5rem;
 }
-.u-fs-2xl {
+.u-text-2xl {
   font-size: 2rem;
 }
-.u-fs-h1 {
+.u-text-h1 {
   font-size: 2.5rem;
 }
-.u-fs-h2 {
+.u-text-h2 {
   font-size: 2rem;
 }
-.u-fs-h3 {
+.u-text-h3 {
   font-size: 1.5rem;
 }
-.u-fs-h4 {
+.u-text-h4 {
   font-size: 1.25rem;
 }
-.u-fs-h5 {
+.u-text-h5 {
   font-size: 1.125rem;
 }
-.u-fs-h6 {
+.u-text-h6 {
   font-size: 1rem;
 }
-.u-fs-display-1 {
+.u-text-display-1 {
   font-size: 4rem;
 }
-.u-fs-1 {
+.u-text-1 {
   font-size: 2.5rem;
 }
-.u-fs-2 {
+.u-text-2 {
   font-size: 2rem;
 }
-.u-fs-3 {
+.u-text-3 {
   font-size: 1.5rem;
 }
-.u-fs-4 {
+.u-text-4 {
   font-size: 1.25rem;
 }
-.u-fs-5 {
+.u-text-5 {
   font-size: 1.125rem;
 }
-.u-fs-6 {
+.u-text-6 {
   font-size: 1rem;
 }
 .u-fst-italic {
@@ -15405,37 +15400,55 @@ body.is-open-photoviewer {
 .u-fst-normal {
   font-style: normal;
 }
-.u-fw-light {
+.u-font-light {
   font-weight: 300;
 }
-.u-fw-normal {
+.u-font-normal {
   font-weight: 400;
 }
-.u-fw-medium {
+.u-font-medium {
   font-weight: 500;
 }
-.u-fw-semibold {
+.u-font-semibold {
   font-weight: 600;
 }
-.u-fw-bold {
+.u-font-bold {
   font-weight: 700;
 }
-.u-fw-heavy {
+.u-font-heavy {
   font-weight: 800;
 }
-.u-fw-black {
+.u-font-black {
   font-weight: 900;
 }
-.u-lh-base {
+.u-leading-base {
   line-height: 1.2;
 }
-.u-lh-sm {
+.u-leading-sm {
   line-height: 1.43;
 }
-.u-lh-lg {
+.u-leading-lg {
   line-height: 1.56;
 }
-.u-lh-1 {
+.u-leading-none {
+  line-height: 1;
+}
+.u-leading-tight {
+  line-height: 1.25;
+}
+.u-leading-snug {
+  line-height: 1.375;
+}
+.u-leading-normal {
+  line-height: 1.5;
+}
+.u-leading-relaxed {
+  line-height: 1.625;
+}
+.u-leading-loose {
+  line-height: 2;
+}
+.u-leading-1 {
   line-height: 1;
 }
 .u-text-start {
@@ -15447,15 +15460,15 @@ body.is-open-photoviewer {
 .u-text-center {
   text-align: center;
 }
-.u-td-none {
-  text-decoration: none;
-}
-.u-td-underline {
+.u-underline {
   text-decoration: underline;
 }
-.u-td-line-through {
+.u-line-through {
   text-decoration: line-through;
 }
+.u-no-underline {
+  text-decoration: none;
+}
 .u-text-lowercase {
   text-transform: lowercase;
 }