chore: take latest styleling and run it

.stylelintignore

@@ -2,4 +2,6 @@ node_modules
 task
 *.*
 !*.css
-projects/example-project/dist
+projects/example-project/dist
+tools/styles
+spectrum-*.css

package.json

@@ -182,9 +182,9 @@
         "rimraf": "^5.0.1",
         "rollup": "^3.19.1",
         "sinon": "^15.2.0",
-        "stylelint": "^14.9.1",
-        "stylelint-config-prettier": "^9.0.3",
-        "stylelint-config-standard": "^28.0.0",
+        "stylelint": "^15.10.2",
+        "stylelint-config-prettier": "^9.0.5",
+        "stylelint-config-standard": "^34.0.0",
         "tachometer": "^0.7.0",
         "tar-stream": "^3.0.0",
         "terser": "^4.8.1",

packages/accordion/src/accordion-item.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-accordion-item.css';
+@import url('./spectrum-accordion-item.css');
 
 :host {
     display: block;

packages/accordion/src/accordion.css

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-accordion.css';
+@import url('./spectrum-accordion.css');

packages/action-bar/src/action-bar.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-action-bar.css';
+@import url('./spectrum-action-bar.css');
 
 :host {
     display: block;

packages/action-button/src/action-button.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-action-button.css';
+@import url('./spectrum-action-button.css');
 
 ::slotted([slot='icon']) {
     flex-shrink: 0;

packages/action-group/src/action-group.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-action-group.css';
+@import url('./spectrum-action-group.css');
 
 :host([size='xs']) {
     --spectrum-actiongroup-horizontal-spacing-regular: var(

packages/asset/src/asset.css

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-asset.css';
+@import url('./spectrum-asset.css');

packages/avatar/src/avatar.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-avatar.css';
+@import url('./spectrum-avatar.css');
 
 img {
     vertical-align: top;

packages/badge/src/badge.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-badge.css';
+@import url('./spectrum-badge.css');
 
 /* center align icons and text */
 

packages/banner/src/banner.css

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-banner.css';
+@import url('./spectrum-banner.css');

packages/button-group/src/button-group.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-button-group.css';
+@import url('./spectrum-button-group.css');
 
 :host([vertical]) ::slotted(sp-action-button) {
     --spectrum-actionbutton-label-flex-grow: 1;

packages/button/src/button-base.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-button-base.css';
+@import url('./spectrum-button-base.css');
 
 :host {
     display: inline-flex;

packages/button/src/button.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-button.css';
+@import url('./spectrum-button.css');
 
 @media (forced-colors: active) {
     :host([treatment][disabled]) {

packages/card/src/card.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-card.css';
+@import url('./spectrum-card.css');
 
 :host([href]:not([href=''])) {
     cursor: pointer;

packages/checkbox/src/checkbox.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-checkbox.css';
+@import url('./spectrum-checkbox.css');
 
 :host {
     display: inline-flex;

packages/clear-button/src/clear-button.css

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-clear-button.css';
+@import url('./spectrum-clear-button.css');

packages/close-button/src/close-button.css

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-close-button.css';
+@import url('./spectrum-close-button.css');

packages/coachmark/src/coachmark.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-coachmark.css';
+@import url('./spectrum-coachmark.css');
 
 :host {
     display: inline-block;

packages/color-area/src/color-area.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-color-area.css';
+@import url('./spectrum-color-area.css');
 
 :host {
     touch-action: none;

packages/color-handle/src/color-handle.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-color-handle.css';
+@import url('./spectrum-color-handle.css');
 
 :host {
     touch-action: none;

packages/color-loupe/src/color-loupe.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-color-loupe.css';
+@import url('./spectrum-color-loupe.css');
 
 svg {
     width: inherit;

packages/color-slider/src/color-slider.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-color-slider.css';
+@import url('./spectrum-color-slider.css');
 
 :host {
     --sp-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%,

packages/color-wheel/src/color-wheel.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-color-wheel.css';
+@import url('./spectrum-color-wheel.css');
 
 :host {
     touch-action: none;

packages/dialog/src/dialog.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-dialog.css';
+@import url('./spectrum-dialog.css');
 
 .content {
     overflow: hidden;

packages/divider/src/divider.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-divider.css';
+@import url('./spectrum-divider.css');
 
 :host {
     display: block;

packages/dropzone/src/dropzone.css

@@ -9,7 +9,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-@import './spectrum-dropzone.css';
+@import url('./spectrum-dropzone.css');
 
 /* 
  * Host is inline-block by default which caused all the computed styling to be wrong.

packages/field-group/src/field-group.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-field-group.css';
+@import url('./spectrum-field-group.css');
 
 :host([horizontal][dir='rtl']) slot:not([name])::slotted(*:not(:last-child)),
 :host([dir='rtl']:not([vertical]))

packages/field-label/src/field-label.css

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-field-label.css';
+@import url('./spectrum-field-label.css');

packages/help-text/src/help-text.css

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-help-text.css';
+@import url('./spectrum-help-text.css');

packages/icon/src/icon.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-icon.css';
+@import url('./spectrum-icon.css');
 
 :host {
     height: var(

packages/illustrated-message/src/illustrated-message.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-illustratedmessage.css';
+@import url('./spectrum-illustratedmessage.css');
 
 /* Ensure that SVGs with viewBox attributes size correctly. */
 ::slotted(svg[viewBox]) {

packages/link/src/link.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-link.css';
+@import url('./spectrum-link.css');
 
 :host {
     display: inline;

packages/menu/src/menu-divider.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-menu-divider.css';
+@import url('./spectrum-menu-divider.css');
 
 :host {
     display: block;

packages/menu/src/menu-group.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-menu-sectionHeading.css';
+@import url('./spectrum-menu-sectionHeading.css');
 
 :host {
     margin: 0;

packages/menu/src/menu-item.css

@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-checkmark.css';
-@import './spectrum-chevron.css';
-@import './spectrum-menu-item.css';
-@import './spectrum-itemLabel.css';
+@import url('./spectrum-checkmark.css');
+@import url('./spectrum-chevron.css');
+@import url('./spectrum-menu-item.css');
+@import url('./spectrum-itemLabel.css');
 
 :host([hidden]) {
     display: none;

packages/menu/src/menu.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-menu.css';
+@import url('./spectrum-menu.css');
 
 :host {
     /**

packages/meter/src/meter.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-meter.css';
+@import url('./spectrum-meter.css');
 
 .fill {
     transform-origin: left;

packages/modal/src/modal-wrapper.css

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-modal-wrapper.css';
+@import url('./spectrum-modal-wrapper.css');

packages/modal/src/modal.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-modal.css';
+@import url('./spectrum-modal.css');
 
 :host {
     --spectrum-dialog-confirm-exit-animation-duration: var(--swc-test-duration);

packages/number-field/src/number-field.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-number-field.css';
+@import url('./spectrum-number-field.css');
 
 :host {
     inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));

packages/picker-button/src/picker-button.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-picker-button.css';
+@import url('./spectrum-picker-button.css');
 
 :host {
     display: inline-flex;

packages/picker/src/picker.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-picker.css';
+@import url('./spectrum-picker.css');
 
 :host {
     display: inline-flex;
@@ -72,6 +72,10 @@ sp-popover {
     );
 }
 
+#label.visually-hidden ~ .picker {
+    margin-inline-start: auto;
+}
+
 :host([focused]:not([quiet])) #button .picker {
     /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-icon */
     color: var(
@@ -92,7 +96,3 @@ sp-popover {
     width: 1px;
     white-space: nowrap;
 }
-
-#label.visually-hidden ~ .picker {
-    margin-inline-start: auto;
-}