twico-ui 1.3.0 → 1.3.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.
- package/dist/index.cjs +30 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +30 -14
- package/dist/index.mjs.map +1 -1
- package/llms.txt +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -8800,17 +8800,25 @@ function Tooltip({
|
|
|
8800
8800
|
);
|
|
8801
8801
|
}
|
|
8802
8802
|
var SIDEBAR_CSS = `
|
|
8803
|
+
/* Collapse/expand: the rail width eases (emphasis curve, --duration-slow), while text
|
|
8804
|
+
FADES rather than display:none-popping, and items keep their alignment so nothing
|
|
8805
|
+
jolts. Icons sit at space-3 + 11px (= 23px) from the edge, which is the centre of the
|
|
8806
|
+
68px collapsed rail, so no justify-content switch is needed. Fades are directional:
|
|
8807
|
+
instant on collapse (clear out, then slide), delayed on expand (slide open, then reveal). */
|
|
8803
8808
|
.twc-sidebar { display: flex; flex-direction: column; height: 100%; font-family: var(--font-sans);
|
|
8804
8809
|
background: var(--color-surface); border-inline-end: var(--border-thin) solid var(--color-border);
|
|
8805
8810
|
flex: 0 0 248px; min-width: 0; width: 248px; max-width: 248px;
|
|
8806
|
-
transition: flex-basis var(--duration-
|
|
8811
|
+
transition: flex-basis var(--duration-slow) var(--ease-emphasis), width var(--duration-slow) var(--ease-emphasis), max-width var(--duration-slow) var(--ease-emphasis); overflow: hidden; }
|
|
8807
8812
|
.twc-sidebar[data-collapsed="true"] { flex-basis: 68px; width: 68px; max-width: 68px; }
|
|
8808
|
-
.twc-sidebar__head { display: flex; align-items: center; gap: var(--space-2-5); height: 60px; padding: 0 var(--space-4); flex: none;
|
|
8809
|
-
border-bottom: var(--border-thin) solid var(--color-divider); }
|
|
8810
|
-
.twc-sidebar__brand { display: inline-flex; align-items: center; gap: var(--space-2-5); font-weight: var(--font-extrabold); font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-text); white-space: nowrap; overflow: hidden;
|
|
8813
|
+
.twc-sidebar__head { display: flex; align-items: center; gap: var(--space-2-5); height: 60px; padding: 0 var(--space-4); flex: none; overflow: hidden;
|
|
8814
|
+
border-bottom: var(--border-thin) solid var(--color-divider); transition: padding var(--duration-slow) var(--ease-emphasis); }
|
|
8815
|
+
.twc-sidebar__brand { display: inline-flex; align-items: center; gap: var(--space-2-5); font-weight: var(--font-extrabold); font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-text); white-space: nowrap; overflow: hidden; min-width: 0;
|
|
8816
|
+
transition: font-size var(--duration-base) var(--ease-standard), gap var(--duration-base) var(--ease-standard); }
|
|
8811
8817
|
.twc-sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
|
|
8812
|
-
.twc-sidebar__section { font-size: 10px; font-weight: var(--font-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-subtle); padding: var(--space-3) var(--space-3) var(--space-1); white-space: nowrap;
|
|
8813
|
-
|
|
8818
|
+
.twc-sidebar__section { font-size: 10px; font-weight: var(--font-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-subtle); padding: var(--space-3) var(--space-3) var(--space-1); white-space: nowrap; overflow: hidden; max-height: 2.5rem; opacity: 1; visibility: visible;
|
|
8819
|
+
transition: max-height var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8820
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__section { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden;
|
|
8821
|
+
transition: max-height var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-standard), opacity var(--duration-instant) var(--ease-standard), visibility 0s var(--duration-base); }
|
|
8814
8822
|
.twc-sidebar__item { display: flex; align-items: center; gap: var(--space-3); padding: 9px 11px; border-radius: var(--radius-md);
|
|
8815
8823
|
font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); text-decoration: none; cursor: pointer;
|
|
8816
8824
|
border: none; background: none; font-family: inherit; width: 100%; min-width: 0; text-align: start; white-space: nowrap; overflow: hidden;
|
|
@@ -8822,21 +8830,29 @@ var SIDEBAR_CSS = `
|
|
|
8822
8830
|
.twc-sidebar__ic svg { width: 19px; height: 19px; }
|
|
8823
8831
|
.twc-sidebar__ic--initial { width: 19px; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-bold); text-transform: uppercase; line-height: 1; }
|
|
8824
8832
|
.twc-sidebar:not([data-collapsed="true"]) .twc-sidebar__ic--initial { display: none; }
|
|
8825
|
-
.twc-sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
|
|
8826
|
-
|
|
8827
|
-
.twc-sidebar[data-collapsed="true"] .twc-
|
|
8833
|
+
.twc-sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 1; visibility: visible;
|
|
8834
|
+
transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8835
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__label { opacity: 0; visibility: hidden; transition: opacity var(--duration-instant) var(--ease-standard), visibility 0s var(--duration-instant); }
|
|
8836
|
+
.twc-sidebar__badge { flex: none; font-size: 11px; font-weight: var(--font-bold); padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-fg); opacity: 1; visibility: visible;
|
|
8837
|
+
transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8838
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__badge { opacity: 0; visibility: hidden; transition: opacity var(--duration-instant) var(--ease-standard), visibility 0s var(--duration-instant); }
|
|
8839
|
+
/* Collapsed: centre the brand mark in the 68px rail (\u2248 the nav icon column) with no
|
|
8840
|
+
right padding, so a mark wider than the icons isn't clipped. flex-start (not
|
|
8841
|
+
justify-content) keeps it from jolting to centre while the rail is still wide. */
|
|
8842
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__head { padding-inline: 18px 0; }
|
|
8828
8843
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__brand, .twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { font-size: 0; gap: 0; }
|
|
8829
8844
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { justify-content: center; }
|
|
8830
|
-
.twc-
|
|
8831
|
-
.twc-
|
|
8845
|
+
.twc-sidebar__brand > :not(:first-child) { visibility: visible; transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8846
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__brand > :not(:first-child) { opacity: 0; visibility: hidden; transition: opacity var(--duration-instant) var(--ease-standard), visibility 0s var(--duration-instant); }
|
|
8847
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user > * > :not(:first-child) { display: none; }
|
|
8832
8848
|
.twc-sidebar__foot { flex: none; border-top: var(--border-thin) solid var(--color-divider); padding: var(--space-2); }
|
|
8833
8849
|
.twc-sidebar__foot-user { display: flex; align-items: center; padding: 6px 6px 8px; }
|
|
8834
8850
|
.twc-sidebar__collapse { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px; border: none; background: none; cursor: pointer;
|
|
8835
|
-
color: var(--color-text-muted); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold);
|
|
8851
|
+
color: var(--color-text-muted); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold);
|
|
8852
|
+
transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
|
|
8836
8853
|
.twc-sidebar__collapse:hover { background: var(--color-surface-sunken); color: var(--color-text); }
|
|
8837
|
-
.twc-sidebar__collapse svg { width: 18px; height: 18px; transition: transform var(--duration-base) var(--ease-spring); }
|
|
8854
|
+
.twc-sidebar__collapse svg { width: 18px; height: 18px; flex: none; transition: transform var(--duration-base) var(--ease-spring); }
|
|
8838
8855
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse svg { transform: rotate(180deg); }
|
|
8839
|
-
.twc-sidebar[data-collapsed="true"] .twc-sidebar__item { gap: 0; justify-content: center; padding: 9px 0; width: 40px; margin: 0 auto; }
|
|
8840
8856
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0; }
|
|
8841
8857
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse { width: auto; padding: 11px; gap: 0; margin: 0; }
|
|
8842
8858
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse span { display: none; }
|