origam 2.17.0 → 2.17.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.
Files changed (25) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/dist/src/assets/css/main.css +1 -1
  3. package/dist/src/assets/css/tokens/dark.css +6 -4
  4. package/dist/src/assets/css/tokens/light.css +3 -2
  5. package/dist/src/assets/scss/tokens/_dark.scss +3 -2
  6. package/dist/src/assets/scss/tokens/_light.scss +3 -2
  7. package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue +13 -13
  8. package/dist/src/components/DatePickerField/OrigamDatePickerField.vue +13 -13
  9. package/dist/src/components/Field/OrigamField.vue +36 -13
  10. package/dist/src/components/FileField/OrigamFileField.vue +15 -14
  11. package/dist/src/components/Masonry/OrigamMasonry.vue +1 -1
  12. package/dist/src/components/NumberField/OrigamNumberField.vue +13 -13
  13. package/dist/src/components/OtpInputField/OrigamOtpInputField.vue +13 -13
  14. package/dist/src/components/PasswordField/OrigamPasswordField.vue +15 -14
  15. package/dist/src/components/Select/OrigamSelect.vue +13 -13
  16. package/dist/src/components/Switch/OrigamSwitchTrack.vue +20 -0
  17. package/dist/src/components/TextField/OrigamTextField.vue +15 -14
  18. package/dist/src/components/TextareaField/OrigamTextareaField.vue +15 -14
  19. package/dist/src/components/VirtualScroll/OrigamVirtualScroll.vue +1 -1
  20. package/dist/src/consts/Commons/border.const.cjs +2 -1
  21. package/dist/src/consts/Commons/border.const.d.ts +19 -0
  22. package/dist/src/consts/Commons/border.const.js +15 -0
  23. package/dist/src/interfaces/Field/field.interface.d.ts +21 -1
  24. package/dist/src/types/tokens.type.d.ts +1 -1
  25. package/package.json +1 -1
package/dist/src/assets/css/tokens/dark.css CHANGED
@@ -1996,8 +1996,9 @@
1996
1996
  --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
1997
1997
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
1998
1998
  --origam-switch__track---color-error: var(--origam-color__feedback--danger---fg);
1999
- --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2000
- --origam-switch__track---border-width: var(--origam-border__width---0);
1999
+ --origam-switch__track---border-color: var(--origam-color__border---default);
2000
+ --origam-switch__track---border-style: solid;
2001
+ --origam-switch__track---border-width: var(--origam-border__width---thin);
2001
2002
  --origam-switch__track---backdrop-filter: none;
2002
2003
  --origam-switch__thumb---size: 20px;
2003
2004
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
@@ -4728,8 +4729,9 @@
4728
4729
  --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
4729
4730
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
4730
4731
  --origam-switch__track---color-error: var(--origam-color__feedback--danger---fg);
4731
- --origam-switch__track---border-color: rgba(0, 0, 0, 0);
4732
- --origam-switch__track---border-width: var(--origam-border__width---0);
4732
+ --origam-switch__track---border-color: var(--origam-color__border---default);
4733
+ --origam-switch__track---border-style: solid;
4734
+ --origam-switch__track---border-width: var(--origam-border__width---thin);
4733
4735
  --origam-switch__track---backdrop-filter: none;
4734
4736
  --origam-switch__thumb---size: 20px;
4735
4737
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
package/dist/src/assets/css/tokens/light.css CHANGED
@@ -1997,8 +1997,9 @@
1997
1997
  --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
1998
1998
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
1999
1999
  --origam-switch__track---color-error: var(--origam-color__feedback--danger---fg);
2000
- --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2001
- --origam-switch__track---border-width: var(--origam-border__width---0);
2000
+ --origam-switch__track---border-color: var(--origam-color__border---default);
2001
+ --origam-switch__track---border-style: solid;
2002
+ --origam-switch__track---border-width: var(--origam-border__width---thin);
2002
2003
  --origam-switch__track---backdrop-filter: none;
2003
2004
  --origam-switch__thumb---size: 20px;
2004
2005
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
package/dist/src/assets/scss/tokens/_dark.scss CHANGED
@@ -1996,8 +1996,9 @@
1996
1996
  --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
1997
1997
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
1998
1998
  --origam-switch__track---color-error: var(--origam-color__feedback--danger---fg);
1999
- --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2000
- --origam-switch__track---border-width: var(--origam-border__width---0);
1999
+ --origam-switch__track---border-color: var(--origam-color__border---default);
2000
+ --origam-switch__track---border-style: solid;
2001
+ --origam-switch__track---border-width: var(--origam-border__width---thin);
2001
2002
  --origam-switch__track---backdrop-filter: none;
2002
2003
  --origam-switch__thumb---size: 20px;
2003
2004
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
package/dist/src/assets/scss/tokens/_light.scss CHANGED
@@ -1997,8 +1997,9 @@
1997
1997
  --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
1998
1998
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
1999
1999
  --origam-switch__track---color-error: var(--origam-color__feedback--danger---fg);
2000
- --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2001
- --origam-switch__track---border-width: var(--origam-border__width---0);
2000
+ --origam-switch__track---border-color: var(--origam-color__border---default);
2001
+ --origam-switch__track---border-style: solid;
2002
+ --origam-switch__track---border-width: var(--origam-border__width---thin);
2002
2003
  --origam-switch__track---backdrop-filter: none;
2003
2004
  --origam-switch__thumb---size: 20px;
2004
2005
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue CHANGED
@@ -192,6 +192,19 @@ const props = defineProps({
192
192
  prependInnerIcon: { type: null, required: false },
193
193
  clearIcon: { type: null, required: false },
194
194
  clearable: { type: Boolean, required: false },
195
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
196
+ borderTop: { type: [Boolean, Number, String], required: false },
197
+ borderLeft: { type: [Boolean, Number, String], required: false },
198
+ borderBottom: { type: [Boolean, Number, String], required: false },
199
+ borderRight: { type: [Boolean, Number, String], required: false },
200
+ borderBlock: { type: [Boolean, Number, String], required: false },
201
+ borderInline: { type: [Boolean, Number, String], required: false },
202
+ borderColor: { type: String, required: false },
203
+ borderStyle: { type: String, required: false },
204
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
205
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
206
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
207
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
195
208
  focused: { type: Boolean, required: false },
196
209
  text: { type: String, required: false },
197
210
  floating: { type: Boolean, required: false },
@@ -210,19 +223,6 @@ const props = defineProps({
210
223
  paddingRight: { type: [Boolean, Number, String], required: false },
211
224
  paddingBlock: { type: [Boolean, Number, String], required: false },
212
225
  paddingInline: { type: [Boolean, Number, String], required: false },
213
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
214
- borderTop: { type: [Boolean, Number, String], required: false },
215
- borderLeft: { type: [Boolean, Number, String], required: false },
216
- borderBottom: { type: [Boolean, Number, String], required: false },
217
- borderRight: { type: [Boolean, Number, String], required: false },
218
- borderBlock: { type: [Boolean, Number, String], required: false },
219
- borderInline: { type: [Boolean, Number, String], required: false },
220
- borderColor: { type: String, required: false },
221
- borderStyle: { type: String, required: false },
222
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
223
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
224
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
225
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
226
226
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
227
227
  roundedTopRight: { type: [Boolean, Number, String], required: false },
228
228
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
package/dist/src/components/DatePickerField/OrigamDatePickerField.vue CHANGED
@@ -244,6 +244,19 @@ const props = defineProps({
244
244
  prependInnerIcon: { type: null, required: false },
245
245
  clearIcon: { type: null, required: false },
246
246
  clearable: { type: Boolean, required: false },
247
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
248
+ borderTop: { type: [Boolean, Number, String], required: false },
249
+ borderLeft: { type: [Boolean, Number, String], required: false },
250
+ borderBottom: { type: [Boolean, Number, String], required: false },
251
+ borderRight: { type: [Boolean, Number, String], required: false },
252
+ borderBlock: { type: [Boolean, Number, String], required: false },
253
+ borderInline: { type: [Boolean, Number, String], required: false },
254
+ borderColor: { type: String, required: false },
255
+ borderStyle: { type: String, required: false },
256
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
257
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
258
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
259
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
247
260
  focused: { type: Boolean, required: false },
248
261
  text: { type: String, required: false },
249
262
  floating: { type: Boolean, required: false },
@@ -262,19 +275,6 @@ const props = defineProps({
262
275
  paddingRight: { type: [Boolean, Number, String], required: false },
263
276
  paddingBlock: { type: [Boolean, Number, String], required: false },
264
277
  paddingInline: { type: [Boolean, Number, String], required: false },
265
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
266
- borderTop: { type: [Boolean, Number, String], required: false },
267
- borderLeft: { type: [Boolean, Number, String], required: false },
268
- borderBottom: { type: [Boolean, Number, String], required: false },
269
- borderRight: { type: [Boolean, Number, String], required: false },
270
- borderBlock: { type: [Boolean, Number, String], required: false },
271
- borderInline: { type: [Boolean, Number, String], required: false },
272
- borderColor: { type: String, required: false },
273
- borderStyle: { type: String, required: false },
274
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
275
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
276
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
277
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
278
278
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
279
279
  roundedTopRight: { type: [Boolean, Number, String], required: false },
280
280
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
package/dist/src/components/Field/OrigamField.vue CHANGED
@@ -182,6 +182,7 @@ import OrigamLabel from "../Label/OrigamLabel.vue";
182
182
  import OrigamProgress from "../Progress/OrigamProgress.vue";
183
183
  import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
184
184
  import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
185
+ import { useBorder } from "../../composables/Commons/border.composable";
185
186
  import { useBothColor } from "../../composables/Commons/bothColor.composable";
186
187
  import { useDensity } from "../../composables/Commons/density.composable";
187
188
  import { useFocus } from "../../composables/Commons/focus.composable";
@@ -232,6 +233,19 @@ const props = defineProps({
232
233
  prependInnerIcon: { type: null, required: false },
233
234
  clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
234
235
  clearable: { type: Boolean, required: false },
236
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
237
+ borderTop: { type: [Boolean, Number, String], required: false },
238
+ borderLeft: { type: [Boolean, Number, String], required: false },
239
+ borderBottom: { type: [Boolean, Number, String], required: false },
240
+ borderRight: { type: [Boolean, Number, String], required: false },
241
+ borderBlock: { type: [Boolean, Number, String], required: false },
242
+ borderInline: { type: [Boolean, Number, String], required: false },
243
+ borderColor: { type: String, required: false },
244
+ borderStyle: { type: String, required: false },
245
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
246
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
247
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
248
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
235
249
  focused: { type: Boolean, required: false },
236
250
  density: { type: null, required: false, default: DENSITY.DEFAULT },
237
251
  text: { type: String, required: false },
@@ -251,19 +265,6 @@ const props = defineProps({
251
265
  paddingRight: { type: [Boolean, Number, String], required: false },
252
266
  paddingBlock: { type: [Boolean, Number, String], required: false },
253
267
  paddingInline: { type: [Boolean, Number, String], required: false },
254
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
255
- borderTop: { type: [Boolean, Number, String], required: false },
256
- borderLeft: { type: [Boolean, Number, String], required: false },
257
- borderBottom: { type: [Boolean, Number, String], required: false },
258
- borderRight: { type: [Boolean, Number, String], required: false },
259
- borderBlock: { type: [Boolean, Number, String], required: false },
260
- borderInline: { type: [Boolean, Number, String], required: false },
261
- borderColor: { type: String, required: false },
262
- borderStyle: { type: String, required: false },
263
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
264
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
265
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
266
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
267
268
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
268
269
  roundedTopRight: { type: [Boolean, Number, String], required: false },
269
270
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -447,6 +448,7 @@ const bgColor = computed(() => {
447
448
  return isActive.value && isFocused.value && activeState.value?.bgColor ? activeState.value.bgColor : props.bgColor;
448
449
  });
449
450
  const { colorClasses, colorStyles } = useBothColor(bgColor, color);
451
+ const { borderStyles } = useBorder(props);
450
452
  const { densityClasses } = useDensity(props);
451
453
  const {
452
454
  roundedClasses,
@@ -464,11 +466,32 @@ const fieldRadiusVarStyles = computed(() => {
464
466
  if (!radius) return [];
465
467
  return [`--origam-field---border-radius: ${radius.slice("border-radius:".length).trim()}`];
466
468
  });
469
+ const fieldBorderVarStyles = computed(() => {
470
+ const declarations = borderStyles.value;
471
+ if (!Array.isArray(declarations)) return [];
472
+ const vars = [];
473
+ const lastValueOf = (property) => {
474
+ const prefix = `${property}:`;
475
+ const match = declarations.filter((declaration) => declaration.startsWith(prefix)).pop();
476
+ return match ? match.slice(prefix.length).trim() : null;
477
+ };
478
+ const width = lastValueOf("border-width");
479
+ const style = lastValueOf("border-style");
480
+ const color2 = lastValueOf("border-color");
481
+ if (width) vars.push(`--origam-field---border-width: ${width}`);
482
+ if (style) vars.push(`--origam-field__outline---border-style: ${style}`);
483
+ if (color2) {
484
+ vars.push(`--origam-field---border-color: ${color2}`);
485
+ vars.push("--origam-field---border-opacity: 1");
486
+ }
487
+ return vars;
488
+ });
467
489
  const fieldStyles = computed(() => {
468
490
  return [
469
491
  colorStyles.value,
470
492
  roundedStyles.value,
471
493
  fieldRadiusVarStyles.value,
494
+ fieldBorderVarStyles.value,
472
495
  elevationStyles.value,
473
496
  props.style
474
497
  ];
package/dist/src/components/FileField/OrigamFileField.vue CHANGED
@@ -387,6 +387,7 @@ import OrigamIcon from "../Icon/OrigamIcon.vue";
387
387
  import OrigamInput from "../Input/OrigamInput.vue";
388
388
  import OrigamFileFieldDragNDropItem from "./OrigamFileFieldDragNDropItem.vue";
389
389
  import OrigamFileFieldListItem from "./OrigamFileFieldListItem.vue";
390
+ import { BORDER_PROP_KEYS } from "../../consts/Commons/border.const";
390
391
  import { useAdjacent } from "../../composables/Commons/adjacent.composable";
391
392
  import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
392
393
  import { useBothColor } from "../../composables/Commons/bothColor.composable";
@@ -453,6 +454,19 @@ const props = defineProps({
453
454
  prependInnerIcon: { type: null, required: false, default: MDI_ICONS.PAPERCLIP },
454
455
  clearIcon: { type: null, required: false },
455
456
  clearable: { type: Boolean, required: false, default: true },
457
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
458
+ borderTop: { type: [Boolean, Number, String], required: false },
459
+ borderLeft: { type: [Boolean, Number, String], required: false },
460
+ borderBottom: { type: [Boolean, Number, String], required: false },
461
+ borderRight: { type: [Boolean, Number, String], required: false },
462
+ borderBlock: { type: [Boolean, Number, String], required: false },
463
+ borderInline: { type: [Boolean, Number, String], required: false },
464
+ borderColor: { type: String, required: false },
465
+ borderStyle: { type: String, required: false },
466
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
467
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
468
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
469
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
456
470
  focused: { type: Boolean, required: false },
457
471
  text: { type: String, required: false },
458
472
  floating: { type: Boolean, required: false },
@@ -471,19 +485,6 @@ const props = defineProps({
471
485
  paddingRight: { type: [Boolean, Number, String], required: false },
472
486
  paddingBlock: { type: [Boolean, Number, String], required: false },
473
487
  paddingInline: { type: [Boolean, Number, String], required: false },
474
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
475
- borderTop: { type: [Boolean, Number, String], required: false },
476
- borderLeft: { type: [Boolean, Number, String], required: false },
477
- borderBottom: { type: [Boolean, Number, String], required: false },
478
- borderRight: { type: [Boolean, Number, String], required: false },
479
- borderBlock: { type: [Boolean, Number, String], required: false },
480
- borderInline: { type: [Boolean, Number, String], required: false },
481
- borderColor: { type: String, required: false },
482
- borderStyle: { type: String, required: false },
483
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
484
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
485
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
486
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
487
488
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
488
489
  roundedTopRight: { type: [Boolean, Number, String], required: false },
489
490
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -740,7 +741,7 @@ const dropzoneSubtitleText = computed(() => {
740
741
  });
741
742
  const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
742
743
  const inputProps = computed(() => {
743
- return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused"]);
744
+ return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", ...BORDER_PROP_KEYS]);
744
745
  });
745
746
  const fieldProps = computed(() => {
746
747
  return origamFieldRef.value?.filterProps(props, ["class", "style", "id", "active", "dirty", "disabled", "focused", "error"]);
package/dist/src/components/Masonry/OrigamMasonry.vue CHANGED
@@ -20,7 +20,7 @@
20
20
  :style="getItemStyle(idx)"
21
21
  >
22
22
  <component
23
- :is="{ render: () => child }"
23
+ :is="child"
24
24
  />
25
25
  </div>
26
26
  </template>
package/dist/src/components/NumberField/OrigamNumberField.vue CHANGED
@@ -348,6 +348,19 @@ const props = defineProps({
348
348
  prependInnerIcon: { type: null, required: false },
349
349
  clearIcon: { type: null, required: false },
350
350
  clearable: { type: Boolean, required: false },
351
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
352
+ borderTop: { type: [Boolean, Number, String], required: false },
353
+ borderLeft: { type: [Boolean, Number, String], required: false },
354
+ borderBottom: { type: [Boolean, Number, String], required: false },
355
+ borderRight: { type: [Boolean, Number, String], required: false },
356
+ borderBlock: { type: [Boolean, Number, String], required: false },
357
+ borderInline: { type: [Boolean, Number, String], required: false },
358
+ borderColor: { type: String, required: false },
359
+ borderStyle: { type: String, required: false },
360
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
361
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
362
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
363
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
351
364
  focused: { type: Boolean, required: false },
352
365
  density: { type: null, required: false },
353
366
  text: { type: String, required: false },
@@ -367,19 +380,6 @@ const props = defineProps({
367
380
  paddingRight: { type: [Boolean, Number, String], required: false },
368
381
  paddingBlock: { type: [Boolean, Number, String], required: false },
369
382
  paddingInline: { type: [Boolean, Number, String], required: false },
370
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
371
- borderTop: { type: [Boolean, Number, String], required: false },
372
- borderLeft: { type: [Boolean, Number, String], required: false },
373
- borderBottom: { type: [Boolean, Number, String], required: false },
374
- borderRight: { type: [Boolean, Number, String], required: false },
375
- borderBlock: { type: [Boolean, Number, String], required: false },
376
- borderInline: { type: [Boolean, Number, String], required: false },
377
- borderColor: { type: String, required: false },
378
- borderStyle: { type: String, required: false },
379
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
380
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
381
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
382
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
383
383
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
384
384
  roundedTopRight: { type: [Boolean, Number, String], required: false },
385
385
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
package/dist/src/components/OtpInputField/OrigamOtpInputField.vue CHANGED
@@ -201,6 +201,19 @@ const props = defineProps({
201
201
  prependInnerIcon: { type: null, required: false },
202
202
  clearIcon: { type: null, required: false },
203
203
  clearable: { type: Boolean, required: false },
204
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
205
+ borderTop: { type: [Boolean, Number, String], required: false },
206
+ borderLeft: { type: [Boolean, Number, String], required: false },
207
+ borderBottom: { type: [Boolean, Number, String], required: false },
208
+ borderRight: { type: [Boolean, Number, String], required: false },
209
+ borderBlock: { type: [Boolean, Number, String], required: false },
210
+ borderInline: { type: [Boolean, Number, String], required: false },
211
+ borderColor: { type: String, required: false },
212
+ borderStyle: { type: String, required: false },
213
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
214
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
215
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
216
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
204
217
  focused: { type: Boolean, required: false },
205
218
  density: { type: null, required: false },
206
219
  text: { type: String, required: false },
@@ -220,19 +233,6 @@ const props = defineProps({
220
233
  paddingRight: { type: [Boolean, Number, String], required: false },
221
234
  paddingBlock: { type: [Boolean, Number, String], required: false },
222
235
  paddingInline: { type: [Boolean, Number, String], required: false },
223
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
224
- borderTop: { type: [Boolean, Number, String], required: false },
225
- borderLeft: { type: [Boolean, Number, String], required: false },
226
- borderBottom: { type: [Boolean, Number, String], required: false },
227
- borderRight: { type: [Boolean, Number, String], required: false },
228
- borderBlock: { type: [Boolean, Number, String], required: false },
229
- borderInline: { type: [Boolean, Number, String], required: false },
230
- borderColor: { type: String, required: false },
231
- borderStyle: { type: String, required: false },
232
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
233
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
234
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
235
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
236
236
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
237
237
  roundedTopRight: { type: [Boolean, Number, String], required: false },
238
238
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
package/dist/src/components/PasswordField/OrigamPasswordField.vue CHANGED
@@ -318,6 +318,7 @@ import { useLocale } from "../../composables/Commons/locale.composable";
318
318
  import { useProps } from "../../composables/Commons/props.composable";
319
319
  import { useStyle } from "../../composables/Commons/style.composable";
320
320
  import { useVModel } from "../../composables/Commons/vModel.composable";
321
+ import { BORDER_PROP_KEYS } from "../../consts/Commons/border.const";
321
322
  import { DEFAULT_PASSWORD_REQUIREMENTS, REQUIREMENT_MIN_LENGTH, REQUIREMENT_NUMBER, REQUIREMENT_SPECIAL, REQUIREMENT_TINY, REQUIREMENT_UPPERCASE } from "../../consts/PasswordField/password-field.const";
322
323
  import vIntersect from "../../directives/Intersect/intersect.directive";
323
324
  import { DENSITY } from "../../enums/Commons/density.enum";
@@ -388,6 +389,19 @@ const props = defineProps({
388
389
  prependInnerIcon: { type: null, required: false },
389
390
  clearIcon: { type: null, required: false },
390
391
  clearable: { type: Boolean, required: false },
392
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
393
+ borderTop: { type: [Boolean, Number, String], required: false },
394
+ borderLeft: { type: [Boolean, Number, String], required: false },
395
+ borderBottom: { type: [Boolean, Number, String], required: false },
396
+ borderRight: { type: [Boolean, Number, String], required: false },
397
+ borderBlock: { type: [Boolean, Number, String], required: false },
398
+ borderInline: { type: [Boolean, Number, String], required: false },
399
+ borderColor: { type: String, required: false },
400
+ borderStyle: { type: String, required: false },
401
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
402
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
403
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
404
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
391
405
  focused: { type: Boolean, required: false },
392
406
  text: { type: String, required: false },
393
407
  floating: { type: Boolean, required: false },
@@ -406,19 +420,6 @@ const props = defineProps({
406
420
  paddingRight: { type: [Boolean, Number, String], required: false },
407
421
  paddingBlock: { type: [Boolean, Number, String], required: false },
408
422
  paddingInline: { type: [Boolean, Number, String], required: false },
409
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
410
- borderTop: { type: [Boolean, Number, String], required: false },
411
- borderLeft: { type: [Boolean, Number, String], required: false },
412
- borderBottom: { type: [Boolean, Number, String], required: false },
413
- borderRight: { type: [Boolean, Number, String], required: false },
414
- borderBlock: { type: [Boolean, Number, String], required: false },
415
- borderInline: { type: [Boolean, Number, String], required: false },
416
- borderColor: { type: String, required: false },
417
- borderStyle: { type: String, required: false },
418
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
419
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
420
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
421
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
422
423
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
423
424
  roundedTopRight: { type: [Boolean, Number, String], required: false },
424
425
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -615,7 +616,7 @@ const enrichedRules = computed(() => {
615
616
  });
616
617
  const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
617
618
  const inputProps = computed(() => {
618
- return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused"]);
619
+ return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", ...BORDER_PROP_KEYS]);
619
620
  });
620
621
  const fieldProps = computed(() => {
621
622
  return origamFieldRef.value?.filterProps(props, ["class", "id", "active", "dirty", "disabled", "focused", "error", "style"]);
package/dist/src/components/Select/OrigamSelect.vue CHANGED
@@ -374,6 +374,19 @@ const props = defineProps({
374
374
  prependInnerIcon: { type: null, required: false },
375
375
  clearIcon: { type: null, required: false },
376
376
  clearable: { type: Boolean, required: false },
377
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
378
+ borderTop: { type: [Boolean, Number, String], required: false },
379
+ borderLeft: { type: [Boolean, Number, String], required: false },
380
+ borderBottom: { type: [Boolean, Number, String], required: false },
381
+ borderRight: { type: [Boolean, Number, String], required: false },
382
+ borderBlock: { type: [Boolean, Number, String], required: false },
383
+ borderInline: { type: [Boolean, Number, String], required: false },
384
+ borderColor: { type: String, required: false },
385
+ borderStyle: { type: String, required: false },
386
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
387
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
388
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
389
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
377
390
  focused: { type: Boolean, required: false },
378
391
  text: { type: String, required: false },
379
392
  floating: { type: Boolean, required: false },
@@ -392,19 +405,6 @@ const props = defineProps({
392
405
  paddingRight: { type: [Boolean, Number, String], required: false },
393
406
  paddingBlock: { type: [Boolean, Number, String], required: false },
394
407
  paddingInline: { type: [Boolean, Number, String], required: false },
395
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
396
- borderTop: { type: [Boolean, Number, String], required: false },
397
- borderLeft: { type: [Boolean, Number, String], required: false },
398
- borderBottom: { type: [Boolean, Number, String], required: false },
399
- borderRight: { type: [Boolean, Number, String], required: false },
400
- borderBlock: { type: [Boolean, Number, String], required: false },
401
- borderInline: { type: [Boolean, Number, String], required: false },
402
- borderColor: { type: String, required: false },
403
- borderStyle: { type: String, required: false },
404
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
405
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
406
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
407
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
408
408
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
409
409
  roundedTopRight: { type: [Boolean, Number, String], required: false },
410
410
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
package/dist/src/components/Switch/OrigamSwitchTrack.vue CHANGED
@@ -149,8 +149,28 @@ defineExpose({
149
149
  // Without `:where()`, this scoped rule's [data-v-hash] pushes it
150
150
  // to (0,2,0), beating the utility's (0,1,0), and the `rounded`
151
151
  // prop's scale form goes silently inert.
152
+ //
153
+ // #727 — the border longhands ride in the SAME zero-specificity
154
+ // block, for the same reason AND for one more. Before this, the
155
+ // track declared NO border at all outside `forced-colors`: the two
156
+ // tokens `--origam-switch__track---border-{width,color}` existed in
157
+ // `light.css` / `dark.css` but were read by nobody (both sat in
158
+ // `baseline/token-var-channels-dormant.json`). Giving them a
159
+ // visible value alone changed nothing — the declaration reading
160
+ // them had to be added here.
161
+ //
162
+ // Zero specificity is what keeps the default OVERRIDABLE, which is
163
+ // the explicit half of the request: `useBorder` emits `border`
164
+ // through the INLINE style channel (`border-width` / `border-style`
165
+ // / `border-color`), which outranks any selector, and the
166
+ // `.origam--border-{none,thin,thick}` utility at (0,1,0) also wins
167
+ // over `:where()` at (0,0,0). A consumer passing `border="none"`
168
+ // therefore still gets no border.
152
169
  :where(&) {
153
170
  border-radius: var(--origam-switch__track---border-radius, 9999px);
171
+ border-width: var(--origam-switch__track---border-width, 1px);
172
+ border-style: var(--origam-switch__track---border-style, solid);
173
+ border-color: var(--origam-switch__track---border-color, currentColor);
154
174
  }
155
175
 
156
176
  height: var(--origam-switch__track---height, 14px);
package/dist/src/components/TextField/OrigamTextField.vue CHANGED
@@ -197,6 +197,7 @@ import { useMask } from "../../composables/Commons/mask.composable";
197
197
  import { useProps } from "../../composables/Commons/props.composable";
198
198
  import { useStyle } from "../../composables/Commons/style.composable";
199
199
  import { useVModel } from "../../composables/Commons/vModel.composable";
200
+ import { BORDER_PROP_KEYS } from "../../consts/Commons/border.const";
200
201
  import { ACTIVE_TEXT_FIELD_TYPE, INPUT_TEXT_FIELD_TYPE } from "../../consts/TextField/text-field.const";
201
202
  import vIntersect from "../../directives/Intersect/intersect.directive";
202
203
  import { DENSITY } from "../../enums/Commons/density.enum";
@@ -244,6 +245,19 @@ const props = defineProps({
244
245
  prependInnerIcon: { type: null, required: false },
245
246
  clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
246
247
  clearable: { type: Boolean, required: false },
248
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
249
+ borderTop: { type: [Boolean, Number, String], required: false },
250
+ borderLeft: { type: [Boolean, Number, String], required: false },
251
+ borderBottom: { type: [Boolean, Number, String], required: false },
252
+ borderRight: { type: [Boolean, Number, String], required: false },
253
+ borderBlock: { type: [Boolean, Number, String], required: false },
254
+ borderInline: { type: [Boolean, Number, String], required: false },
255
+ borderColor: { type: String, required: false },
256
+ borderStyle: { type: String, required: false },
257
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
258
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
259
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
260
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
247
261
  focused: { type: Boolean, required: false },
248
262
  text: { type: String, required: false },
249
263
  floating: { type: Boolean, required: false },
@@ -262,19 +276,6 @@ const props = defineProps({
262
276
  paddingRight: { type: [Boolean, Number, String], required: false },
263
277
  paddingBlock: { type: [Boolean, Number, String], required: false },
264
278
  paddingInline: { type: [Boolean, Number, String], required: false },
265
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
266
- borderTop: { type: [Boolean, Number, String], required: false },
267
- borderLeft: { type: [Boolean, Number, String], required: false },
268
- borderBottom: { type: [Boolean, Number, String], required: false },
269
- borderRight: { type: [Boolean, Number, String], required: false },
270
- borderBlock: { type: [Boolean, Number, String], required: false },
271
- borderInline: { type: [Boolean, Number, String], required: false },
272
- borderColor: { type: String, required: false },
273
- borderStyle: { type: String, required: false },
274
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
275
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
276
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
277
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
278
279
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
279
280
  roundedTopRight: { type: [Boolean, Number, String], required: false },
280
281
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -482,7 +483,7 @@ const enrichedRules = computed(() => {
482
483
  });
483
484
  const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
484
485
  const inputProps = computed(() => {
485
- return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused"]);
486
+ return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", ...BORDER_PROP_KEYS]);
486
487
  });
487
488
  const fieldProps = computed(() => {
488
489
  return origamFieldRef.value?.filterProps(props, ["class", "id", "active", "dirty", "disabled", "focused", "error", "style"]);
package/dist/src/components/TextareaField/OrigamTextareaField.vue CHANGED
@@ -277,6 +277,7 @@ import { useTextareaRich } from "../../composables/TextareaField/textarea-field-
277
277
  import { useTheme } from "../../composables/Commons/theme.composable";
278
278
  import { useTypography } from "../../composables/Commons/typography.composable";
279
279
  import { useVModel } from "../../composables/Commons/vModel.composable";
280
+ import { BORDER_PROP_KEYS } from "../../consts/Commons/border.const";
280
281
  import { DEFAULT_TOOLBAR } from "../../consts/TextareaField/textarea-field.const";
281
282
  import vIntersect from "../../directives/Intersect/intersect.directive";
282
283
  import { AXIS } from "../../enums/Commons/drag.enum";
@@ -331,6 +332,19 @@ const props = defineProps({
331
332
  prependInnerIcon: { type: null, required: false },
332
333
  clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
333
334
  clearable: { type: Boolean, required: false },
335
+ border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
336
+ borderTop: { type: [Boolean, Number, String], required: false },
337
+ borderLeft: { type: [Boolean, Number, String], required: false },
338
+ borderBottom: { type: [Boolean, Number, String], required: false },
339
+ borderRight: { type: [Boolean, Number, String], required: false },
340
+ borderBlock: { type: [Boolean, Number, String], required: false },
341
+ borderInline: { type: [Boolean, Number, String], required: false },
342
+ borderColor: { type: String, required: false },
343
+ borderStyle: { type: String, required: false },
344
+ borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
345
+ borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
346
+ borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
347
+ borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
334
348
  focused: { type: Boolean, required: false },
335
349
  text: { type: String, required: false },
336
350
  floating: { type: Boolean, required: false },
@@ -349,19 +363,6 @@ const props = defineProps({
349
363
  paddingRight: { type: [Boolean, Number, String], required: false },
350
364
  paddingBlock: { type: [Boolean, Number, String], required: false },
351
365
  paddingInline: { type: [Boolean, Number, String], required: false },
352
- border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
353
- borderTop: { type: [Boolean, Number, String], required: false },
354
- borderLeft: { type: [Boolean, Number, String], required: false },
355
- borderBottom: { type: [Boolean, Number, String], required: false },
356
- borderRight: { type: [Boolean, Number, String], required: false },
357
- borderBlock: { type: [Boolean, Number, String], required: false },
358
- borderInline: { type: [Boolean, Number, String], required: false },
359
- borderColor: { type: String, required: false },
360
- borderStyle: { type: String, required: false },
361
- borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
362
- borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
363
- borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
364
- borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
365
366
  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
366
367
  roundedTopRight: { type: [Boolean, Number, String], required: false },
367
368
  roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -636,7 +637,7 @@ const enrichedRules = computed(() => {
636
637
  });
637
638
  const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
638
639
  const inputProps = computed(() => {
639
- return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", "centerAffix"]);
640
+ return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", "centerAffix", ...BORDER_PROP_KEYS]);
640
641
  });
641
642
  const fieldProps = computed(() => {
642
643
  return origamFieldRef.value?.filterProps(props, ["class", "id", "style", "active", "dirty", "disabled", "focused", "error", "centerAffix"]);
package/dist/src/components/VirtualScroll/OrigamVirtualScroll.vue CHANGED
@@ -90,7 +90,7 @@ import { convertToUnit } from "../../utils/Commons/commons.util";
90
90
  import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util";
91
91
  import { getScrollParent } from "../../utils/Commons/scroll.util";
92
92
  const props = defineProps({
93
- items: { type: Array, required: false },
93
+ items: { type: Array, required: false, default: () => [] },
94
94
  renderless: { type: Boolean, required: false },
95
95
  id: { type: String, required: false },
96
96
  class: { type: [String, Array, Object], required: false },