@oscarpalmer/oui 0.35.0 → 0.37.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 (128) hide show
  1. package/dist/css/badge.css +18 -15
  2. package/dist/css/button.css +35 -31
  3. package/dist/css/color.css +20 -20
  4. package/dist/css/combobox.css +134 -35
  5. package/dist/css/content.css +29 -10
  6. package/dist/css/floatable.css +10 -10
  7. package/dist/css/form.css +393 -129
  8. package/dist/css/listbox.css +176 -0
  9. package/dist/css/message.css +13 -10
  10. package/dist/css/reset.css +29 -88
  11. package/dist/css/splitter.css +2 -2
  12. package/dist/css/tabs.css +103 -0
  13. package/dist/js/combobox/constants.combobox.d.mts +2 -2
  14. package/dist/js/combobox/constants.combobox.mjs +40 -33
  15. package/dist/js/combobox/dom.combobox.d.mts +8 -91
  16. package/dist/js/combobox/dom.combobox.mjs +204 -2
  17. package/dist/js/combobox/event.combobox.d.mts +14 -8
  18. package/dist/js/combobox/event.combobox.mjs +2 -2
  19. package/dist/js/combobox/index.d.mts +1 -1
  20. package/dist/js/combobox/index.mjs +20 -18
  21. package/dist/js/combobox/misc.combobox.d.mts +2 -2
  22. package/dist/js/combobox/misc.combobox.mjs +2 -2
  23. package/dist/js/combobox/models.combobox.d.mts +44 -2
  24. package/dist/js/combobox/state.combobox.d.mts +9 -10
  25. package/dist/js/combobox/state.combobox.mjs +2 -2
  26. package/dist/js/constants.combobox-DmRAMC64.d.mts +26 -0
  27. package/dist/js/constants.listbox-DRsXUxd3.d.mts +14 -0
  28. package/dist/js/focus-trap/focus-trap.embedded.mjs +6 -10
  29. package/dist/js/index-EfkUSals.d.mts +139 -0
  30. package/dist/js/index.d.mts +5 -2
  31. package/dist/js/index.mjs +5 -2
  32. package/dist/js/internal/attributable.mjs +4 -3
  33. package/dist/js/internal/draggable.mjs +16 -22
  34. package/dist/js/internal/listbox/listbox.constants.d.mts +11 -0
  35. package/dist/js/internal/listbox/listbox.constants.mjs +23 -0
  36. package/dist/js/internal/listbox/listbox.data.d.mts +20 -0
  37. package/dist/js/internal/listbox/listbox.data.mjs +2 -0
  38. package/dist/js/internal/listbox/listbox.dom.d.mts +66 -0
  39. package/dist/js/internal/listbox/listbox.dom.mjs +2 -0
  40. package/dist/js/internal/listbox/listbox.event.d.mts +5 -0
  41. package/dist/js/internal/listbox/listbox.event.mjs +63 -0
  42. package/dist/js/internal/listbox/listbox.form.d.mts +6 -0
  43. package/dist/js/internal/listbox/listbox.form.mjs +52 -0
  44. package/dist/js/internal/listbox/listbox.misc.d.mts +12 -0
  45. package/dist/js/internal/listbox/listbox.misc.mjs +2 -0
  46. package/dist/js/internal/listbox/listbox.model.d.mts +2 -0
  47. package/dist/js/internal/listbox/listbox.model.mjs +1 -0
  48. package/dist/js/internal/listbox/listbox.state.d.mts +7 -0
  49. package/dist/js/internal/listbox/listbox.state.mjs +40 -0
  50. package/dist/js/internal/misc.d.mts +6 -0
  51. package/dist/js/internal/misc.mjs +13 -0
  52. package/dist/js/internal/navigable.d.mts +11 -5
  53. package/dist/js/internal/navigable.mjs +44 -18
  54. package/dist/js/l10n-Bn-7RcwR.d.mts +20 -0
  55. package/dist/js/l10n.d.mts +2 -20
  56. package/dist/js/listbox/constants.listbox.d.mts +2 -0
  57. package/dist/js/listbox/constants.listbox.mjs +40 -0
  58. package/dist/js/listbox/event.listbox.d.mts +8 -0
  59. package/dist/js/listbox/event.listbox.mjs +2 -0
  60. package/dist/js/listbox/index.d.mts +116 -0
  61. package/dist/js/listbox/index.mjs +189 -0
  62. package/dist/js/listbox/misc.listbox.d.mts +2 -0
  63. package/dist/js/listbox/misc.listbox.mjs +2 -0
  64. package/dist/js/listbox/state.listbox.d.mts +11 -0
  65. package/dist/js/listbox/state.listbox.mjs +2 -0
  66. package/dist/js/listbox.data-BWd0PCy7.mjs +424 -0
  67. package/dist/js/listbox.model-CRReGOmu.d.mts +125 -0
  68. package/dist/js/misc.listbox-BI-XsTOf.mjs +197 -0
  69. package/dist/js/misc.listbox-gnoJhrTr.d.mts +20 -0
  70. package/dist/js/movable/movable.embedded.mjs +3 -6
  71. package/dist/js/resizable/resizable.embedded.mjs +16 -26
  72. package/dist/js/sortable/sortable.embedded.mjs +4 -2
  73. package/dist/js/splitter.mjs +15 -12
  74. package/dist/js/state.combobox-4xq0FPCF.mjs +365 -0
  75. package/dist/js/tabs.d.mts +25 -0
  76. package/dist/js/tabs.mjs +240 -0
  77. package/dist/js/tooltip.mjs +13 -12
  78. package/package.json +7 -3
  79. package/src/css/badge.scss +6 -18
  80. package/src/css/button.scss +6 -45
  81. package/src/css/color.scss +20 -20
  82. package/src/css/combobox.scss +21 -52
  83. package/src/css/content.scss +30 -3
  84. package/src/css/floatable.scss +17 -17
  85. package/src/css/form.scss +84 -72
  86. package/src/css/listbox.scss +120 -0
  87. package/src/css/message.scss +13 -28
  88. package/src/css/mixins.scss +253 -28
  89. package/src/css/reset.scss +37 -86
  90. package/src/css/splitter.scss +2 -2
  91. package/src/css/tabs.scss +85 -0
  92. package/src/js/combobox/constants.combobox.ts +46 -25
  93. package/src/js/combobox/dom.combobox.ts +36 -454
  94. package/src/js/combobox/event.combobox.ts +129 -218
  95. package/src/js/combobox/index.ts +37 -30
  96. package/src/js/combobox/misc.combobox.ts +30 -114
  97. package/src/js/combobox/models.combobox.ts +7 -47
  98. package/src/js/combobox/state.combobox.ts +126 -127
  99. package/src/js/focus-trap/focus-trap.embedded.ts +11 -19
  100. package/src/js/index.ts +2 -0
  101. package/src/js/internal/draggable.ts +29 -33
  102. package/src/js/internal/listbox/listbox.constants.ts +25 -0
  103. package/src/js/{combobox/data.combobox.ts → internal/listbox/listbox.data.ts} +94 -43
  104. package/src/js/internal/listbox/listbox.dom.ts +445 -0
  105. package/src/js/internal/listbox/listbox.event.ts +129 -0
  106. package/src/js/{combobox/form.combobox.ts → internal/listbox/listbox.form.ts} +13 -14
  107. package/src/js/internal/listbox/listbox.misc.ts +135 -0
  108. package/src/js/internal/listbox/listbox.model.ts +169 -0
  109. package/src/js/internal/listbox/listbox.state.ts +82 -0
  110. package/src/js/internal/misc.ts +27 -0
  111. package/src/js/internal/navigable.ts +80 -23
  112. package/src/js/l10n.ts +8 -8
  113. package/src/js/listbox/constants.listbox.ts +61 -0
  114. package/src/js/listbox/event.listbox.ts +106 -0
  115. package/src/js/listbox/index.ts +302 -0
  116. package/src/js/listbox/misc.listbox.ts +70 -0
  117. package/src/js/listbox/state.listbox.ts +196 -0
  118. package/src/js/movable/movable.embedded.ts +11 -13
  119. package/src/js/resizable/resizable.embedded.ts +25 -39
  120. package/src/js/splitter.ts +21 -18
  121. package/src/js/tabs.ts +447 -0
  122. package/src/js/tooltip.ts +20 -17
  123. package/dist/js/combobox/data.combobox.d.mts +0 -18
  124. package/dist/js/combobox/data.combobox.mjs +0 -2
  125. package/dist/js/combobox/form.combobox.d.mts +0 -6
  126. package/dist/js/combobox/form.combobox.mjs +0 -2
  127. package/dist/js/constants.combobox-h_kyDegw.d.mts +0 -248
  128. package/dist/js/data.combobox-B8HMkDOh.mjs +0 -1030
package/dist/css/content.css CHANGED
@@ -31,7 +31,7 @@
31
31
  mask-position: center;
32
32
  -webkit-mask-repeat: no-repeat;
33
33
  mask-repeat: no-repeat;
34
- transition: 0.125s ease-in-out;
34
+ transition: transform 0.125s ease-in-out;
35
35
  transform: rotate(-90deg);
36
36
  }
37
37
  :where(.oui-details > summary):focus-visible {
@@ -75,7 +75,7 @@
75
75
  border-radius: 0.375em;
76
76
  }
77
77
  :where(.oui-meter)::-moz-meter-bar {
78
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
78
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
79
79
  -webkit-appearance: none;
80
80
  -moz-appearance: none;
81
81
  appearance: none;
@@ -85,7 +85,7 @@
85
85
  border-radius: 0.25em;
86
86
  }
87
87
  :where(.oui-meter):-moz-meter-optimum::-moz-meter-bar {
88
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
88
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
89
89
  -webkit-appearance: none;
90
90
  -moz-appearance: none;
91
91
  appearance: none;
@@ -95,7 +95,7 @@
95
95
  border-radius: 0.25em;
96
96
  }
97
97
  :where(.oui-meter):-moz-meter-sub-optimum::-moz-meter-bar {
98
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
98
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
99
99
  -webkit-appearance: none;
100
100
  -moz-appearance: none;
101
101
  appearance: none;
@@ -105,7 +105,7 @@
105
105
  border-radius: 0.25em;
106
106
  }
107
107
  :where(.oui-meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
108
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
108
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
109
109
  -webkit-appearance: none;
110
110
  -moz-appearance: none;
111
111
  appearance: none;
@@ -120,7 +120,7 @@
120
120
  background: none;
121
121
  }
122
122
  :where(.oui-meter)::-webkit-meter-even-less-good-value {
123
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
123
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
124
124
  -webkit-appearance: none;
125
125
  -moz-appearance: none;
126
126
  appearance: none;
@@ -130,7 +130,7 @@
130
130
  border-radius: 0.25em;
131
131
  }
132
132
  :where(.oui-meter)::-webkit-meter-optimum-value {
133
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
133
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
134
134
  -webkit-appearance: none;
135
135
  -moz-appearance: none;
136
136
  appearance: none;
@@ -140,7 +140,7 @@
140
140
  border-radius: 0.25em;
141
141
  }
142
142
  :where(.oui-meter)::-webkit-meter-suboptimum-value {
143
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
143
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
144
144
  -webkit-appearance: none;
145
145
  -moz-appearance: none;
146
146
  appearance: none;
@@ -163,7 +163,7 @@
163
163
  border-radius: 0.375em;
164
164
  }
165
165
  :where(.oui-progress)::-moz-progress-bar {
166
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
166
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
167
167
  -webkit-appearance: none;
168
168
  -moz-appearance: none;
169
169
  appearance: none;
@@ -178,7 +178,7 @@
178
178
  background: none;
179
179
  }
180
180
  :where(.oui-progress)::-webkit-progress-value {
181
- box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
181
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
182
182
  -webkit-appearance: none;
183
183
  -moz-appearance: none;
184
184
  appearance: none;
@@ -188,4 +188,23 @@
188
188
  border-radius: 0.25em;
189
189
  }
190
190
 
191
+ :where(.oui-shadow), :where(.oui-shadow-0) {
192
+ box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05);
193
+ }
194
+ :where(.oui-shadow-1) {
195
+ box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
196
+ }
197
+ :where(.oui-shadow-2) {
198
+ box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05);
199
+ }
200
+ :where(.oui-shadow-3) {
201
+ box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05);
202
+ }
203
+ :where(.oui-shadow-4) {
204
+ box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05);
205
+ }
206
+ :where(.oui-shadow-5) {
207
+ box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
208
+ }
209
+
191
210
 
package/dist/css/floatable.css CHANGED
@@ -47,16 +47,16 @@
47
47
  inset-block: var(--margin-top) var(--margin-bottom);
48
48
  inset-inline: var(--margin-left) var(--margin-right);
49
49
  }
50
- :where([oui-popover], [oui-tooltip-content])[oui-position$=bottom] {
50
+ :where([oui-popover], [oui-tooltip-content])[oui-position$=bottom i] {
51
51
  --margin-bottom: 0;
52
52
  }
53
- :where([oui-popover], [oui-tooltip-content])[oui-position$=end] {
53
+ :where([oui-popover], [oui-tooltip-content])[oui-position$=end i] {
54
54
  --margin-right: 0;
55
55
  }
56
- :where([oui-popover], [oui-tooltip-content])[oui-position$=start] {
56
+ :where([oui-popover], [oui-tooltip-content])[oui-position$=start i] {
57
57
  --margin-left: 0;
58
58
  }
59
- :where([oui-popover], [oui-tooltip-content])[oui-position$=top] {
59
+ :where([oui-popover], [oui-tooltip-content])[oui-position$=top i] {
60
60
  --margin-top: 0;
61
61
  }
62
62
 
@@ -105,24 +105,24 @@ var)) {
105
105
  display: block;
106
106
  position: absolute;
107
107
  }
108
- :where([oui-tooltip-content])[oui-position^=above]::after, :where([oui-tooltip-content])[oui-position^=below]::after, :where([oui-tooltip-content])[oui-position^=bottom]::after, :where([oui-tooltip-content])[oui-position^=top]::after {
108
+ :where([oui-tooltip-content])[oui-position^=above i]::after, :where([oui-tooltip-content])[oui-position^=below i]::after, :where([oui-tooltip-content])[oui-position^=bottom i]::after, :where([oui-tooltip-content])[oui-position^=top i]::after {
109
109
  width: 100%;
110
110
  height: 1em;
111
111
  }
112
- :where([oui-tooltip-content])[oui-position^=above]::after, :where([oui-tooltip-content])[oui-position^=top]::after {
112
+ :where([oui-tooltip-content])[oui-position^=above i]::after, :where([oui-tooltip-content])[oui-position^=top i]::after {
113
113
  inset: calc(100% - 0.5em) 0 0;
114
114
  }
115
- :where([oui-tooltip-content])[oui-position^=below]::after, :where([oui-tooltip-content])[oui-position^=bottom]::after {
115
+ :where([oui-tooltip-content])[oui-position^=below i]::after, :where([oui-tooltip-content])[oui-position^=bottom i]::after {
116
116
  inset: -0.5em 0 0;
117
117
  }
118
- :where([oui-tooltip-content])[oui-position^=end]::after, :where([oui-tooltip-content])[oui-position^=left]::after, :where([oui-tooltip-content])[oui-position^=right]::after, :where([oui-tooltip-content])[oui-position^=start]::after {
118
+ :where([oui-tooltip-content])[oui-position^=end i]::after, :where([oui-tooltip-content])[oui-position^=left i]::after, :where([oui-tooltip-content])[oui-position^=right i]::after, :where([oui-tooltip-content])[oui-position^=start i]::after {
119
119
  width: 1em;
120
120
  height: 100%;
121
121
  }
122
- :where([oui-tooltip-content])[oui-position^=end]::after, :where([oui-tooltip-content])[oui-position^=right]::after {
122
+ :where([oui-tooltip-content])[oui-position^=end i]::after, :where([oui-tooltip-content])[oui-position^=right i]::after {
123
123
  inset: 0 0 0 -0.5em;
124
124
  }
125
- :where([oui-tooltip-content])[oui-position^=left]::after, :where([oui-tooltip-content])[oui-position^=start]::after {
125
+ :where([oui-tooltip-content])[oui-position^=left i]::after, :where([oui-tooltip-content])[oui-position^=start i]::after {
126
126
  inset: 0 0 0 calc(100% - 0.5em);
127
127
  }
128
128