@pure-ds/storybook 0.7.26 → 0.7.29
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/.storybook/addons/html-preview/Panel.jsx +128 -7
- package/.storybook/addons/html-preview/preview.js +112 -2
- package/dist/pds-reference.json +204 -3
- package/package.json +2 -2
- package/public/assets/js/app.js +1 -1
- package/public/assets/js/pds-ask.js +6 -6
- package/public/assets/js/pds-manager.js +110 -56
- package/public/assets/pds/components/pds-omnibox.js +70 -3
- package/public/assets/pds/components/pds-tags.js +160 -122
- package/public/assets/pds/core/pds-ask.js +6 -6
- package/public/assets/pds/core/pds-manager.js +110 -56
- package/public/assets/pds/custom-elements.json +175 -1
- package/public/assets/pds/pds-css-complete.json +1 -1
- package/public/assets/pds/pds-runtime-config.json +1 -1
- package/public/assets/pds/styles/pds-styles.css +56 -16
- package/public/assets/pds/styles/pds-styles.css.js +112 -32
- package/public/assets/pds/styles/pds-utilities.css +56 -16
- package/public/assets/pds/styles/pds-utilities.css.js +112 -32
- package/public/assets/pds/vscode-custom-data.json +32 -0
- package/src/js/common/ask.js +165 -37
- package/src/js/pds-core/pds-generator.js +98 -26
- package/src/js/pds.d.ts +55 -1
- package/stories/components/PdsTags.stories.js +283 -19
- package/stories/primitives/Buttons.stories.js +24 -5
- package/stories/utils/PdsAsk.stories.js +201 -9
- package/stories/utils/PdsToast.stories.js +43 -3
|
@@ -3280,7 +3280,7 @@
|
|
|
3280
3280
|
{
|
|
3281
3281
|
"kind": "field",
|
|
3282
3282
|
"name": "innerHTML",
|
|
3283
|
-
"default": "`\r\n <style>\r\n :host {\r\n --rating-star-size: var(--spacing-lg);\r\n --rating-star-gap: var(--spacing-2xs);\r\n --rating-star-off: var(--color-text-muted);\r\n --rating-star-on: var(--color-warning-500);\r\n --rating-focus: var(--color-primary-500);\r\n --rating-fill-pct: 0%;\r\n display: inline-block;\r\n inline-size: fit-content;\r\n max-inline-size: 100%;\r\n touch-action: none;\r\n }\r\n\r\n
|
|
3283
|
+
"default": "`\r\n <style>\r\n :host {\r\n --rating-star-size: var(--spacing-lg);\r\n --rating-star-gap: var(--spacing-2xs);\r\n --rating-star-off: var(--color-text-muted);\r\n --rating-star-on: var(--color-warning-500);\r\n --rating-focus: var(--color-primary-500);\r\n --rating-fill-pct: 0%;\r\n display: inline-block;\r\n inline-size: fit-content;\r\n max-inline-size: 100%;\r\n touch-action: none;\r\n }\r\n\r\n .wrap {\r\n position: relative;\r\n display: inline-grid;\r\n gap: var(--spacing-2xs);\r\n align-items: center;\r\n justify-items: start;\r\n min-block-size: calc(var(--rating-star-size) + var(--spacing-xs));\r\n }\r\n\r\n .interactive {\r\n display: inline-grid;\r\n place-items: center start;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n user-select: none;\r\n -webkit-tap-highlight-color: transparent;\r\n touch-action: pan-x;\r\n }\r\n\r\n :host([disabled]) .interactive,\r\n :host([readonly]) .interactive {\r\n cursor: default;\r\n }\r\n\r\n :host([disabled]) {\r\n opacity: 0.5;\r\n }\r\n\r\n .stars {\r\n display: block;\r\n inline-size: auto;\r\n block-size: var(--rating-star-size);\r\n overflow: visible;\r\n transition: transform 220ms ease, opacity 220ms ease;\r\n }\r\n\r\n :host([data-in-view=\"false\"]) .stars {\r\n opacity: 0;\r\n transform: translateY(var(--spacing-xs)) scale(0.98);\r\n }\r\n\r\n :host([data-in-view=\"true\"]) .stars {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n input[type=\"range\"] {\r\n position: absolute !important;\r\n inset-inline-start: 0 !important;\r\n inset-block-start: 0 !important;\r\n inline-size: 1px !important;\r\n block-size: 1px !important;\r\n min-inline-size: 1px !important;\r\n min-block-size: 1px !important;\r\n margin: -1px !important;\r\n border: 0 !important;\r\n padding: 0 !important;\r\n opacity: 0 !important;\r\n overflow: hidden !important;\r\n clip: rect(0 0 0 0) !important;\r\n clip-path: inset(50%) !important;\r\n white-space: nowrap !important;\r\n appearance: none !important;\r\n -webkit-appearance: none !important;\r\n pointer-events: none !important;\r\n }\r\n\r\n :host(:focus-within) .interactive {\r\n outline: 2px solid var(--rating-focus);\r\n outline-offset: var(--spacing-3xs);\r\n border-radius: var(--radius-sm);\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .stars {\r\n transition: none;\r\n }\r\n }\r\n </style>\r\n\r\n <div class=\"wrap\" part=\"control\">\r\n <div class=\"interactive\" part=\"interactive\" aria-hidden=\"true\">\r\n <svg class=\"stars\" part=\"stars\" focusable=\"false\" aria-hidden=\"true\"></svg>\r\n </div>\r\n <input class=\"native-input\" type=\"range\" />\r\n </div>\r\n `"
|
|
3284
3284
|
}
|
|
3285
3285
|
],
|
|
3286
3286
|
"events": [
|
|
@@ -4200,6 +4200,180 @@
|
|
|
4200
4200
|
}
|
|
4201
4201
|
]
|
|
4202
4202
|
},
|
|
4203
|
+
{
|
|
4204
|
+
"kind": "javascript-module",
|
|
4205
|
+
"path": "public/assets/pds/components/pds-tags.js",
|
|
4206
|
+
"declarations": [
|
|
4207
|
+
{
|
|
4208
|
+
"kind": "class",
|
|
4209
|
+
"description": "Form-associated multi-select tags control built on top of `pds-omnibox`.\r\n\r\nUsers select suggestions from the omnibox and each selection is rendered as a removable\r\nchip. The component keeps selection state synchronized across:\r\n- the `value` attribute (comma-separated ids)\r\n- the `value` property (`string[]`)\r\n- form value via ElementInternals\r\n\r\nIf `settings` is not provided, the component derives omnibox categories from `options`.\r\nWhen `required` is set, at least one selected value is required for validity.",
|
|
4210
|
+
"name": "PdsTags",
|
|
4211
|
+
"members": [
|
|
4212
|
+
{
|
|
4213
|
+
"kind": "field",
|
|
4214
|
+
"name": "formAssociated",
|
|
4215
|
+
"type": {
|
|
4216
|
+
"text": "boolean"
|
|
4217
|
+
},
|
|
4218
|
+
"static": true,
|
|
4219
|
+
"default": "true"
|
|
4220
|
+
},
|
|
4221
|
+
{
|
|
4222
|
+
"kind": "field",
|
|
4223
|
+
"name": "name"
|
|
4224
|
+
},
|
|
4225
|
+
{
|
|
4226
|
+
"kind": "field",
|
|
4227
|
+
"name": "placeholder"
|
|
4228
|
+
},
|
|
4229
|
+
{
|
|
4230
|
+
"kind": "field",
|
|
4231
|
+
"name": "options",
|
|
4232
|
+
"type": {
|
|
4233
|
+
"text": "Array<string|Object>"
|
|
4234
|
+
},
|
|
4235
|
+
"description": "Option source used to build omnibox suggestions"
|
|
4236
|
+
},
|
|
4237
|
+
{
|
|
4238
|
+
"kind": "field",
|
|
4239
|
+
"name": "settings",
|
|
4240
|
+
"type": {
|
|
4241
|
+
"text": "Object|null"
|
|
4242
|
+
},
|
|
4243
|
+
"description": "Omnibox-compatible settings source"
|
|
4244
|
+
},
|
|
4245
|
+
{
|
|
4246
|
+
"kind": "field",
|
|
4247
|
+
"name": "value",
|
|
4248
|
+
"type": {
|
|
4249
|
+
"text": "string[]"
|
|
4250
|
+
},
|
|
4251
|
+
"description": "Selected option ids (array form)"
|
|
4252
|
+
},
|
|
4253
|
+
{
|
|
4254
|
+
"kind": "field",
|
|
4255
|
+
"name": "disabled"
|
|
4256
|
+
},
|
|
4257
|
+
{
|
|
4258
|
+
"kind": "field",
|
|
4259
|
+
"name": "required"
|
|
4260
|
+
},
|
|
4261
|
+
{
|
|
4262
|
+
"kind": "method",
|
|
4263
|
+
"name": "formResetCallback"
|
|
4264
|
+
},
|
|
4265
|
+
{
|
|
4266
|
+
"kind": "method",
|
|
4267
|
+
"name": "formStateRestoreCallback",
|
|
4268
|
+
"parameters": [
|
|
4269
|
+
{
|
|
4270
|
+
"name": "state"
|
|
4271
|
+
}
|
|
4272
|
+
]
|
|
4273
|
+
},
|
|
4274
|
+
{
|
|
4275
|
+
"kind": "method",
|
|
4276
|
+
"name": "formDisabledCallback",
|
|
4277
|
+
"parameters": [
|
|
4278
|
+
{
|
|
4279
|
+
"name": "disabled"
|
|
4280
|
+
}
|
|
4281
|
+
]
|
|
4282
|
+
},
|
|
4283
|
+
{
|
|
4284
|
+
"kind": "method",
|
|
4285
|
+
"name": "checkValidity"
|
|
4286
|
+
},
|
|
4287
|
+
{
|
|
4288
|
+
"kind": "method",
|
|
4289
|
+
"name": "reportValidity"
|
|
4290
|
+
}
|
|
4291
|
+
],
|
|
4292
|
+
"events": [
|
|
4293
|
+
{
|
|
4294
|
+
"name": "input",
|
|
4295
|
+
"type": {
|
|
4296
|
+
"text": "Event"
|
|
4297
|
+
},
|
|
4298
|
+
"description": "Fired whenever selection changes"
|
|
4299
|
+
},
|
|
4300
|
+
{
|
|
4301
|
+
"name": "change",
|
|
4302
|
+
"type": {
|
|
4303
|
+
"text": "Event"
|
|
4304
|
+
},
|
|
4305
|
+
"description": "Fired whenever selection changes"
|
|
4306
|
+
}
|
|
4307
|
+
],
|
|
4308
|
+
"attributes": [
|
|
4309
|
+
{
|
|
4310
|
+
"name": "name",
|
|
4311
|
+
"type": {
|
|
4312
|
+
"text": "string"
|
|
4313
|
+
},
|
|
4314
|
+
"description": "Form field name; selected values are submitted under this name"
|
|
4315
|
+
},
|
|
4316
|
+
{
|
|
4317
|
+
"name": "placeholder",
|
|
4318
|
+
"type": {
|
|
4319
|
+
"text": "string"
|
|
4320
|
+
},
|
|
4321
|
+
"description": "Placeholder shown in omnibox input (default: \"Search tags...\")"
|
|
4322
|
+
},
|
|
4323
|
+
{
|
|
4324
|
+
"name": "value",
|
|
4325
|
+
"type": {
|
|
4326
|
+
"text": "string"
|
|
4327
|
+
},
|
|
4328
|
+
"description": "Comma-separated selected item ids"
|
|
4329
|
+
},
|
|
4330
|
+
{
|
|
4331
|
+
"name": "options",
|
|
4332
|
+
"type": {
|
|
4333
|
+
"text": "string"
|
|
4334
|
+
},
|
|
4335
|
+
"description": "JSON array of options (`string[]` or object[] with id/text metadata)"
|
|
4336
|
+
},
|
|
4337
|
+
{
|
|
4338
|
+
"name": "settings",
|
|
4339
|
+
"type": {
|
|
4340
|
+
"text": "string"
|
|
4341
|
+
},
|
|
4342
|
+
"description": "JSON omnibox settings; takes precedence over derived options settings"
|
|
4343
|
+
},
|
|
4344
|
+
{
|
|
4345
|
+
"name": "disabled",
|
|
4346
|
+
"type": {
|
|
4347
|
+
"text": "boolean"
|
|
4348
|
+
},
|
|
4349
|
+
"description": "Disables omnibox interaction and chip remove actions"
|
|
4350
|
+
},
|
|
4351
|
+
{
|
|
4352
|
+
"name": "required",
|
|
4353
|
+
"type": {
|
|
4354
|
+
"text": "boolean"
|
|
4355
|
+
},
|
|
4356
|
+
"description": "Requires at least one selected value for validity"
|
|
4357
|
+
}
|
|
4358
|
+
],
|
|
4359
|
+
"superclass": {
|
|
4360
|
+
"name": "HTMLElement"
|
|
4361
|
+
},
|
|
4362
|
+
"tagName": "pds-tags",
|
|
4363
|
+
"customElement": true
|
|
4364
|
+
}
|
|
4365
|
+
],
|
|
4366
|
+
"exports": [
|
|
4367
|
+
{
|
|
4368
|
+
"kind": "custom-element-definition",
|
|
4369
|
+
"name": "pds-tags",
|
|
4370
|
+
"declaration": {
|
|
4371
|
+
"name": "PdsTags",
|
|
4372
|
+
"module": "public/assets/pds/components/pds-tags.js"
|
|
4373
|
+
}
|
|
4374
|
+
}
|
|
4375
|
+
]
|
|
4376
|
+
},
|
|
4203
4377
|
{
|
|
4204
4378
|
"kind": "javascript-module",
|
|
4205
4379
|
"path": "public/assets/pds/components/pds-theme.js",
|
|
@@ -2297,7 +2297,7 @@
|
|
|
2297
2297
|
],
|
|
2298
2298
|
"metadata": {
|
|
2299
2299
|
"generator": "PDS CSS Data Generator",
|
|
2300
|
-
"generatedAt": "2026-03-
|
|
2300
|
+
"generatedAt": "2026-03-04T14:29:06.155Z",
|
|
2301
2301
|
"totalProperties": 169,
|
|
2302
2302
|
"totalClasses": 170,
|
|
2303
2303
|
"totalAttributes": 5
|
|
@@ -3316,37 +3316,77 @@ pds-icon {
|
|
|
3316
3316
|
.icon-text-end { flex-direction: row-reverse; }
|
|
3317
3317
|
|
|
3318
3318
|
/* Button icon utilities */
|
|
3319
|
-
button,
|
|
3320
|
-
|
|
3319
|
+
button,
|
|
3320
|
+
a.btn,
|
|
3321
|
+
a.btn-primary,
|
|
3322
|
+
a.btn-secondary,
|
|
3323
|
+
a.btn-outline,
|
|
3324
|
+
a.btn-danger,
|
|
3325
|
+
a.icon-only {
|
|
3326
|
+
pds-icon,
|
|
3327
|
+
pds-icon[size] {
|
|
3321
3328
|
flex-shrink: 0;
|
|
3329
|
+
width: 1em;
|
|
3330
|
+
height: 1em;
|
|
3322
3331
|
}
|
|
3323
3332
|
|
|
3324
3333
|
&.icon-only {
|
|
3325
|
-
padding: var(--spacing-2);
|
|
3326
|
-
min-width: 30px;
|
|
3327
|
-
|
|
3328
|
-
|
|
3334
|
+
padding: calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.72);
|
|
3335
|
+
min-width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
3336
|
+
min-height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
3337
|
+
width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
3338
|
+
height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
3329
3339
|
display: inline-flex;
|
|
3330
3340
|
align-items: center;
|
|
3331
3341
|
justify-content: center;
|
|
3342
|
+
|
|
3343
|
+
pds-icon,
|
|
3344
|
+
pds-icon[size] {
|
|
3345
|
+
width: 1.2em;
|
|
3346
|
+
height: 1.2em;
|
|
3347
|
+
}
|
|
3332
3348
|
}
|
|
3333
3349
|
|
|
3334
3350
|
&.btn-sm.icon-only {
|
|
3335
|
-
|
|
3336
|
-
width: calc(30px * 0.
|
|
3337
|
-
height: calc(30px * 0.
|
|
3351
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 0.72);
|
|
3352
|
+
min-width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
3353
|
+
min-height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
3354
|
+
width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
3355
|
+
height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
3356
|
+
|
|
3357
|
+
pds-icon,
|
|
3358
|
+
pds-icon[size] {
|
|
3359
|
+
width: 1.15em;
|
|
3360
|
+
height: 1.15em;
|
|
3361
|
+
}
|
|
3338
3362
|
}
|
|
3339
3363
|
|
|
3340
3364
|
&.btn-xs.icon-only {
|
|
3341
|
-
|
|
3342
|
-
width: calc(30px * 0.
|
|
3343
|
-
height: calc(30px * 0.
|
|
3365
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 0.72);
|
|
3366
|
+
min-width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
3367
|
+
min-height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
3368
|
+
width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
3369
|
+
height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
3370
|
+
|
|
3371
|
+
pds-icon,
|
|
3372
|
+
pds-icon[size] {
|
|
3373
|
+
width: 1.1em;
|
|
3374
|
+
height: 1.1em;
|
|
3375
|
+
}
|
|
3344
3376
|
}
|
|
3345
3377
|
|
|
3346
3378
|
&.btn-lg.icon-only {
|
|
3347
|
-
|
|
3348
|
-
width: calc(30px * 1.2);
|
|
3349
|
-
height: calc(30px * 1.2);
|
|
3379
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 0.72);
|
|
3380
|
+
min-width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
3381
|
+
min-height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
3382
|
+
width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
3383
|
+
height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
3384
|
+
|
|
3385
|
+
pds-icon,
|
|
3386
|
+
pds-icon[size] {
|
|
3387
|
+
width: 1.25em;
|
|
3388
|
+
height: 1.25em;
|
|
3389
|
+
}
|
|
3350
3390
|
}
|
|
3351
3391
|
}
|
|
3352
3392
|
|
|
@@ -3865,7 +3905,7 @@ html[data-theme="dark"] .surface-inverse {
|
|
|
3865
3905
|
/* Touch device optimizations */
|
|
3866
3906
|
@media (hover: none) and (pointer: coarse) {
|
|
3867
3907
|
/* Touch devices - larger touch targets for interactive elements */
|
|
3868
|
-
button
|
|
3908
|
+
button, a, select, textarea,
|
|
3869
3909
|
input:not([type="radio"]):not([type="checkbox"]) {
|
|
3870
3910
|
min-height: 44px;
|
|
3871
3911
|
min-width: 44px;
|
|
@@ -3320,37 +3320,77 @@ pds-icon {
|
|
|
3320
3320
|
.icon-text-end { flex-direction: row-reverse; }
|
|
3321
3321
|
|
|
3322
3322
|
/* Button icon utilities */
|
|
3323
|
-
button,
|
|
3324
|
-
|
|
3323
|
+
button,
|
|
3324
|
+
a.btn,
|
|
3325
|
+
a.btn-primary,
|
|
3326
|
+
a.btn-secondary,
|
|
3327
|
+
a.btn-outline,
|
|
3328
|
+
a.btn-danger,
|
|
3329
|
+
a.icon-only {
|
|
3330
|
+
pds-icon,
|
|
3331
|
+
pds-icon[size] {
|
|
3325
3332
|
flex-shrink: 0;
|
|
3333
|
+
width: 1em;
|
|
3334
|
+
height: 1em;
|
|
3326
3335
|
}
|
|
3327
3336
|
|
|
3328
3337
|
&.icon-only {
|
|
3329
|
-
padding: var(--spacing-2);
|
|
3330
|
-
min-width: 30px;
|
|
3331
|
-
|
|
3332
|
-
|
|
3338
|
+
padding: calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.72);
|
|
3339
|
+
min-width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
3340
|
+
min-height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
3341
|
+
width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
3342
|
+
height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
3333
3343
|
display: inline-flex;
|
|
3334
3344
|
align-items: center;
|
|
3335
3345
|
justify-content: center;
|
|
3346
|
+
|
|
3347
|
+
pds-icon,
|
|
3348
|
+
pds-icon[size] {
|
|
3349
|
+
width: 1.2em;
|
|
3350
|
+
height: 1.2em;
|
|
3351
|
+
}
|
|
3336
3352
|
}
|
|
3337
3353
|
|
|
3338
3354
|
&.btn-sm.icon-only {
|
|
3339
|
-
|
|
3340
|
-
width: calc(30px * 0.
|
|
3341
|
-
height: calc(30px * 0.
|
|
3355
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 0.72);
|
|
3356
|
+
min-width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
3357
|
+
min-height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
3358
|
+
width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
3359
|
+
height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
3360
|
+
|
|
3361
|
+
pds-icon,
|
|
3362
|
+
pds-icon[size] {
|
|
3363
|
+
width: 1.15em;
|
|
3364
|
+
height: 1.15em;
|
|
3365
|
+
}
|
|
3342
3366
|
}
|
|
3343
3367
|
|
|
3344
3368
|
&.btn-xs.icon-only {
|
|
3345
|
-
|
|
3346
|
-
width: calc(30px * 0.
|
|
3347
|
-
height: calc(30px * 0.
|
|
3369
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 0.72);
|
|
3370
|
+
min-width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
3371
|
+
min-height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
3372
|
+
width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
3373
|
+
height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
3374
|
+
|
|
3375
|
+
pds-icon,
|
|
3376
|
+
pds-icon[size] {
|
|
3377
|
+
width: 1.1em;
|
|
3378
|
+
height: 1.1em;
|
|
3379
|
+
}
|
|
3348
3380
|
}
|
|
3349
3381
|
|
|
3350
3382
|
&.btn-lg.icon-only {
|
|
3351
|
-
|
|
3352
|
-
width: calc(30px * 1.2);
|
|
3353
|
-
height: calc(30px * 1.2);
|
|
3383
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 0.72);
|
|
3384
|
+
min-width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
3385
|
+
min-height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
3386
|
+
width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
3387
|
+
height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
3388
|
+
|
|
3389
|
+
pds-icon,
|
|
3390
|
+
pds-icon[size] {
|
|
3391
|
+
width: 1.25em;
|
|
3392
|
+
height: 1.25em;
|
|
3393
|
+
}
|
|
3354
3394
|
}
|
|
3355
3395
|
}
|
|
3356
3396
|
|
|
@@ -3869,7 +3909,7 @@ html[data-theme="dark"] .surface-inverse {
|
|
|
3869
3909
|
/* Touch device optimizations */
|
|
3870
3910
|
@media (hover: none) and (pointer: coarse) {
|
|
3871
3911
|
/* Touch devices - larger touch targets for interactive elements */
|
|
3872
|
-
button
|
|
3912
|
+
button, a, select, textarea,
|
|
3873
3913
|
input:not([type="radio"]):not([type="checkbox"]) {
|
|
3874
3914
|
min-height: 44px;
|
|
3875
3915
|
min-width: 44px;
|
|
@@ -7276,37 +7316,77 @@ pds-icon {
|
|
|
7276
7316
|
.icon-text-end { flex-direction: row-reverse; }
|
|
7277
7317
|
|
|
7278
7318
|
/* Button icon utilities */
|
|
7279
|
-
button,
|
|
7280
|
-
|
|
7319
|
+
button,
|
|
7320
|
+
a.btn,
|
|
7321
|
+
a.btn-primary,
|
|
7322
|
+
a.btn-secondary,
|
|
7323
|
+
a.btn-outline,
|
|
7324
|
+
a.btn-danger,
|
|
7325
|
+
a.icon-only {
|
|
7326
|
+
pds-icon,
|
|
7327
|
+
pds-icon[size] {
|
|
7281
7328
|
flex-shrink: 0;
|
|
7329
|
+
width: 1em;
|
|
7330
|
+
height: 1em;
|
|
7282
7331
|
}
|
|
7283
7332
|
|
|
7284
7333
|
&.icon-only {
|
|
7285
|
-
padding: var(--spacing-2);
|
|
7286
|
-
min-width: 30px;
|
|
7287
|
-
|
|
7288
|
-
|
|
7334
|
+
padding: calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.72);
|
|
7335
|
+
min-width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
7336
|
+
min-height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
7337
|
+
width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
7338
|
+
height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
7289
7339
|
display: inline-flex;
|
|
7290
7340
|
align-items: center;
|
|
7291
7341
|
justify-content: center;
|
|
7342
|
+
|
|
7343
|
+
pds-icon,
|
|
7344
|
+
pds-icon[size] {
|
|
7345
|
+
width: 1.2em;
|
|
7346
|
+
height: 1.2em;
|
|
7347
|
+
}
|
|
7292
7348
|
}
|
|
7293
7349
|
|
|
7294
7350
|
&.btn-sm.icon-only {
|
|
7295
|
-
|
|
7296
|
-
width: calc(30px * 0.
|
|
7297
|
-
height: calc(30px * 0.
|
|
7351
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 0.72);
|
|
7352
|
+
min-width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
7353
|
+
min-height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
7354
|
+
width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
7355
|
+
height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
7356
|
+
|
|
7357
|
+
pds-icon,
|
|
7358
|
+
pds-icon[size] {
|
|
7359
|
+
width: 1.15em;
|
|
7360
|
+
height: 1.15em;
|
|
7361
|
+
}
|
|
7298
7362
|
}
|
|
7299
7363
|
|
|
7300
7364
|
&.btn-xs.icon-only {
|
|
7301
|
-
|
|
7302
|
-
width: calc(30px * 0.
|
|
7303
|
-
height: calc(30px * 0.
|
|
7365
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 0.72);
|
|
7366
|
+
min-width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
7367
|
+
min-height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
7368
|
+
width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
7369
|
+
height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
7370
|
+
|
|
7371
|
+
pds-icon,
|
|
7372
|
+
pds-icon[size] {
|
|
7373
|
+
width: 1.1em;
|
|
7374
|
+
height: 1.1em;
|
|
7375
|
+
}
|
|
7304
7376
|
}
|
|
7305
7377
|
|
|
7306
7378
|
&.btn-lg.icon-only {
|
|
7307
|
-
|
|
7308
|
-
width: calc(30px * 1.2);
|
|
7309
|
-
height: calc(30px * 1.2);
|
|
7379
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 0.72);
|
|
7380
|
+
min-width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
7381
|
+
min-height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
7382
|
+
width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
7383
|
+
height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
7384
|
+
|
|
7385
|
+
pds-icon,
|
|
7386
|
+
pds-icon[size] {
|
|
7387
|
+
width: 1.25em;
|
|
7388
|
+
height: 1.25em;
|
|
7389
|
+
}
|
|
7310
7390
|
}
|
|
7311
7391
|
}
|
|
7312
7392
|
|
|
@@ -7825,7 +7905,7 @@ html[data-theme="dark"] .surface-inverse {
|
|
|
7825
7905
|
/* Touch device optimizations */
|
|
7826
7906
|
@media (hover: none) and (pointer: coarse) {
|
|
7827
7907
|
/* Touch devices - larger touch targets for interactive elements */
|
|
7828
|
-
button
|
|
7908
|
+
button, a, select, textarea,
|
|
7829
7909
|
input:not([type="radio"]):not([type="checkbox"]) {
|
|
7830
7910
|
min-height: 44px;
|
|
7831
7911
|
min-width: 44px;
|
|
@@ -38,37 +38,77 @@ pds-icon {
|
|
|
38
38
|
.icon-text-end { flex-direction: row-reverse; }
|
|
39
39
|
|
|
40
40
|
/* Button icon utilities */
|
|
41
|
-
button,
|
|
42
|
-
|
|
41
|
+
button,
|
|
42
|
+
a.btn,
|
|
43
|
+
a.btn-primary,
|
|
44
|
+
a.btn-secondary,
|
|
45
|
+
a.btn-outline,
|
|
46
|
+
a.btn-danger,
|
|
47
|
+
a.icon-only {
|
|
48
|
+
pds-icon,
|
|
49
|
+
pds-icon[size] {
|
|
43
50
|
flex-shrink: 0;
|
|
51
|
+
width: 1em;
|
|
52
|
+
height: 1em;
|
|
44
53
|
}
|
|
45
54
|
|
|
46
55
|
&.icon-only {
|
|
47
|
-
padding: var(--spacing-2);
|
|
48
|
-
min-width: 30px;
|
|
49
|
-
|
|
50
|
-
|
|
56
|
+
padding: calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.72);
|
|
57
|
+
min-width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
58
|
+
min-height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
59
|
+
width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
60
|
+
height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
|
|
51
61
|
display: inline-flex;
|
|
52
62
|
align-items: center;
|
|
53
63
|
justify-content: center;
|
|
64
|
+
|
|
65
|
+
pds-icon,
|
|
66
|
+
pds-icon[size] {
|
|
67
|
+
width: 1.2em;
|
|
68
|
+
height: 1.2em;
|
|
69
|
+
}
|
|
54
70
|
}
|
|
55
71
|
|
|
56
72
|
&.btn-sm.icon-only {
|
|
57
|
-
|
|
58
|
-
width: calc(30px * 0.
|
|
59
|
-
height: calc(30px * 0.
|
|
73
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 0.72);
|
|
74
|
+
min-width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
75
|
+
min-height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
76
|
+
width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
77
|
+
height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
|
|
78
|
+
|
|
79
|
+
pds-icon,
|
|
80
|
+
pds-icon[size] {
|
|
81
|
+
width: 1.15em;
|
|
82
|
+
height: 1.15em;
|
|
83
|
+
}
|
|
60
84
|
}
|
|
61
85
|
|
|
62
86
|
&.btn-xs.icon-only {
|
|
63
|
-
|
|
64
|
-
width: calc(30px * 0.
|
|
65
|
-
height: calc(30px * 0.
|
|
87
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 0.72);
|
|
88
|
+
min-width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
89
|
+
min-height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
90
|
+
width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
91
|
+
height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
|
|
92
|
+
|
|
93
|
+
pds-icon,
|
|
94
|
+
pds-icon[size] {
|
|
95
|
+
width: 1.1em;
|
|
96
|
+
height: 1.1em;
|
|
97
|
+
}
|
|
66
98
|
}
|
|
67
99
|
|
|
68
100
|
&.btn-lg.icon-only {
|
|
69
|
-
|
|
70
|
-
width: calc(30px * 1.2);
|
|
71
|
-
height: calc(30px * 1.2);
|
|
101
|
+
padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 0.72);
|
|
102
|
+
min-width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
103
|
+
min-height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
104
|
+
width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
105
|
+
height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
|
|
106
|
+
|
|
107
|
+
pds-icon,
|
|
108
|
+
pds-icon[size] {
|
|
109
|
+
width: 1.25em;
|
|
110
|
+
height: 1.25em;
|
|
111
|
+
}
|
|
72
112
|
}
|
|
73
113
|
}
|
|
74
114
|
|
|
@@ -587,7 +627,7 @@ html[data-theme="dark"] .surface-inverse {
|
|
|
587
627
|
/* Touch device optimizations */
|
|
588
628
|
@media (hover: none) and (pointer: coarse) {
|
|
589
629
|
/* Touch devices - larger touch targets for interactive elements */
|
|
590
|
-
button
|
|
630
|
+
button, a, select, textarea,
|
|
591
631
|
input:not([type="radio"]):not([type="checkbox"]) {
|
|
592
632
|
min-height: 44px;
|
|
593
633
|
min-width: 44px;
|