@openameba/spindle-ui 3.2.1 → 3.2.2

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 +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1878](https://github.com/openameba/spindle/pull/1878) [`113ac34`](https://github.com/openameba/spindle/commit/113ac3430f91846987617602ccc00024d9276920) Thanks [@yu-3in](https://github.com/yu-3in)! - UnderlineTab button border-radius now applied consistently
8
+
3
9
  ## 3.2.1
4
10
 
5
11
  ### Patch 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: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]
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;border-radius:4px;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{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: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]
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;border-radius:4px;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{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.1",
3
+ "version": "3.2.2",
4
4
  "main": "./index.js",
5
5
  "module": "./index.mjs",
6
6
  "types": "./index.d.ts",
@@ -53,7 +53,7 @@
53
53
  "dotenv": "17.3.1",
54
54
  "figma-api": "1.12.0",
55
55
  "firebase-tools": "15.6.0",
56
- "jsdom": "28.0.0",
56
+ "jsdom": "28.1.0",
57
57
  "postcss": "8.5.6",
58
58
  "postcss-cli": "11.0.1",
59
59
  "postcss-import": "16.1.1",