@godxjp/ui 33.6.2 → 33.7.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.
@@ -54,6 +54,12 @@
54
54
  padding-inline: var(--space-4);
55
55
  }
56
56
 
57
+ .ui-toggle-touch {
58
+ min-height: var(--control-height-touch);
59
+ min-inline-size: var(--control-height-touch);
60
+ padding-inline: var(--space-4);
61
+ }
62
+
57
63
  .ui-toggle:hover {
58
64
  background: hsl(var(--accent));
59
65
  color: hsl(var(--accent-foreground));
@@ -89,6 +95,10 @@
89
95
  flex-wrap: wrap;
90
96
  }
91
97
 
98
+ .ui-toggle-group[data-size="touch"] {
99
+ gap: var(--control-touch-gap);
100
+ }
101
+
92
102
  .ui-button {
93
103
  display: inline-flex;
94
104
  align-items: center;
@@ -274,6 +284,13 @@
274
284
  font-size: var(--font-size-base);
275
285
  }
276
286
 
287
+ .ui-button--touch {
288
+ height: var(--control-height-touch);
289
+ min-inline-size: var(--control-height-touch);
290
+ padding-inline: var(--button-touch-space-inline);
291
+ font-size: var(--font-size-base);
292
+ }
293
+
277
294
  .ui-button--icon {
278
295
  width: var(--control-height);
279
296
  height: var(--control-height);
@@ -3286,6 +3303,9 @@
3286
3303
  .ui-button[data-wrap][data-size="lg"] {
3287
3304
  --button-wrap-min-height: var(--control-height-lg);
3288
3305
  }
3306
+ .ui-button[data-wrap][data-size="touch"] {
3307
+ --button-wrap-min-height: var(--control-height-touch);
3308
+ }
3289
3309
  .ui-button[data-align="start"] {
3290
3310
  justify-content: flex-start;
3291
3311
  text-align: start;
@@ -3687,6 +3707,18 @@
3687
3707
  opacity: var(--disabled-opacity);
3688
3708
  }
3689
3709
 
3710
+ .ui-radio-button-bar[data-size="touch"] {
3711
+ flex-wrap: wrap;
3712
+ gap: var(--control-touch-gap);
3713
+ }
3714
+
3715
+ .ui-radio-button-bar[data-size="touch"] .ui-radio-button {
3716
+ block-size: var(--control-height-touch);
3717
+ min-inline-size: var(--control-height-touch);
3718
+ border-inline-start-width: var(--control-border-width, var(--stroke-hairline));
3719
+ border-radius: var(--control-radius);
3720
+ }
3721
+
3690
3722
  .ui-segmented[data-block="true"] {
3691
3723
  display: flex;
3692
3724
  inline-size: 100%;
@@ -3724,4 +3756,14 @@
3724
3756
  .ui-segmented[data-size="lg"] {
3725
3757
  --control-height: var(--control-height-lg);
3726
3758
  }
3759
+
3760
+ .ui-segmented[data-size="touch"] {
3761
+ --control-height: var(--control-height-touch);
3762
+ --segmented-item-height: var(--control-height-touch);
3763
+ gap: var(--control-touch-gap);
3764
+ }
3765
+
3766
+ .ui-segmented[data-size="touch"] > .ui-segmented-item[data-slot="segmented-item"] {
3767
+ min-inline-size: var(--control-height-touch);
3768
+ }
3727
3769
  }
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "33.6.2",
2
+ "version": "33.7.1",
3
3
  "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
4
4
  "base": "base.css",
5
5
  "fonts": "fonts.css",
@@ -166,7 +166,12 @@
166
166
  [data-slot="swatch"]
167
167
  ),
168
168
  [data-slot="table-cell"]
169
- > :not([data-wrap], .ui-table-actions-content)
169
+ > :not(
170
+ [data-wrap],
171
+ [data-direction="col"],
172
+ [data-direction="responsive"],
173
+ .ui-table-actions-content
174
+ )
170
175
  > :is(
171
176
  [data-slot="button"],
172
177
  [data-slot="avatar"],