@ibis-design/svelte 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/README.md +30 -8
  2. package/dist/components/buttons/Button.svelte +1 -1
  3. package/dist/components/buttons/Button.svelte.d.ts +1 -1
  4. package/dist/components/buttons/DropdownButton.svelte +1 -1
  5. package/dist/components/buttons/DropdownButton.svelte.d.ts +1 -1
  6. package/dist/components/buttons/PillTab.svelte +1 -1
  7. package/dist/components/buttons/PillTab.svelte.d.ts +1 -1
  8. package/dist/components/containers/Banner.svelte +1 -1
  9. package/dist/components/containers/Banner.svelte.d.ts +1 -1
  10. package/dist/components/containers/Card.svelte +2 -2
  11. package/dist/components/containers/TipIndicator.svelte +1 -1
  12. package/dist/components/containers/TipIndicator.svelte.d.ts +1 -1
  13. package/dist/components/containers/Toaster.svelte +1 -1
  14. package/dist/components/containers/Toaster.svelte.d.ts +1 -1
  15. package/dist/components/inputs/Checkbox.svelte +1 -1
  16. package/dist/components/inputs/Checkbox.svelte.d.ts +1 -1
  17. package/dist/components/inputs/Chips.svelte +1 -1
  18. package/dist/components/inputs/Chips.svelte.d.ts +1 -1
  19. package/dist/components/inputs/Dropdown.svelte +1 -1
  20. package/dist/components/inputs/Dropdown.svelte.d.ts +1 -1
  21. package/dist/components/inputs/Radio.svelte +1 -1
  22. package/dist/components/inputs/Radio.svelte.d.ts +1 -1
  23. package/dist/components/inputs/Switch.svelte +1 -1
  24. package/dist/components/inputs/Switch.svelte.d.ts +1 -1
  25. package/dist/components/inputs/TextArea.svelte +1 -1
  26. package/dist/components/inputs/TextArea.svelte.d.ts +1 -1
  27. package/dist/components/inputs/TextInput.svelte +1 -1
  28. package/dist/components/inputs/TextInput.svelte.d.ts +1 -1
  29. package/dist/components/inputs/TextLink.svelte +1 -1
  30. package/dist/components/inputs/TextLink.svelte.d.ts +1 -1
  31. package/dist/layouts/AppLayout.svelte +2 -2
  32. package/dist/layouts/AuthLayout.svelte +2 -2
  33. package/dist/layouts/DashboardLayout.svelte +2 -2
  34. package/package.json +8 -8
  35. package/dist/components/buttons/button.css +0 -193
  36. package/dist/components/buttons/dropdownButton.css +0 -82
  37. package/dist/components/buttons/pillTab.css +0 -59
  38. package/dist/components/containers/banner.css +0 -155
  39. package/dist/components/containers/tipIndicator.css +0 -79
  40. package/dist/components/containers/toaster.css +0 -137
  41. package/dist/components/containers/tooltip.css +0 -0
  42. package/dist/components/inputs/checkbox.css +0 -103
  43. package/dist/components/inputs/chips.css +0 -76
  44. package/dist/components/inputs/dropdown.css +0 -106
  45. package/dist/components/inputs/radio.css +0 -108
  46. package/dist/components/inputs/switch.css +0 -68
  47. package/dist/components/inputs/textInput.css +0 -152
  48. package/dist/components/inputs/textarea.css +0 -91
  49. package/dist/components/inputs/textlink.css +0 -163
package/README.md CHANGED
@@ -5,7 +5,7 @@ Svelte 5 component library for the IBIS design system. Provides primitives (Butt
5
5
  ## Requirements
6
6
 
7
7
  - **Svelte 5** (runes and snippets; no slots).
8
- - **@ibis-design/css** — design tokens. The consuming application must load the token stylesheet once so `:root` variables are available.
8
+ - **@ibis-design/css** — design tokens. Load the stylesheet once and set `data-theme` on `<html>` (`ib-light`, `ib-dark`, `alc-light`, `alc-dark`).
9
9
 
10
10
  ## Installation
11
11
 
@@ -15,16 +15,38 @@ npm install @ibis-design/svelte @ibis-design/css
15
15
 
16
16
  ## Token CSS
17
17
 
18
- Import the design tokens in your application entry or root layout so all components receive the correct variables:
18
+ Import tokens and set the theme on the document root:
19
19
 
20
- ```js
21
- // e.g. in your app entry (main.ts, +layout.svelte, or App.svelte)
22
- import '@ibis-design/css';
23
- // or
24
- import '@ibis-design/css/ibis-design.css';
20
+ ```svelte
21
+ <script>
22
+ import '@ibis-design/css';
23
+
24
+ if (typeof document !== 'undefined') {
25
+ document.documentElement.dataset.theme = 'ib-light'; // or alc-dark, etc.
26
+ }
27
+ </script>
28
+ ```
29
+
30
+ Without the CSS import and `data-theme`, components will not resolve design-system variables.
31
+
32
+ ### Canonical variable names
33
+
34
+ Use semantic tokens from the active theme, for example:
35
+
36
+ - `--font-size-body-sm` (not legacy `normal-text` names)
37
+ - `--color-brand-secondary` for secondary actions
38
+ - `--shadow-focus-default` for focus rings
39
+ - `--border-radius-md`, `--border-color-button`
40
+
41
+ ### Shared component CSS
42
+
43
+ All component styles live in `@ibis-design/css` (`packages/css/src/styles/components/`). Each Svelte component imports its stylesheet from the CSS package, for example in `Button.svelte`:
44
+
45
+ ```ts
46
+ import '@ibis-design/css/components/button.css';
25
47
  ```
26
48
 
27
- Without this import, components will not have colors, spacing, or typography from the design system.
49
+ Consumers get styles automatically when they import the component; no separate CSS import is required unless you use the classes outside these components.
28
50
 
29
51
  ## Usage
30
52
 
package/dist/components/buttons/Button.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './button.css';
2
+ import '@ibis-design/css/components/button.css';
3
3
  import type { Snippet } from 'svelte';
4
4
  import type { ButtonVariant, ButtonSize } from '../../types/button';
5
5
  import type { HTMLButtonAttributes } from 'svelte/elements';
package/dist/components/buttons/Button.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './button.css';
1
+ import '@ibis-design/css/components/button.css';
2
2
  import type { Snippet } from 'svelte';
3
3
  import type { ButtonVariant, ButtonSize } from '../../types/button';
4
4
  import type { HTMLButtonAttributes } from 'svelte/elements';
package/dist/components/buttons/DropdownButton.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './dropdownButton.css';
2
+ import '@ibis-design/css/components/dropdownButton.css';
3
3
  import Button from './Button.svelte';
4
4
  import type { Snippet } from 'svelte';
5
5
 
package/dist/components/buttons/DropdownButton.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './dropdownButton.css';
1
+ import '@ibis-design/css/components/dropdownButton.css';
2
2
  import type { Snippet } from 'svelte';
3
3
  interface Props {
4
4
  /**
package/dist/components/buttons/PillTab.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './pillTab.css';
2
+ import '@ibis-design/css/components/pillTab.css';
3
3
  import type { HTMLInputAttributes } from 'svelte/elements';
4
4
 
5
5
  interface Props extends HTMLInputAttributes {
package/dist/components/buttons/PillTab.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './pillTab.css';
1
+ import '@ibis-design/css/components/pillTab.css';
2
2
  import type { HTMLInputAttributes } from 'svelte/elements';
3
3
  interface Props extends HTMLInputAttributes {
4
4
  /**
package/dist/components/containers/Banner.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./banner.css";
2
+ import "@ibis-design/css/components/banner.css";
3
3
  import type { Snippet } from "svelte";
4
4
 
5
5
  type BannerType = "success" | "error" | "default";
package/dist/components/containers/Banner.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./banner.css";
1
+ import "@ibis-design/css/components/banner.css";
2
2
  import type { Snippet } from "svelte";
3
3
  type BannerType = "success" | "error" | "default";
4
4
  interface Props {
package/dist/components/containers/Card.svelte CHANGED
@@ -23,12 +23,12 @@
23
23
 
24
24
  <style>
25
25
  .ibis-card {
26
- background-color: var(--color-backgrounds-classic-bg-light);
26
+ background-color: var(--color-backgrounds-classic-light);
27
27
  border-radius: var(--border-radius-md);
28
28
  box-shadow: var(--shadow-default);
29
29
  padding: var(--spacing-4);
30
30
  font-family: var(--font-family-sans);
31
- font-size: var(--font-size-normal-text-default);
31
+ font-size: var(--font-size-body-md);
32
32
  line-height: var(--line-height-normal);
33
33
  }
34
34
  </style>
package/dist/components/containers/TipIndicator.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './tipIndicator.css';
2
+ import '@ibis-design/css/components/tipIndicator.css';
3
3
 
4
4
  interface Props {
5
5
  /**
package/dist/components/containers/TipIndicator.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './tipIndicator.css';
1
+ import '@ibis-design/css/components/tipIndicator.css';
2
2
  interface Props {
3
3
  /**
4
4
  * Controls the position of the tooltip relative to the indicator.
package/dist/components/containers/Toaster.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './toaster.css';
2
+ import '@ibis-design/css/components/toaster.css';
3
3
  import type { Snippet } from 'svelte';
4
4
 
5
5
  type ToastType = 'success' | 'error' | 'accent' | 'default';
package/dist/components/containers/Toaster.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './toaster.css';
1
+ import '@ibis-design/css/components/toaster.css';
2
2
  import type { Snippet } from 'svelte';
3
3
  type ToastType = 'success' | 'error' | 'accent' | 'default';
4
4
  interface Props {
package/dist/components/inputs/Checkbox.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./checkbox.css";
2
+ import "@ibis-design/css/components/checkbox.css";
3
3
  import type { Snippet } from "svelte";
4
4
  import type { HTMLInputAttributes } from "svelte/elements";
5
5
 
package/dist/components/inputs/Checkbox.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./checkbox.css";
1
+ import "@ibis-design/css/components/checkbox.css";
2
2
  import type { Snippet } from "svelte";
3
3
  import type { HTMLInputAttributes } from "svelte/elements";
4
4
  interface Props extends HTMLInputAttributes {
package/dist/components/inputs/Chips.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./chips.css";
2
+ import "@ibis-design/css/components/chips.css";
3
3
  import type { HTMLButtonAttributes } from "svelte/elements";
4
4
  import type { Snippet } from "svelte";
5
5
  // define props
package/dist/components/inputs/Chips.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./chips.css";
1
+ import "@ibis-design/css/components/chips.css";
2
2
  import type { HTMLButtonAttributes } from "svelte/elements";
3
3
  import type { Snippet } from "svelte";
4
4
  interface Props extends HTMLButtonAttributes {
package/dist/components/inputs/Dropdown.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./dropdown.css";
2
+ import "@ibis-design/css/components/dropdown.css";
3
3
  import TextInput from "./TextInput.svelte";
4
4
 
5
5
  interface Options {
package/dist/components/inputs/Dropdown.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./dropdown.css";
1
+ import "@ibis-design/css/components/dropdown.css";
2
2
  interface Options {
3
3
  label: string;
4
4
  value: string;
package/dist/components/inputs/Radio.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./radio.css";
2
+ import "@ibis-design/css/components/radio.css";
3
3
  import type { HTMLInputAttributes } from "svelte/elements";
4
4
 
5
5
  interface Props extends HTMLInputAttributes {
package/dist/components/inputs/Radio.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./radio.css";
1
+ import "@ibis-design/css/components/radio.css";
2
2
  import type { HTMLInputAttributes } from "svelte/elements";
3
3
  interface Props extends HTMLInputAttributes {
4
4
  /**
package/dist/components/inputs/Switch.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./switch.css";
2
+ import "@ibis-design/css/components/switch.css";
3
3
  import type { HTMLInputAttributes } from "svelte/elements";
4
4
 
5
5
  interface Props extends HTMLInputAttributes {
package/dist/components/inputs/Switch.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./switch.css";
1
+ import "@ibis-design/css/components/switch.css";
2
2
  import type { HTMLInputAttributes } from "svelte/elements";
3
3
  interface Props extends HTMLInputAttributes {
4
4
  id?: string;
package/dist/components/inputs/TextArea.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./textarea.css";
2
+ import "@ibis-design/css/components/textarea.css";
3
3
  import type { HTMLTextareaAttributes } from "svelte/elements";
4
4
 
5
5
  interface Props extends HTMLTextareaAttributes {
package/dist/components/inputs/TextArea.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./textarea.css";
1
+ import "@ibis-design/css/components/textarea.css";
2
2
  import type { HTMLTextareaAttributes } from "svelte/elements";
3
3
  interface Props extends HTMLTextareaAttributes {
4
4
  label?: string;
package/dist/components/inputs/TextInput.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./textInput.css";
2
+ import "@ibis-design/css/components/textInput.css";
3
3
  import type { Snippet } from "svelte";
4
4
  import type { HTMLInputAttributes } from "svelte/elements";
5
5
 
package/dist/components/inputs/TextInput.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./textInput.css";
1
+ import "@ibis-design/css/components/textInput.css";
2
2
  import type { Snippet } from "svelte";
3
3
  import type { HTMLInputAttributes } from "svelte/elements";
4
4
  interface Props extends HTMLInputAttributes {
package/dist/components/inputs/TextLink.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./textlink.css";
2
+ import "@ibis-design/css/components/textlink.css";
3
3
  import type { HTMLAnchorAttributes } from "svelte/elements";
4
4
  import type { Snippet } from "svelte";
5
5
 
package/dist/components/inputs/TextLink.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./textlink.css";
1
+ import "@ibis-design/css/components/textlink.css";
2
2
  import type { HTMLAnchorAttributes } from "svelte/elements";
3
3
  import type { Snippet } from "svelte";
4
4
  interface Props extends HTMLAnchorAttributes {
package/dist/layouts/AppLayout.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  min-height: 100vh;
46
46
  display: flex;
47
47
  flex-direction: column;
48
- background-color: var(--color-backgrounds-classic-bg-light);
48
+ background-color: var(--color-backgrounds-classic-light);
49
49
  font-family: var(--font-family-sans);
50
50
  }
51
51
 
@@ -77,7 +77,7 @@
77
77
  flex: 0 0 auto;
78
78
  padding: var(--spacing-4);
79
79
  border-top: var(--border-width-thin) solid var(--color-neutral-200);
80
- font-size: var(--font-size-normal-text-sm);
80
+ font-size: var(--font-size-body-sm);
81
81
  color: var(--color-neutral-600);
82
82
  }
83
83
  </style>
package/dist/layouts/AuthLayout.svelte CHANGED
@@ -41,7 +41,7 @@
41
41
  align-items: center;
42
42
  justify-content: center;
43
43
  padding: var(--spacing-6);
44
- background-color: var(--color-backgrounds-themed-bg-ibis-white);
44
+ background-color: var(--color-white);
45
45
  font-family: var(--font-family-sans);
46
46
  }
47
47
 
@@ -57,7 +57,7 @@
57
57
 
58
58
  .ibis-auth-layout__footer {
59
59
  margin-top: var(--spacing-8);
60
- font-size: var(--font-size-normal-text-sm);
60
+ font-size: var(--font-size-body-sm);
61
61
  color: var(--color-neutral-600);
62
62
  }
63
63
  </style>
package/dist/layouts/DashboardLayout.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  min-height: 100vh;
46
46
  display: flex;
47
47
  flex-direction: column;
48
- background-color: var(--color-backgrounds-classic-bg-light);
48
+ background-color: var(--color-backgrounds-classic-light);
49
49
  font-family: var(--font-family-sans);
50
50
  }
51
51
 
@@ -82,7 +82,7 @@
82
82
  flex: 0 0 auto;
83
83
  padding: var(--spacing-3);
84
84
  border-top: var(--border-width-thin) solid var(--color-neutral-200);
85
- font-size: var(--font-size-normal-text-xs);
85
+ font-size: var(--font-size-body-xs);
86
86
  color: var(--color-neutral-600);
87
87
  }
88
88
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ibis-design/svelte",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "description": "Svelte component library for the IBIS design system.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -22,20 +22,20 @@
22
22
  "**/*.css"
23
23
  ],
24
24
  "peerDependencies": {
25
- "@ibis-design/css": "^0.6.0",
25
+ "@ibis-design/css": "^0.7.0",
26
26
  "svelte": "^5.54.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@ibis-design/css": "0.6.0",
29
+ "@ibis-design/css": "0.7.0",
30
30
  "@sveltejs/adapter-auto": "7.0.1",
31
- "@sveltejs/kit": "2.59.1",
31
+ "@sveltejs/kit": "2.60.1",
32
32
  "@sveltejs/package": "2.5.7",
33
33
  "@sveltejs/vite-plugin-svelte": "^7.1.2",
34
- "@types/node": "25.7.0",
35
- "svelte": "5.55.5",
34
+ "@types/node": "25.9.0",
35
+ "svelte": "5.55.8",
36
36
  "svelte-check": "^4.4.8",
37
37
  "typescript": "^5.9.3",
38
- "vite": "^8.0.12"
38
+ "vite": "^8.0.13"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "svelte-kit sync && svelte-package",
@@ -44,6 +44,6 @@
44
44
  "dev": "svelte-package -w"
45
45
  },
46
46
  "dependencies": {
47
- "@solar-icons/svelte": "^1.1.0"
47
+ "@solar-icons/svelte": "^1.1.1"
48
48
  }
49
49
  }
package/dist/components/buttons/button.css DELETED
@@ -1,193 +0,0 @@
1
- .ibis-button {
2
- font-family: var(--font-family-sans);
3
- font-weight: var(--font-weight-normal);
4
- border: var(--border-width-default) solid transparent;
5
- cursor: pointer;
6
- transition:
7
- filter var(--transition-duration-fast) var(--transition-timing-default),
8
- transform var(--transition-duration-fast) var(--transition-timing-default),
9
- box-shadow var(--transition-duration-fast) var(--transition-timing-default);
10
- display: inline-flex;
11
- align-items: center;
12
- justify-content: center;
13
- }
14
-
15
- .ibis-button :global(svg) {
16
- width: 1em;
17
- height: 1em;
18
- display: inline-block;
19
- vertical-align: middle;
20
- gap: var(--spacing-1);
21
- }
22
-
23
- /* Content Layout */
24
- .ibis-button__content {
25
- display: inline-flex;
26
- align-items: center;
27
- justify-content: center;
28
- gap: var(--spacing-1);
29
- }
30
-
31
- .ibis-button__content--hidden {
32
- visibility: hidden;
33
- }
34
-
35
- /* Icon Only */
36
- .ibis-button--icon-only {
37
- padding: var(--spacing-2);
38
- }
39
-
40
- .ibis-button--icon-only .ibis-button__content {
41
- gap: 0;
42
- }
43
-
44
- /* Disabled State */
45
- .ibis-button:disabled {
46
- opacity: var(--opacity-disabled);
47
- cursor: not-allowed;
48
- }
49
-
50
- /* Loading State */
51
- .ibis-button--loading {
52
- position: relative;
53
- cursor: not-allowed;
54
- pointer-events: none;
55
- }
56
-
57
- /* Primary Variant */
58
- .ibis-button--primary {
59
- background: linear-gradient(180deg, #9665df 0%, #7945c8 100%); /* Hardcoded */
60
- color: var(--color-white);
61
-
62
- box-shadow: var(--component-button-primary-default-shadow);
63
- border: 0.5px solid #bd91ff; /* Hardcoded */
64
- }
65
-
66
- .ibis-button--primary:not(:disabled):hover,
67
- .ibis-button--primary:not(:disabled):active {
68
- box-shadow: none;
69
- }
70
-
71
- .ibis-button--primary:not(:disabled):hover {
72
- background: var(--color-primary-800);
73
- border-color: none;
74
- border-width: 0.7 px; /* Hardcoded */
75
- }
76
-
77
- .ibis-button--primary:not(:disabled):active {
78
- background: var(--color-primary-800);
79
- border-color: var(--color-primary-400);
80
- border-width: var(--border-width-thin);
81
- }
82
-
83
- .ibis-button--primary:disabled {
84
- background: var(--color-neutral-400);
85
- color: var(--color-neutral-600);
86
- border-color: var(--color-neutral-600);
87
- }
88
-
89
- /* Secondary Variant */
90
- .ibis-button--secondary {
91
- background-color: transparent;
92
- color: var(--color-primary-pink-500);
93
- border-color: var(--color-primary-pink-700);
94
- }
95
-
96
- .ibis-button--secondary:not(:disabled):hover {
97
- background-color: var(--color-primary-pink-100);
98
- }
99
-
100
- /* Variant Sizes */
101
- .ibis-button--sm {
102
- padding: var(--spacing-1) var(--spacing-2);
103
- font-size: var(--font-size-normal-text-sm);
104
- border-radius: var(--component-button-size-sm-border-radius);
105
- }
106
-
107
- .ibis-button--md {
108
- padding: var(--spacing-2) var(--spacing-4);
109
- font-size: var(--font-size-normal-text-DEFAULT);
110
- border-radius: var(--component-button-size-md-border-radius);
111
- }
112
-
113
- .ibis-button--lg {
114
- padding: var(--spacing-3) var(--spacing-6);
115
- font-size: var(--font-size-normal-text-lg);
116
- border-radius: var(--component-button-size-lg-border-radius);
117
- }
118
-
119
- /* Loader Spinner */
120
- .ibis-button__loader {
121
- position: absolute;
122
- width: 1em;
123
- height: 1em;
124
- border: var(--border-width-default) solid var(--color-black);
125
- border-top-color: var(--color-white);
126
- border-radius: 50%;
127
- animation: ibis-spin 0.8s linear infinite;
128
- top: 50%;
129
- left: 50%;
130
- transform: translate(-50%, -50%);
131
- }
132
-
133
- @keyframes ibis-spin {
134
- from {
135
- transform: translate(-50%, -50%) rotate(0deg);
136
- }
137
- to {
138
- transform: translate(-50%, -50%) rotate(360deg);
139
- }
140
- }
141
-
142
- /* Skeleton State */
143
- .ibis-button--skeleton {
144
- position: relative;
145
- overflow: hidden;
146
- background: var(--color-neutral-200);
147
- color: transparent;
148
- border-color: var(--color-neutral-500);
149
- cursor: default;
150
- pointer-events: none;
151
- }
152
-
153
- .ibis-button--skeleton::after {
154
- content: '';
155
- position: absolute;
156
- top: 50%;
157
- left: 50%;
158
- transform: translate(-50%, -50%);
159
- width: 80%;
160
- height: 1em;
161
- background-color: var(--color-neutral-400);
162
- }
163
-
164
- .ibis-button--icon-only--skeleton::after {
165
- width: 1em;
166
- height: 1em;
167
- border-radius: 4px;
168
- }
169
-
170
- .ibis-button--skeleton::before {
171
- content: '';
172
- position: absolute;
173
- inset: 0;
174
- background: linear-gradient(
175
- 90deg,
176
- rgba(255, 255, 255, 0.25) 0%,
177
- rgba(255, 255, 255, 0.6) 50%,
178
- rgba(255, 255, 255, 0.25) 100%
179
- );
180
- transform: translateX(-100%);
181
- animation: ibis-shimmer 2s infinite;
182
- border-radius: inherit;
183
- }
184
-
185
- @keyframes ibis-shimmer {
186
- 0% {
187
- transform: translateX(-100%);
188
- }
189
-
190
- 100% {
191
- transform: translateX(100%);
192
- }
193
- }
package/dist/components/buttons/dropdownButton.css DELETED
@@ -1,82 +0,0 @@
1
- .dropdown-button {
2
- position: relative;
3
- display: inline-block;
4
- }
5
-
6
- .caret {
7
- margin-left: 0.25em;
8
- width: 1em;
9
- height: 1em;
10
- }
11
-
12
- .dropdown-menu {
13
- position: absolute;
14
- top: 100%;
15
- left: 0;
16
- margin-top: 4px;
17
- min-width: 160px;
18
- background: white;
19
- border: 1px solid var(--color-neutral-300);
20
- border-radius: var(--component-button-size-md);
21
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
22
- z-index: 1000;
23
- padding: 4px;
24
- display: flex;
25
- flex-direction: column;
26
- }
27
-
28
- /* .dropdown-menu :global(button) {
29
- all: unset;
30
- padding: 8px;
31
- cursor: pointer;
32
- border-radius: 4px;
33
- }
34
-
35
- .dropdown-menu :global(button:hover) {
36
- background-color: var(--color-neutral-100);
37
- } */
38
-
39
- .dropdown-menu :global(.dropdown-menu__item) {
40
- all: unset;
41
- display: flex;
42
- align-items: center;
43
- justify-content: center;
44
- width: 100%;
45
- box-sizing: border-box;
46
- padding: var(--spacing-3) var(--spacing-4);
47
- cursor: pointer;
48
- font-family: var(--font-family-sans);
49
- font-size: var(--font-size-normal-text-default);
50
- font-weight: var(--font-weight-medium);
51
- color: var(--color-neutral-900);
52
- text-align: center;
53
- transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
54
- }
55
-
56
- .dropdown-menu :global(.dropdown-menu__item:hover) {
57
- background-color: var(--color-primary-400);
58
- color: var(--color-white);
59
- }
60
-
61
- .dropdown-menu :global(.dropdown-menu__item--selected) {
62
- background-color: var(--color-primary-500);
63
- color: var(--color-white);
64
- font-weight: var(--font-weight-bold);
65
- }
66
-
67
- .dropdown-menu :global(.dropdown-menu__item--selected:hover) {
68
- background-color: var(--color-primary-700);
69
- color: var(--color-white);
70
- }
71
-
72
- .caret {
73
- margin-left: 0.25em;
74
- width: 1em;
75
- height: 1em;
76
- transition: transform var(--transition-duration-fast) var(--transition-timing-default);
77
- }
78
-
79
- /* ↓ ADDED — rotates caret when open */
80
- .caret--open {
81
- transform: rotate(180deg);
82
- }