@boostdev/design-system-components 1.2.8 → 2.0.0

package/src/components/ui/Breadcrumb/Breadcrumb.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .breadcrumb {
     font-size: var(--bds-font_size--body--s);
   }

package/src/components/ui/Breadcrumb/Breadcrumb.native.mdx

@@ -12,7 +12,7 @@ React Native breadcrumb navigation showing the user's location within a hierarch
 ## Usage
 
 ```tsx
-import { Breadcrumb } from '@boostdev/components';
+import { Breadcrumb } from '@boostdev/design-system-components';
 
 <Breadcrumb
   items={[

package/src/components/ui/Calendar/Calendar.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .calendar {
     display: inline-flex;
     flex-direction: column;

package/src/components/ui/Calendar/Calendar.native.mdx

@@ -12,7 +12,7 @@ React Native calendar component for date selection. Renders a month grid with Pr
 ## Usage
 
 ```tsx
-import { Calendar } from '@boostdev/components';
+import { Calendar } from '@boostdev/design-system-components';
 
 <Calendar
   defaultValue={new Date(2026, 3, 15)}

package/src/components/ui/Carousel/Carousel.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .carousel {
     position: relative;
     display: flex;

package/src/components/ui/Carousel/Carousel.native.mdx

@@ -12,7 +12,7 @@ React Native carousel component using a horizontally paging ScrollView with dot
 ## Usage
 
 ```tsx
-import { Carousel } from '@boostdev/components';
+import { Carousel } from '@boostdev/design-system-components';
 import { View, Text } from 'react-native';
 
 <Carousel

package/src/components/ui/Collapsible/Collapsible.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .collapsible {
     border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
     border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));

package/src/components/ui/Collapsible/Collapsible.native.mdx

@@ -12,7 +12,7 @@ React Native collapsible section with an animated chevron and smooth expand/coll
 ## Usage
 
 ```tsx
-import { Collapsible } from '@boostdev/components';
+import { Collapsible } from '@boostdev/design-system-components';
 
 <Collapsible summary="More details">
   <Text>Hidden content revealed on press.</Text>

package/src/components/ui/DescriptionList/DescriptionList.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .list {
     display: flex;
     flex-direction: column;

package/src/components/ui/DescriptionList/DescriptionList.native.mdx

@@ -12,7 +12,7 @@ React Native description list for displaying key-value pairs. Each item has a bo
 ## Usage
 
 ```tsx
-import { DescriptionList } from '@boostdev/components';
+import { DescriptionList } from '@boostdev/design-system-components';
 
 <DescriptionList
   items={[

package/src/components/ui/Link/Link.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .link {
     color: var(--link_color, var(--bds-color_interactive_on-bg));
     text-decoration: underline;

package/src/components/ui/Link/Link.native.mdx

@@ -12,7 +12,7 @@ React Native link component using `Pressable` + `Text`. Opens URLs via `Linking.
 ## Usage
 
 ```tsx
-import { Link } from '@boostdev/components';
+import { Link } from '@boostdev/design-system-components';
 
 <Link href="https://example.com">Visit website</Link>
 <Link onPress={() => navigation.navigate('Settings')}>Settings</Link>

package/src/components/ui/Loading/Loading.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .loading {
     display: flex;
     justify-content: center;

package/src/components/ui/NotificationBanner/NotificationBanner.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .banner {
     display: flex;
     align-items: center;

package/src/components/ui/Pagination/Pagination.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .pagination {
     display: flex;
     justify-content: center;

package/src/components/ui/Pagination/Pagination.native.mdx

@@ -12,7 +12,7 @@ React Native pagination component for navigating between pages of content. Shows
 ## Usage
 
 ```tsx
-import { Pagination } from '@boostdev/components';
+import { Pagination } from '@boostdev/design-system-components';
 
 <Pagination
   currentPage={3}

package/src/components/ui/Progress/Progress.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .container {
     display: flex;
     flex-direction: column;

package/src/components/ui/ProgressCircle/ProgressCircle.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .wrapper {
     position: relative;
     display: inline-flex;

package/src/components/ui/ProgressCircle/ProgressCircle.native.mdx

@@ -12,7 +12,7 @@ React Native circular progress indicator. Displays progress as a ring with an op
 ## Usage
 
 ```tsx
-import { ProgressCircle } from '@boostdev/components';
+import { ProgressCircle } from '@boostdev/design-system-components';
 
 <ProgressCircle value={75} label="Upload progress" showValue />
 <ProgressCircle value={50} label="Loading" size="large" />

package/src/components/ui/Separator/Separator.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .separator {
     border: none;
     background-color: var(--separator_color, var(--bds-color_on-bg));

package/src/components/ui/Skeleton/Skeleton.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .skeleton {
     background: linear-gradient(
       90deg,

package/src/components/ui/SkipLink/SkipLink.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .skipLink {
     position: absolute;
     inset-block-start: var(--bds-space_s);

package/src/components/ui/Table/Table.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .wrapper {
     inline-size: 100%;
     overflow-inline: auto;

package/src/components/ui/Table/Table.native.mdx

@@ -12,7 +12,7 @@ React Native table component for displaying structured data in rows and columns.
 ## Usage
 
 ```tsx
-import { Table } from '@boostdev/components';
+import { Table } from '@boostdev/design-system-components';
 
 <Table
   columns={[

package/src/components/ui/Tabs/Tabs.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .tabs {
     display: flex;
     flex-direction: column;

package/src/components/ui/Tabs/Tabs.native.mdx

@@ -12,7 +12,7 @@ React Native tabs component with a horizontally scrollable tab bar and content p
 ## Usage
 
 ```tsx
-import { Tabs } from '@boostdev/components';
+import { Tabs } from '@boostdev/design-system-components';
 
 <Tabs
   tabs={[

package/src/components/ui/Tooltip/Tooltip.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .wrapper {
     position: relative;
     display: inline-flex;

package/src/components/ui/Tooltip/Tooltip.native.mdx

@@ -12,7 +12,7 @@ React Native tooltip that appears on long press. Wraps children in a `Pressable`
 ## Usage
 
 ```tsx
-import { Tooltip } from '@boostdev/components';
+import { Tooltip } from '@boostdev/design-system-components';
 import { Text } from 'react-native';
 
 <Tooltip content="Helpful information">

package/src/components/ui/Typography/Typography.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .typography {
     margin: 0;
     font-family: var(--bds-font_family--body);

package/src/components/ui/Typography/Typography.native.mdx

@@ -12,7 +12,7 @@ React Native typography component wrapping `Text` with semantic variants. Use in
 ## Usage
 
 ```tsx
-import { Typography } from '@boostdev/components';
+import { Typography } from '@boostdev/design-system-components';
 
 <Typography variant="h1">Page title</Typography>
 <Typography variant="body">Body copy text.</Typography>

package/src/css/bdc.css

@@ -46,7 +46,7 @@
   initial-value: 0 0 0 0 transparent;
 }
 
-@layer component {
+@layer boostdev.component {
   :root {
     /* border: none by default — outline provides the visual edge */
     --bdc-outline_border: none;

package/src/css/index.css

@@ -1,4 +1,4 @@
-/* @boostdev/components — framework-agnostic CSS barrel */
+/* @boostdev/design-system-components — framework-agnostic CSS barrel */
 @import './bdc.css';
 
 /* UI */

package/src/stories/DesignSystem/Borders.mdx

@@ -127,7 +127,7 @@ Override a component's border colour for a specific context by reassigning `--bd
 }
 
 /* Override globally via the token layer */
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bdc_color: var(--bds-color_green);
   }
@@ -151,8 +151,8 @@ The `bdc` tokens are included automatically when you import the component styles
 
 ```css
 /* Included automatically with the full component CSS */
-@import '@boostdev/components/css';
+@import '@boostdev/design-system-components/css';
 
 /* Or load the token layer standalone */
-@import '@boostdev/components/css/bdc';
+@import '@boostdev/design-system-components/css/bdc';
 ```

package/src/stories/DesignSystem/Colors.mdx

@@ -184,7 +184,7 @@ These `--bds-BASE__color--*` tokens are the primitive values. **Do not use them
 Override `--bds-color_green` and `--bds-color_interactive` to change the primary action colour globally:
 
 ```css
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bds-color_green:           var(--bds-BASE__color--blue);
     --bds-color_on-green:         var(--bds-BASE__color--white);

package/src/stories/DesignSystem/DarkMode.mdx

@@ -85,20 +85,20 @@ function ThemeToggle() {
 
 ## Customising tokens in dark mode
 
-Override any token in `@layer tokens.override` — the rule applies regardless of the active theme unless you scope it:
+Override any token in `@layer boostdev.tokens.override` — the rule applies regardless of the active theme unless you scope it:
 
 ```css
 @import "@boostdev/design-system-foundation/css";
 
 /* override for all themes */
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bds-color_green: oklch(60% 0.15 145);
   }
 }
 
 /* override for dark mode only */
-@layer tokens.override {
+@layer boostdev.tokens.override {
   [data-theme="dark"],
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {

package/src/stories/DesignSystem/Overview.mdx

@@ -49,14 +49,25 @@ import '@boostdev/design-system-foundation/css';
 
 ## Layer architecture
 
-All tokens live inside `@layer` declarations. The cascade order, from lowest to highest, is:
+All tokens live inside `@layer` declarations, all prefixed with `boostdev.` to prevent collisions
+with consumer layers of the same name. The cascade order, from lowest to highest, is:
 
 ```
-tokens.base → tokens.semantic → tokens.override → reset → base → utilities → component
+boostdev.tokens.base →
+boostdev.tokens.semantic →
+boostdev.tokens.deprecated →
+boostdev.tokens.override →
+boostdev.reset →
+boostdev.base →
+boostdev.utilities →
+boostdev.components →
+boostdev.component
 ```
 
-`@layer component` — used by every component in this library — sits above the token layers,
-so you can override any component from `@layer my-overrides` without specificity fights.
+`@layer boostdev.component` — used by every component in this library — sits above the token layers,
+so you can override any component from your own layer (e.g. `@layer my-overrides`) without
+specificity fights. Anything written outside of any `@layer` is treated as an unlayered declaration,
+which is the highest-priority in the cascade.
 
 ## Theming
 
@@ -78,7 +89,7 @@ Override any token in your own layer to retheme:
 ```css
 @import "@boostdev/design-system-foundation/css";
 
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bds-cta:    var(--bds-BASE__color--blue);
     --bds-color_on-green: var(--bds-BASE__color--white);

package/src/stories/DesignSystem/Typography.mdx

@@ -49,7 +49,7 @@ export const TrackingSample = ({ token, label, value }) => (
 Override both tokens to apply a custom typeface globally:
 
 ```css
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bds-font_family--heading: 'Inter', sans-serif;
     --bds-font_family--body:    'Inter', sans-serif;

package/src/stories/Introduction.mdx

@@ -30,20 +30,20 @@ import logo from '../static/logo.svg';
     ## Installation
 
     ```bash
-    pnpm add @boostdev/components @boostdev/design-system-foundation
+    pnpm add @boostdev/design-system-components @boostdev/design-system-foundation
     ```
 
     Import the CSS once at your app root:
 
     ```ts
     import '@boostdev/design-system-foundation/css';
-    import '@boostdev/components/css';
+    import '@boostdev/design-system-components/css';
     ```
 
     For **Next.js / RSC**, use the `/client` subpath:
 
     ```ts
-    import {Button, Card} from '@boostdev/components/client';
+    import {Button, Card} from '@boostdev/design-system-components/client';
     ```
 
     ---
@@ -92,7 +92,7 @@ import logo from '../static/logo.svg';
     everything at once:
 
     ```css
-    @layer tokens.override {
+    @layer boostdev.tokens.override {
         :root {
             --bds-cta:         var(--bds-BASE__color--orange);
             --bds-on-cta:      var(--bds-BASE__color--white);

package/src/stories/ReactNative.mdx

@@ -6,21 +6,21 @@ import { Meta } from '@storybook/blocks';
 
 > **Status: alpha** — components and APIs may change before stable release.
 
-`@boostdev/components` ships native implementations for 47 components — near-complete parity with the React web library. These use React Native primitives (`View`, `Text`, `Pressable`, `StyleSheet`, `Modal`, `Animated`) rather than HTML elements, and consume a dedicated token layer instead of CSS custom properties.
+`@boostdev/design-system-components` ships native implementations for 47 components — near-complete parity with the React web library. These use React Native primitives (`View`, `Text`, `Pressable`, `StyleSheet`, `Modal`, `Animated`) rather than HTML elements, and consume a dedicated token layer instead of CSS custom properties.
 
 ## Installation
 
 ```bash
-npm install @boostdev/components
+npm install @boostdev/design-system-components
 # or
-pnpm add @boostdev/components
+pnpm add @boostdev/design-system-components
 ```
 
 Metro automatically resolves the native entry point via the `"react-native"` export condition in `package.json` — no extra configuration needed.
 
 ```ts
 // Import is identical to the web version:
-import { Button, Alert, Badge, Avatar, Typography } from '@boostdev/components';
+import { Button, Alert, Badge, Avatar, Typography } from '@boostdev/design-system-components';
 ```
 
 ## Setup — ThemeProvider
@@ -28,7 +28,7 @@ import { Button, Alert, Badge, Avatar, Typography } from '@boostdev/components';
 Wrap your app (or the relevant subtree) in `ThemeProvider` to give native components access to the design token context:
 
 ```tsx
-import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
 
 export default function App() {
   return (
@@ -57,7 +57,7 @@ Native components consume tokens from `src/native/tokens.ts` — a JS object mir
 Tokens are accessed inside components via `useTheme()`:
 
 ```tsx
-import { useTheme } from '@boostdev/components/native/ThemeContext';
+import { useTheme } from '@boostdev/design-system-components/native/ThemeContext';
 
 function MyComponent() {
   const { tokens } = useTheme();

package/src/web-components/globals.ts

@@ -36,7 +36,7 @@ const bdcCss = `
     initial-value: 0 0 0 0 transparent;
   }
 
-  @layer component {
+  @layer boostdev.component {
     :root {
       --bdc-outline_border: none;
 

package/src/web-components/interaction/BdsAccordion.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Accordion custom element. Coordinates open/closed state acros
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 
@@ -85,7 +85,7 @@ Or in HTML without a bundler:
   </bds-accordion-item>
   <bds-accordion-item>
     <span slot="header">How do I install it?</span>
-    <p>Run npm install @boostdev/components.</p>
+    <p>Run npm install @boostdev/design-system-components.</p>
   </bds-accordion-item>
 </bds-accordion>
 

package/src/web-components/interaction/BdsAccordion.stories.tsx

@@ -49,7 +49,7 @@ function BdsAccordionStory({
         {React.createElement('p', { style: { margin: 0 } }, 'A framework-agnostic component library built on web standards.')}
       </BdsAccordionItem>
       <BdsAccordionItem header="How do I install it?">
-        {React.createElement('p', { style: { margin: 0 } }, 'Run npm install @boostdev/components and import the web components entry point.')}
+        {React.createElement('p', { style: { margin: 0 } }, 'Run npm install @boostdev/design-system-components and import the web components entry point.')}
       </BdsAccordionItem>
       <BdsAccordionItem header="Does it support dark mode?">
         {React.createElement('p', { style: { margin: 0 } }, 'Yes — all design tokens respond to [data-theme="dark"] and prefers-color-scheme: dark.')}

package/src/web-components/interaction/BdsButton.mdx

@@ -13,14 +13,14 @@ Framework-agnostic button custom element. Renders as `<button>` or `<a>` dependi
 
 ```js
 // Register all web components at once
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

package/src/web-components/interaction/BdsCollapsible.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Collapsible custom element. Wraps a native `<details>`/`<summ
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

package/src/web-components/interaction/BdsDialog.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Dialog custom element. Wraps a native `<dialog>` element with
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

package/src/web-components/interaction/BdsDrawer.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Drawer (slide-in panel) custom element. Same modal infrastruc
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

package/src/web-components/interaction/BdsDropdownMenu.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Dropdown Menu custom element. A trigger-anchored menu panel w
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

package/src/web-components/interaction/BdsPopover.mdx

@@ -12,7 +12,7 @@ Framework-agnostic popover custom element. A non-modal floating panel anchored t
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## Examples

package/src/web-components/interaction/BdsSkipLink.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Skip Navigation Link custom element. Visually hidden until fo
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

package/src/web-components/interaction/BdsTabs.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Tabs custom element. Coordinates `<bds-tab>` and `<bds-tab-pa
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```