@rolemodel/optics 2.0.0 → 2.0.1

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 (6) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/LICENSE +1 -1
  3. package/dist/css/components/accordion.css +26 -0
  4. package/dist/css/core/tokens/base_tokens.css +1 -0
  5. package/dist/css/optics.min.css +27 -0
  6. package/package.json +12 -12
package/.yarn/install-state.gz CHANGED
Binary file
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2022 RoleModel Software
3
+ Copyright (c) 2025 RoleModel Software
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/dist/css/components/accordion.css CHANGED
@@ -2,6 +2,11 @@
2
2
  /* Public API (customizable component options) */
3
3
  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */
4
4
 
5
+ overflow: hidden;
6
+ interpolate-size: allow-keywords;
7
+
8
+ /* Elements */
9
+
5
10
  summary {
6
11
  display: grid;
7
12
  min-height: var(--_op-accordion-summary-min-height);
@@ -32,9 +37,30 @@
32
37
  }
33
38
  }
34
39
 
40
+ &::details-content {
41
+ height: 0;
42
+ transition: var(--op-transition-accordion-content);
43
+ }
44
+
35
45
  &[open] {
36
46
  summary .accordion__marker {
37
47
  rotate: 0.25turn;
38
48
  }
49
+
50
+ &::details-content {
51
+ height: auto;
52
+ }
53
+ }
54
+
55
+ /* Modifiers */
56
+
57
+ &.accordion--disable-animation {
58
+ summary .accordion__marker {
59
+ transition: none;
60
+ }
61
+
62
+ &::details-content {
63
+ transition: none;
64
+ }
39
65
  }
40
66
  }
package/dist/css/core/tokens/base_tokens.css CHANGED
@@ -216,6 +216,7 @@ Noto Sans supports:
216
216
  * @tokens Transition
217
217
  */
218
218
  --op-transition-accordion: rotate 120ms ease-in;
219
+ --op-transition-accordion-content: height 300ms ease, content-visibility 300ms ease allow-discrete;
219
220
  --op-transition-input: all 120ms ease-in;
220
221
  --op-transition-sidebar: all 200ms ease-in-out;
221
222
  --op-transition-modal: all 300ms ease-in;
package/dist/css/optics.min.css CHANGED
@@ -281,6 +281,7 @@ Noto Sans supports:
281
281
  * @tokens Transition
282
282
  */
283
283
  --op-transition-accordion: rotate 120ms ease-in;
284
+ --op-transition-accordion-content: height 300ms ease, content-visibility 300ms ease allow-discrete;
284
285
  --op-transition-input: all 120ms ease-in;
285
286
  --op-transition-sidebar: all 200ms ease-in-out;
286
287
  --op-transition-modal: all 300ms ease-in;
@@ -2358,6 +2359,11 @@ small {
2358
2359
  /* Public API (customizable component options) */
2359
2360
  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */
2360
2361
 
2362
+ overflow: hidden;
2363
+ interpolate-size: allow-keywords;
2364
+
2365
+ /* Elements */
2366
+
2361
2367
  summary {
2362
2368
  display: grid;
2363
2369
  min-height: var(--_op-accordion-summary-min-height);
@@ -2388,10 +2394,31 @@ small {
2388
2394
  }
2389
2395
  }
2390
2396
 
2397
+ &::details-content {
2398
+ height: 0;
2399
+ transition: var(--op-transition-accordion-content);
2400
+ }
2401
+
2391
2402
  &[open] {
2392
2403
  summary .accordion__marker {
2393
2404
  rotate: 0.25turn;
2394
2405
  }
2406
+
2407
+ &::details-content {
2408
+ height: auto;
2409
+ }
2410
+ }
2411
+
2412
+ /* Modifiers */
2413
+
2414
+ &.accordion--disable-animation {
2415
+ summary .accordion__marker {
2416
+ transition: none;
2417
+ }
2418
+
2419
+ &::details-content {
2420
+ transition: none;
2421
+ }
2395
2422
  }
2396
2423
  }
2397
2424
  .alert {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolemodel/optics",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "packageManager": "yarn@4.2.2",
5
5
  "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
6
6
  "main": "dist/css/optics.css",
@@ -46,33 +46,33 @@
46
46
  },
47
47
  "devDependencies": {
48
48
  "@babel/preset-env": "^7.23.9",
49
- "@storybook/addon-essentials": "^8.1.3",
50
- "@storybook/blocks": "^8.1.3",
51
- "@storybook/html": "^8.1.3",
52
- "@storybook/html-vite": "^8.1.3",
53
- "@storybook/manager-api": "^8.1.3",
54
- "@storybook/preview-api": "^8.1.3",
55
- "@storybook/test": "^8.1.3",
56
- "@storybook/theming": "^8.1.3",
49
+ "@storybook/addon-essentials": "^8.5.3",
50
+ "@storybook/blocks": "^8.5.3",
51
+ "@storybook/html": "^8.5.3",
52
+ "@storybook/html-vite": "^8.5.3",
53
+ "@storybook/manager-api": "^8.5.3",
54
+ "@storybook/preview-api": "^8.5.3",
55
+ "@storybook/test": "^8.5.3",
56
+ "@storybook/theming": "^8.5.3",
57
57
  "eslint": "^8.45.0",
58
58
  "eslint-config-prettier": "^9.1.0",
59
59
  "eslint-config-standard": "^17.1.0",
60
60
  "eslint-plugin-import": "^2.27.5",
61
61
  "eslint-plugin-n": "^16.0.1",
62
62
  "eslint-plugin-promise": "^6.1.1",
63
- "eslint-plugin-storybook": "^0.6.13",
63
+ "eslint-plugin-storybook": "^0.11.2",
64
64
  "generate-template-files": "^3.2.1",
65
65
  "postcss": "^8.4.38",
66
66
  "postcss-cli": "^11.0.0",
67
67
  "postcss-import": "^16.1.0",
68
68
  "prettier": "^3.0.0",
69
- "storybook": "^8.1.3",
69
+ "storybook": "^8.5.3",
70
70
  "storybook-design-token": "^3.1.0",
71
71
  "style-loader": "^3.3.3",
72
72
  "stylelint": "^16.2.1",
73
73
  "stylelint-config-idiomatic-order": "^10.0.0",
74
74
  "stylelint-prettier": "^5.0.0",
75
- "vite": "^5.2.11"
75
+ "vite": "^5.4.14"
76
76
  },
77
77
  "peerDependencies": {
78
78
  "tom-select": "^2.0.0"