@ardium-ui/ui 2.0.6 → 2.1.0

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 (10) hide show
  1. package/esm2022/lib/_internal/selectable-list-component.mjs +5 -2
  2. package/esm2022/lib/segment/segment.component.mjs +2 -1
  3. package/esm2022/lib/segment/segment.types.mjs +2 -1
  4. package/fesm2022/ardium-ui-ui.mjs +6 -1
  5. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  6. package/lib/segment/segment.types.d.ts +1 -0
  7. package/package.json +1 -1
  8. package/prebuilt-themes/default/segment.css +24 -15
  9. package/prebuilt-themes/default/segment.css.map +1 -1
  10. package/themes/default/segment.scss +19 -8
package/lib/segment/segment.types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export declare const SegmentVariant: {
2
2
  readonly RoundedConnected: "rounded-connected";
3
3
  readonly SharpConnected: "sharp-connected";
4
+ readonly PillConnected: "pill-connected";
4
5
  readonly Pill: "pill";
5
6
  readonly Rounded: "rounded";
6
7
  readonly Sharp: "sharp";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "2.0.6",
3
+ "version": "2.1.0",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
package/prebuilt-themes/default/segment.css CHANGED
@@ -247,55 +247,61 @@
247
247
  border: 1px solid var(--ard-border-light);
248
248
  }
249
249
  .ard-segment-container.ard-appearance-outlined .ard-segment-option.ard-option-selected, .ard-segment-container.ard-appearance-outlined-strong .ard-segment-option.ard-option-selected {
250
- border-color: var(--ard-cmpcl--border);
250
+ border-color: var(--ard-cmpcl--content);
251
251
  color: var(--ard-cmpcl--content);
252
252
  }
253
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected {
253
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected {
254
254
  gap: 0;
255
255
  }
256
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected .ard-segment-row {
256
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected .ard-segment-row {
257
257
  gap: 0;
258
258
  }
259
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected .ard-segment-row:not(:first-child) {
259
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected .ard-segment-row:not(:first-child) {
260
260
  margin-top: -1px;
261
261
  }
262
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected .ard-segment-row .ard-segment-option:not(:first-child) {
262
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected .ard-segment-row .ard-segment-option:not(:first-child) {
263
263
  margin-left: -1px;
264
264
  }
265
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row .ard-segment-option, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row .ard-segment-option {
265
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row .ard-segment-option, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row .ard-segment-option, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row .ard-segment-option, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row .ard-segment-option {
266
266
  border-radius: 0 !important;
267
267
  }
268
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child {
268
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child .ard-segment-option:first-child {
269
269
  border-top-left-radius: var(--ard-variant-border-radius) !important;
270
270
  }
271
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:last-child {
271
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child .ard-segment-option:last-child {
272
272
  border-top-right-radius: var(--ard-variant-border-radius) !important;
273
273
  }
274
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child:last-child {
274
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child .ard-segment-option:first-child:last-child {
275
275
  border-top-right-radius: var(--ard-variant-border-radius) !important;
276
276
  border-top-left-radius: var(--ard-variant-border-radius) !important;
277
277
  }
278
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child {
278
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row:last-child .ard-segment-option:first-child {
279
279
  border-bottom-left-radius: var(--ard-variant-border-radius) !important;
280
280
  }
281
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:last-child {
281
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row:last-child .ard-segment-option:last-child {
282
282
  border-bottom-right-radius: var(--ard-variant-border-radius) !important;
283
283
  }
284
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child:last-child {
284
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row:last-child .ard-segment-option:first-child:last-child {
285
285
  border-bottom-right-radius: var(--ard-variant-border-radius) !important;
286
286
  border-bottom-left-radius: var(--ard-variant-border-radius) !important;
287
287
  }
288
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child {
288
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child:last-child .ard-segment-option:first-child {
289
289
  border-top-left-radius: var(--ard-variant-border-radius) !important;
290
290
  border-bottom-left-radius: var(--ard-variant-border-radius) !important;
291
291
  }
292
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:last-child {
292
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child:last-child .ard-segment-option:last-child {
293
293
  border-top-right-radius: var(--ard-variant-border-radius) !important;
294
294
  border-bottom-right-radius: var(--ard-variant-border-radius) !important;
295
295
  }
296
- .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child:last-child {
296
+ .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row:first-child:last-child .ard-segment-option:first-child:last-child {
297
297
  border-radius: var(--ard-variant-border-radius) !important;
298
298
  }
299
+ .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row .ard-segment-option:first-child {
300
+ padding-left: 1.25em;
301
+ }
302
+ .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected.ard-singlerow .ard-segment-row .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected.ard-singlerow .ard-segment-row .ard-segment-option:last-child {
303
+ padding-right: 1.25em;
304
+ }
299
305
  .ard-segment-container.ard-appearance-outlined-strong .ard-segment-option.ard-option-selected {
300
306
  background-color: var(--ard-cmpcl--bg);
301
307
  color: var(--ard-cmpcl--on-bg);
@@ -359,6 +365,9 @@
359
365
  .ard-segment-container.ard-variant-sharp .ard-segment-row .ard-segment-option, .ard-segment-container.ard-variant-sharp-connected .ard-segment-row .ard-segment-option {
360
366
  border-radius: calc(var(--ard-variant-border-radius));
361
367
  }
368
+ .ard-segment-container.ard-variant-pill-connected.ard-singlerow {
369
+ --ard-variant-border-radius: 9999px;
370
+ }
362
371
  .ard-segment-container.ard-compact .ard-segment-row {
363
372
  --ard-_font-size: 0.85em;
364
373
  height: calc(1.85em + 1px);
package/prebuilt-themes/default/segment.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/segment.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EC0CA;;ACtDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD5FF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;AD9CF;ECRA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDCE;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAQJ;EACE;;AAIF;EACE;;AAIF;EACE;;AAOA;EACE;;AAIF;EACE;;AAOR;EACE;;AAII;EACE;;AAGF;EACE;;AAKR;EAEE,YG7HC;EH8HD;;AAEA;EACE;;AAEA;EACE;EACA;;AAGJ;EAEE;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAMF;EACE;;AAIE;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAQV;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKE;EACE;;AAIF;EACE;;AAKR;EACE;EACA;;AAGE;EACE;;AAEA;EACE;;AAGA;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;AAQV;EACE;;AAGE;EACE;;AAIN;EAEE;EACA;;AAGE;EACE;;AAIN;EAEE;;AAGE;EACE;;AAOJ;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;EAEE;;AAEF;EACE","file":"segment.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/segment.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EC0CA;;ACtDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD5FF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;AD9CF;ECRA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDCE;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAQJ;EACE;;AAIF;EACE;;AAIF;EACE;;AAOA;EACE;;AAIF;EACE;;AAOR;EACE;;AAII;EACE;;AAGF;EACE;;AAKR;EAEE,YGzHC;EH0HD;;AAEA;EACE;;AAEA;EACE;EACA;;AAGJ;EAGE;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAOF;EACE;;AAIE;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAQN;EACE;;AAEF;EACE;;AAMN;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKE;EACE;;AAIF;EACE;;AAKR;EACE;EACA;;AAGE;EACE;;AAEA;EACE;;AAGA;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;AAQV;EACE;;AAGE;EACE;;AAIN;EAEE;EACA;;AAGE;EACE;;AAIN;EAEE;;AAGE;EACE;;AAIN;EACE;;AAKA;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;EAEE;;AAEF;EACE","file":"segment.css"}
package/themes/default/segment.scss CHANGED
@@ -41,11 +41,7 @@
41
41
  background: transparent;
42
42
  position: relative;
43
43
  cursor: pointer;
44
- transition:
45
- color 0.1s $timing-fn,
46
- opacity 0.1s $timing-fn,
47
- border-color 0.1s $timing-fn,
48
- background-color 0.1s $timing-fn;
44
+ transition: color 0.1s $timing-fn, opacity 0.1s $timing-fn, border-color 0.1s $timing-fn, background-color 0.1s $timing-fn;
49
45
  outline: none;
50
46
  display: flex;
51
47
  align-items: center;
@@ -130,12 +126,13 @@
130
126
  border: 1px solid $border-light;
131
127
 
132
128
  &.ard-option-selected {
133
- border-color: var(--ard-cmpcl--border);
129
+ border-color: var(--ard-cmpcl--content);
134
130
  color: var(--ard-cmpcl--content);
135
131
  }
136
132
  }
137
133
  &.ard-variant-rounded-connected,
138
- &.ard-variant-sharp-connected {
134
+ &.ard-variant-sharp-connected,
135
+ &.ard-variant-pill-connected {
139
136
  gap: 0;
140
137
 
141
138
  .ard-segment-row {
@@ -150,7 +147,8 @@
150
147
  }
151
148
  }
152
149
  }
153
- &.ard-variant-rounded-connected {
150
+ &.ard-variant-rounded-connected,
151
+ &.ard-variant-pill-connected.ard-singlerow {
154
152
  .ard-segment-row {
155
153
  .ard-segment-option {
156
154
  border-radius: 0 !important;
@@ -200,6 +198,16 @@
200
198
  }
201
199
  }
202
200
  }
201
+ &.ard-variant-pill-connected.ard-singlerow {
202
+ .ard-segment-row .ard-segment-option {
203
+ &:first-child {
204
+ padding-left: 1.25em;
205
+ }
206
+ &:last-child {
207
+ padding-right: 1.25em;
208
+ }
209
+ }
210
+ }
203
211
  }
204
212
  &.ard-appearance-outlined-strong {
205
213
  .ard-segment-option.ard-option-selected {
@@ -294,6 +302,9 @@
294
302
  }
295
303
  }
296
304
  }
305
+ &.ard-variant-pill-connected.ard-singlerow {
306
+ --ard-variant-border-radius: 9999px;
307
+ }
297
308
 
298
309
  //! compact
299
310
  &.ard-compact {