@openameba/spindle-ui 3.2.0 → 3.2.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 (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/NavigationTab/index.css +1 -1
  3. package/index.css +1 -1
  4. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1870](https://github.com/openameba/spindle/pull/1870) [`0ab8d05`](https://github.com/openameba/spindle/commit/0ab8d058786714257d46880aedafc2d272ff3ffd) Thanks [@yu-3in](https://github.com/yu-3in)! - UnderlineTab scrollbar now only appears when needed
8
+
3
9
  ## 3.2.0
4
10
 
5
11
  ### Minor Changes
package/NavigationTab/index.css CHANGED
@@ -1,2 +1,2 @@
1
- .spui-UnderlineTab{background-color:var(--color-surface-primary)}.spui-UnderlineTab--border{border-bottom:1px solid var(--color-border-low-emphasis)}.spui-UnderlineTab--scrollable{position:relative}.spui-UnderlineTab-container{align-items:center;display:flex}.spui-UnderlineTab--scrollable .spui-UnderlineTab-container{-moz-column-gap:16px;column-gap:16px;overflow-x:scroll;padding:0 16px;scroll-behavior:smooth}.spui-UnderlineTab-button{background-color:transparent;border:none;box-sizing:border-box;flex-shrink:0;padding:0 4px;transition:background-color .15s ease-in-out}.spui-UnderlineTab--fixed .spui-UnderlineTab-button{width:100%}.spui-UnderlineTab--scrollable .spui-UnderlineTab-button{min-width:44px}.spui-UnderlineTab-button:hover{background-color:var(--color-surface-tertiary)}.spui-UnderlineTab-button:focus{border-radius:4px;outline:2px solid var(--color-focus-clarity);outline-offset:-2px}.spui-UnderlineTab-button:not(:focus-visible){outline:none}.spui-UnderlineTab-labelWrapper{align-items:center;-moz-column-gap:6px;column-gap:6px;display:flex;margin:0 auto;max-width:100%;padding:14px 0;position:relative;width:-moz-fit-content;width:fit-content}.spui-UnderlineTab-labelWrapper:after{background-color:var(--color-border-accent-primary);border-radius:3px;bottom:0;content:"";height:3px;left:50%;min-width:40px;opacity:0;position:absolute;transform:translateX(-50%);transition:opacity .35s ease-in-out;width:100%}.spui-UnderlineTab-button[aria-selected=true]
1
+ .spui-UnderlineTab{background-color:var(--color-surface-primary)}.spui-UnderlineTab--border{border-bottom:1px solid var(--color-border-low-emphasis)}.spui-UnderlineTab--scrollable{position:relative}.spui-UnderlineTab-container{align-items:center;display:flex}.spui-UnderlineTab--scrollable .spui-UnderlineTab-container{-moz-column-gap:16px;column-gap:16px;overflow-x:auto;padding:0 16px;scroll-behavior:smooth}.spui-UnderlineTab-button{background-color:transparent;border:none;box-sizing:border-box;flex-shrink:0;padding:0 4px;transition:background-color .15s ease-in-out}.spui-UnderlineTab--fixed .spui-UnderlineTab-button{width:100%}.spui-UnderlineTab--scrollable .spui-UnderlineTab-button{min-width:44px}.spui-UnderlineTab-button:hover{background-color:var(--color-surface-tertiary)}.spui-UnderlineTab-button:focus{border-radius:4px;outline:2px solid var(--color-focus-clarity);outline-offset:-2px}.spui-UnderlineTab-button:not(:focus-visible){outline:none}.spui-UnderlineTab-labelWrapper{align-items:center;-moz-column-gap:6px;column-gap:6px;display:flex;margin:0 auto;max-width:100%;padding:14px 0;position:relative;width:-moz-fit-content;width:fit-content}.spui-UnderlineTab-labelWrapper:after{background-color:var(--color-border-accent-primary);border-radius:3px;bottom:0;content:"";height:3px;left:50%;min-width:40px;opacity:0;position:absolute;transform:translateX(-50%);transition:opacity .35s ease-in-out;width:100%}.spui-UnderlineTab-button[aria-selected=true]
2
2
  .spui-UnderlineTab-labelWrapper:after{opacity:1}.spui-UnderlineTab-label{color:var(--color-text-low-emphasis);font-size:.875rem;font-weight:700;line-height:1.3}.spui-UnderlineTab--fixed .spui-UnderlineTab-label{min-width:0;overflow-wrap:break-word}.spui-UnderlineTab-button[aria-selected=true] .spui-UnderlineTab-label{color:var(--color-text-accent-primary)}.spui-UnderlineTab-badge{background-color:var(--color-surface-accent-primary);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis-inverse);flex-shrink:0;font-size:.6875rem;font-weight:700;line-height:1.3;min-width:20px;padding:1px 4px}.spui-UnderlineTab-visuallyHidden{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;width:1px}.spui-UnderlineTab-arrow{background-color:var(--color-surface-primary);bottom:0;height:-moz-fit-content;height:fit-content;margin:auto;opacity:0;position:absolute;top:0;transition:opacity .35s ease-in-out,visibility .35s ease-in-out;visibility:hidden;z-index:1}.spui-UnderlineTab-arrow.is-showed{opacity:1;visibility:visible}.spui-UnderlineTab-arrow:before{content:"";height:100%;position:absolute;width:10px;z-index:-1}.spui-UnderlineTab-arrow--left{left:0}.spui-UnderlineTab-arrow--left:before{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--color-surface-primary) 100%);left:44px}.spui-UnderlineTab-arrow--right{right:0}.spui-UnderlineTab-arrow--right:before{background:linear-gradient(270deg,var(--color-surface-primary) 0,hsla(0,0%,100%,0) 100%);right:44px}.spui-UnderlineTab-arrowButton{background-color:transparent;border:none;border-radius:8px;color:var(--color-object-low-emphasis);display:flex;padding:14px;transition:background-color .15s ease-in-out}.spui-UnderlineTab-arrowButton:hover{background-color:var(--color-surface-tertiary)}.spui-UnderlineTab-arrowButton:focus{outline:2px solid var(--color-focus-clarity)}.spui-UnderlineTab-arrowButton:not(:focus-visible){outline:none}@media (prefers-reduced-motion:reduce){.spui-UnderlineTab-arrow,.spui-UnderlineTab-arrowButton,.spui-UnderlineTab-button,.spui-UnderlineTab-labelWrapper:after{transition:.1ms}.spui-UnderlineTab--scrollable .spui-UnderlineTab-container{scroll-behavior:auto}}
package/index.css CHANGED
@@ -58,5 +58,5 @@
58
58
  --InlineNotification--danger-onHover-backgroundColor
59
59
  );--Button--danger-onActive-backgroundColor:var(
60
60
  --InlineNotification--danger-onActive-backgroundColor
61
- )}.spui-SegmentedControl{align-items:center;background-color:var(--color-surface-tertiary);border-radius:19px;box-sizing:border-box;display:grid;gap:4px;padding:4px;position:relative;width:100%}.spui-SegmentedControl--large{border-radius:24px}.spui-SegmentedControl--divider{gap:9px}.spui-SegmentedControl-button{background-color:transparent;border:none;border-radius:15px;box-sizing:border-box;color:var(--color-text-medium-emphasis);cursor:pointer;height:100%;line-height:1.3;min-width:0;overflow-wrap:break-word;padding:4px;position:relative;transition:font-weight .35s ease,color .35s ease,background-color .15s ease}.spui-SegmentedControl-button[aria-checked=true]{color:var(--color-text-high-emphasis);cursor:inherit;font-weight:700}.spui-SegmentedControl--divider .spui-SegmentedControl-button:before{background-color:var(--color-border-low-emphasis);bottom:50%;content:"";height:20px;left:-5px;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .35s ease;width:1px}.spui-SegmentedControl--divider .spui-SegmentedControl-button:first-of-type:before{content:none}.spui-SegmentedControl-button[aria-checked=true]+.spui-SegmentedControl-button[aria-checked=false]:before,.spui-SegmentedControl-button[aria-checked=true]:before{background-color:transparent}.spui-SegmentedControl-button[aria-checked=false]:hover{background-color:var(--color-surface-tertiary)}.spui-SegmentedControl-button:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-SegmentedControl-button[aria-checked=false]:focus{background-color:var(--color-surface-secondary)}.spui-SegmentedControl-button:not(:focus-visible){outline:none}.spui-SegmentedControl--medium .spui-SegmentedControl-button{font-size:.8125em;min-height:30px}.spui-SegmentedControl--large .spui-SegmentedControl-button{border-radius:20px;font-size:1em;min-height:40px}.spui-SegmentedControl-indicator{background-color:var(--color-surface-primary);bottom:4px;box-shadow:0 3.25px 7.75px rgba(8,18,26,.06);content:"";height:auto;left:0;position:absolute;top:4px;transition:transform .35s ease}@media (prefers-reduced-motion:reduce){.spui-SegmentedControl-button,.spui-SegmentedControl-indicator--ready{transition:.1ms}}.spui-UnderlineTab{background-color:var(--color-surface-primary)}.spui-UnderlineTab--border{border-bottom:1px solid var(--color-border-low-emphasis)}.spui-UnderlineTab--scrollable{position:relative}.spui-UnderlineTab-container{align-items:center;display:flex}.spui-UnderlineTab--scrollable .spui-UnderlineTab-container{-moz-column-gap:16px;column-gap:16px;overflow-x:scroll;padding:0 16px;scroll-behavior:smooth}.spui-UnderlineTab-button{background-color:transparent;border:none;box-sizing:border-box;flex-shrink:0;padding:0 4px;transition:background-color .15s ease-in-out}.spui-UnderlineTab--fixed .spui-UnderlineTab-button{width:100%}.spui-UnderlineTab--scrollable .spui-UnderlineTab-button{min-width:44px}.spui-UnderlineTab-button:hover{background-color:var(--color-surface-tertiary)}.spui-UnderlineTab-button:focus{border-radius:4px;outline:2px solid var(--color-focus-clarity);outline-offset:-2px}.spui-UnderlineTab-button:not(:focus-visible){outline:none}.spui-UnderlineTab-labelWrapper{align-items:center;-moz-column-gap:6px;column-gap:6px;display:flex;margin:0 auto;max-width:100%;padding:14px 0;position:relative;width:-moz-fit-content;width:fit-content}.spui-UnderlineTab-labelWrapper:after{background-color:var(--color-border-accent-primary);border-radius:3px;bottom:0;content:"";height:3px;left:50%;min-width:40px;opacity:0;position:absolute;transform:translateX(-50%);transition:opacity .35s ease-in-out;width:100%}.spui-UnderlineTab-button[aria-selected=true]
61
+ )}.spui-SegmentedControl{align-items:center;background-color:var(--color-surface-tertiary);border-radius:19px;box-sizing:border-box;display:grid;gap:4px;padding:4px;position:relative;width:100%}.spui-SegmentedControl--large{border-radius:24px}.spui-SegmentedControl--divider{gap:9px}.spui-SegmentedControl-button{background-color:transparent;border:none;border-radius:15px;box-sizing:border-box;color:var(--color-text-medium-emphasis);cursor:pointer;height:100%;line-height:1.3;min-width:0;overflow-wrap:break-word;padding:4px;position:relative;transition:font-weight .35s ease,color .35s ease,background-color .15s ease}.spui-SegmentedControl-button[aria-checked=true]{color:var(--color-text-high-emphasis);cursor:inherit;font-weight:700}.spui-SegmentedControl--divider .spui-SegmentedControl-button:before{background-color:var(--color-border-low-emphasis);bottom:50%;content:"";height:20px;left:-5px;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .35s ease;width:1px}.spui-SegmentedControl--divider .spui-SegmentedControl-button:first-of-type:before{content:none}.spui-SegmentedControl-button[aria-checked=true]+.spui-SegmentedControl-button[aria-checked=false]:before,.spui-SegmentedControl-button[aria-checked=true]:before{background-color:transparent}.spui-SegmentedControl-button[aria-checked=false]:hover{background-color:var(--color-surface-tertiary)}.spui-SegmentedControl-button:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-SegmentedControl-button[aria-checked=false]:focus{background-color:var(--color-surface-secondary)}.spui-SegmentedControl-button:not(:focus-visible){outline:none}.spui-SegmentedControl--medium .spui-SegmentedControl-button{font-size:.8125em;min-height:30px}.spui-SegmentedControl--large .spui-SegmentedControl-button{border-radius:20px;font-size:1em;min-height:40px}.spui-SegmentedControl-indicator{background-color:var(--color-surface-primary);bottom:4px;box-shadow:0 3.25px 7.75px rgba(8,18,26,.06);content:"";height:auto;left:0;position:absolute;top:4px;transition:transform .35s ease}@media (prefers-reduced-motion:reduce){.spui-SegmentedControl-button,.spui-SegmentedControl-indicator--ready{transition:.1ms}}.spui-UnderlineTab{background-color:var(--color-surface-primary)}.spui-UnderlineTab--border{border-bottom:1px solid var(--color-border-low-emphasis)}.spui-UnderlineTab--scrollable{position:relative}.spui-UnderlineTab-container{align-items:center;display:flex}.spui-UnderlineTab--scrollable .spui-UnderlineTab-container{-moz-column-gap:16px;column-gap:16px;overflow-x:auto;padding:0 16px;scroll-behavior:smooth}.spui-UnderlineTab-button{background-color:transparent;border:none;box-sizing:border-box;flex-shrink:0;padding:0 4px;transition:background-color .15s ease-in-out}.spui-UnderlineTab--fixed .spui-UnderlineTab-button{width:100%}.spui-UnderlineTab--scrollable .spui-UnderlineTab-button{min-width:44px}.spui-UnderlineTab-button:hover{background-color:var(--color-surface-tertiary)}.spui-UnderlineTab-button:focus{border-radius:4px;outline:2px solid var(--color-focus-clarity);outline-offset:-2px}.spui-UnderlineTab-button:not(:focus-visible){outline:none}.spui-UnderlineTab-labelWrapper{align-items:center;-moz-column-gap:6px;column-gap:6px;display:flex;margin:0 auto;max-width:100%;padding:14px 0;position:relative;width:-moz-fit-content;width:fit-content}.spui-UnderlineTab-labelWrapper:after{background-color:var(--color-border-accent-primary);border-radius:3px;bottom:0;content:"";height:3px;left:50%;min-width:40px;opacity:0;position:absolute;transform:translateX(-50%);transition:opacity .35s ease-in-out;width:100%}.spui-UnderlineTab-button[aria-selected=true]
62
62
  .spui-UnderlineTab-labelWrapper:after{opacity:1}.spui-UnderlineTab-label{color:var(--color-text-low-emphasis);font-size:.875rem;font-weight:700;line-height:1.3}.spui-UnderlineTab--fixed .spui-UnderlineTab-label{min-width:0;overflow-wrap:break-word}.spui-UnderlineTab-button[aria-selected=true] .spui-UnderlineTab-label{color:var(--color-text-accent-primary)}.spui-UnderlineTab-badge{background-color:var(--color-surface-accent-primary);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis-inverse);flex-shrink:0;font-size:.6875rem;font-weight:700;line-height:1.3;min-width:20px;padding:1px 4px}.spui-UnderlineTab-visuallyHidden{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;width:1px}.spui-UnderlineTab-arrow{background-color:var(--color-surface-primary);bottom:0;height:-moz-fit-content;height:fit-content;margin:auto;opacity:0;position:absolute;top:0;transition:opacity .35s ease-in-out,visibility .35s ease-in-out;visibility:hidden;z-index:1}.spui-UnderlineTab-arrow.is-showed{opacity:1;visibility:visible}.spui-UnderlineTab-arrow:before{content:"";height:100%;position:absolute;width:10px;z-index:-1}.spui-UnderlineTab-arrow--left{left:0}.spui-UnderlineTab-arrow--left:before{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--color-surface-primary) 100%);left:44px}.spui-UnderlineTab-arrow--right{right:0}.spui-UnderlineTab-arrow--right:before{background:linear-gradient(270deg,var(--color-surface-primary) 0,hsla(0,0%,100%,0) 100%);right:44px}.spui-UnderlineTab-arrowButton{background-color:transparent;border:none;border-radius:8px;color:var(--color-object-low-emphasis);display:flex;padding:14px;transition:background-color .15s ease-in-out}.spui-UnderlineTab-arrowButton:hover{background-color:var(--color-surface-tertiary)}.spui-UnderlineTab-arrowButton:focus{outline:2px solid var(--color-focus-clarity)}.spui-UnderlineTab-arrowButton:not(:focus-visible){outline:none}@media (prefers-reduced-motion:reduce){.spui-UnderlineTab-arrow,.spui-UnderlineTab-arrowButton,.spui-UnderlineTab-button,.spui-UnderlineTab-labelWrapper:after{transition:.1ms}.spui-UnderlineTab--scrollable .spui-UnderlineTab-container{scroll-behavior:auto}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openameba/spindle-ui",
3
- "version": "3.2.0",
3
+ "version": "3.2.1",
4
4
  "main": "./index.js",
5
5
  "module": "./index.mjs",
6
6
  "types": "./index.d.ts",
@@ -32,39 +32,39 @@
32
32
  "use-callback-ref": "^1.3.3"
33
33
  },
34
34
  "devDependencies": {
35
- "@figma/code-connect": "1.3.12",
36
- "@storybook/addon-a11y": "10.2.0",
37
- "@storybook/addon-docs": "10.2.0",
35
+ "@figma/code-connect": "1.3.13",
36
+ "@storybook/addon-a11y": "10.2.8",
37
+ "@storybook/addon-docs": "10.2.8",
38
38
  "@storybook/addon-webpack5-compiler-swc": "4.0.2",
39
- "@storybook/react": "10.2.0",
40
- "@storybook/react-webpack5": "10.2.0",
39
+ "@storybook/react": "10.2.8",
40
+ "@storybook/react-webpack5": "10.2.8",
41
41
  "@svgr/cli": "8.1.0",
42
42
  "@testing-library/dom": "10.4.1",
43
43
  "@testing-library/jest-dom": "6.9.1",
44
44
  "@testing-library/react": "16.3.2",
45
45
  "@testing-library/user-event": "14.6.1",
46
- "@types/react": "19.2.9",
46
+ "@types/react": "19.2.14",
47
47
  "@vitest/ui": "4.0.18",
48
48
  "@vscode/web-custom-data": "0.6.2",
49
- "autoprefixer": "10.4.23",
49
+ "autoprefixer": "10.4.24",
50
50
  "bundlewatch": "0.4.1",
51
51
  "cssnano": "7.1.2",
52
52
  "dialog-polyfill": "0.5.6",
53
- "dotenv": "17.2.3",
53
+ "dotenv": "17.3.1",
54
54
  "figma-api": "1.12.0",
55
- "firebase-tools": "15.4.0",
56
- "jsdom": "27.4.0",
55
+ "firebase-tools": "15.6.0",
56
+ "jsdom": "28.0.0",
57
57
  "postcss": "8.5.6",
58
58
  "postcss-cli": "11.0.1",
59
59
  "postcss-import": "16.1.1",
60
- "react": "19.2.3",
61
- "react-dom": "19.2.3",
60
+ "react": "19.2.4",
61
+ "react-dom": "19.2.4",
62
62
  "reg-keygen-git-hash-plugin": "0.14.5",
63
63
  "reg-notify-github-plugin": "0.14.5",
64
64
  "reg-publish-gcs-plugin": "0.14.4",
65
65
  "reg-suit": "0.14.5",
66
66
  "scaffdog": "4.1.0",
67
- "storybook": "10.2.0",
67
+ "storybook": "10.2.8",
68
68
  "stylelint": "16.26.1",
69
69
  "stylelint-config-standard": "39.0.1",
70
70
  "stylelint-order": "7.0.1",