@geoffcox/sterling-svelte-themes 1.0.2 → 1.0.4

package/css/sterling/Button.base.css

@@ -1,6 +1,7 @@
 .sterling-button {
   align-content: center;
   align-items: center;
+  appearance: none;
   background-color: var(--stsv-button__background-color);
   border-color: var(--stsv-button__border-color);
   border-radius: 8px;

package/css/sterling/Checkbox.base.css

@@ -27,6 +27,7 @@ The container
 The input is hidden since the built-in browser checkbox cannot be customized
 */
 .sterling-checkbox input {
+  appearance: none;
   font: inherit;
   margin: 0;
   padding: 0;

package/css/sterling/Dialog.base.css

@@ -1,4 +1,5 @@
 .sterling-dialog {
+  appearance: none;
   padding: 0;
   border: none;
   background: none;

package/css/sterling/Dropdown.base.css

@@ -40,7 +40,8 @@
   overflow: hidden;
 }
 
-.sterling-dropdown .button {
+.sterling-dropdown .button,
+.sterling-dropdown .icon {
   align-self: center;
   cursor: pointer;
 }
@@ -82,7 +83,8 @@
   transform-origin: 50% 50%;
 }
 
-.sterling-dropdown-popup-content {
+.sterling-dropdown-popup-content,
+.sterling-dropdown-content {
   background-color: var(--stsv-common__background-color);
   border-color: var(--stsv-common__border-color);
   border-radius: 0;

package/css/sterling/Input.base.css

@@ -7,6 +7,7 @@
 }
 
 .sterling-input input {
+  appearance: none;
   background-color: var(--stsv-input__background-color);
   border-color: transparent;
   border-bottom-color: var(--stsv-input__border-color);

package/css/sterling/Label.base.css

@@ -1,4 +1,5 @@
 .sterling-label {
+  appearance: none;
   background-color: transparent;
   border: none;
   box-sizing: border-box;

package/css/sterling/Link.base.css

@@ -1,4 +1,5 @@
 .sterling-link {
+  appearance: none;
   background-color: transparent;
   border-top: none;
   border-left: none;

package/css/sterling/MenuItem.base.css

@@ -1,4 +1,5 @@
 .sterling-menu-item {
+  appearance: none;
   background-color: transparent;
   border-color: transparent;
   border-radius: 8px;

package/css/sterling/MenuItem.css

@@ -1 +1,3 @@
 @import url('./MenuItem.base.css');
+@import url('./MenuItem.defaultItem.css');
+@import url('./MenuItem.defaultItem.disabled.css');

package/css/sterling/Pagination.base.css

@@ -0,0 +1,18 @@
+.sterling-pagination {
+  box-sizing: border-box;
+  column-gap: 3px;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  justify-self: center;
+  place-content: center;
+  place-items: stretch;
+  width: min-content;
+  overscroll-behavior: contain;
+}
+
+.sterling-pagination .page-number {
+  display: grid;
+  place-items: stretch;
+  place-content: stretch;
+  min-width: calc(var(--page-number-width, 1ch) + 1em);
+}

package/css/sterling/Pagination.button.css

@@ -0,0 +1,60 @@
+.sterling-pagination button {
+  align-content: center;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-button__color);
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  font: inherit;
+  justify-content: center;
+  justify-items: center;
+  column-gap: 0.25em;
+  overflow: hidden;
+  outline: none;
+  padding: 0.5em 1em;
+  padding: 0;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.sterling-pagination button:not(:disabled):hover {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: transparent;
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-pagination button:not(:disabled):active {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: transparent;
+  color: var(--stsv-button__color--active);
+}
+
+.sterling-pagination button:not(:disabled):focus-visible {
+  border-color: var(--stsv-button__border-color--focus);
+}
+
+.sterling-pagination button:disabled {
+  cursor: not-allowed;
+  position: relative;
+  pointer-events: none;
+  color: var(--stsv-common__color--faint);
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-pagination button {
+    transition: none;
+  }
+}

package/css/sterling/Pagination.css

@@ -0,0 +1,3 @@
+@import url('./Pagination.base.css');
+@import url('./Pagination.button.css');
+@import url('./Pagination.input.css');

package/css/sterling/Pagination.input.css

@@ -0,0 +1,50 @@
+.sterling-pagination input {
+  appearance: none;
+  background-color: var(--stsv-input__background-color);
+  border-color: transparent;
+  border-bottom-color: var(--stsv-input__border-color);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-input__color);
+  display: block;
+  font: inherit;
+  height: 100%;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  text-align: center;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  width: 100%;
+  min-width: calc(var(--page-number-width, 1ch) + 1em);
+}
+
+.sterling-pagination input:not(:disabled) {
+  background-color: var(--stsv-input__background-color--hover);
+  border-bottom-color: var(--stsv-input__border-color--hover);
+  color: var(--stsv-input__color--hover);
+}
+
+.sterling-pagination input:focus,
+.sterling-pagination input:focus {
+  background-color: var(--stsv-input__background-color--focus);
+  border-bottom-color: var(--stsv-input__border-color--focus);
+  color: var(--stsv-input__color--focus);
+}
+
+.sterling-pagination input:focus-visible {
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+  outline: none;
+}
+@media (prefers-reduced-motion) {
+  .sterling-pagination input {
+    transition: none;
+  }
+}

package/css/sterling/Radio.base.css

@@ -27,6 +27,7 @@
 		The input is hidden since the built-in browser radio cannot be customized
 	*/
 .sterling-radio input {
+  appearance: none;
   font: inherit;
   margin: 0;
   padding: 0;

package/css/sterling/Select.base.css

@@ -78,7 +78,8 @@
   transform-origin: 50% 50%;
 }
 
-.sterling-select-popup-content {
+.sterling-select-popup-content,
+.sterling-select-content {
   background-color: var(--stsv-common__background-color);
   border-color: var(--stsv-common__border-color);
   border-radius: 0;

package/css/sterling/Switch.base.css

@@ -39,6 +39,7 @@
 /* ----- input hidden ----- */
 
 .sterling-switch input {
+  appearance: none;
   font: inherit;
   margin: 0;
   padding: 0;

package/css/sterling/Tab.base.css

@@ -1,6 +1,7 @@
 .sterling-tab {
   align-content: center;
   align-items: center;
+  appearance: none;
   background-color: var(--stsv-common__background-color);
   border-color: transparent;
   border-radius: 8px;

package/css/sterling/TextArea.base.css

@@ -5,6 +5,7 @@
 }
 
 .sterling-text-area textarea {
+  appearance: none;
   background-color: var(--stsv-input__background-color);
   border-color: var(--stsv-input__border-color);
   border-radius: 3px;

package/css/sterling.css

@@ -15,8 +15,8 @@
 @import url("./sterling/MenuBar.css");
 @import url("./sterling/MenuButton.css");
 @import url("./sterling/MenuItem.css");
-@import url("./sterling/MenuItemDisplay.css");
 @import url("./sterling/MenuSeparator.css");
+@import url("./sterling/Pagination.css");
 @import url("./sterling/Popover.css");
 @import url("./sterling/Progress.css");
 @import url("./sterling/Radio.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte-themes",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "author": "Geoff Cox",
   "description": "A modern theme for the sterling-svelte component library.",
   "license": "MIT",

package/css/sterling/MenuItemDisplay.css

@@ -1,2 +0,0 @@
-@import url('./MenuItemDisplay.base.css');
-@import url('./MenuItemDisplay.disabled.css');