@skygraph/styles 0.6.4 → 0.6.6

package/components/notification.css

@@ -1,128 +1,128 @@
-.sg-notification-container {
-  position: fixed;
-  z-index: var(--sg-z-notification);
-  display: flex;
-  flex-direction: column;
-  gap: var(--sg-margin-sm);
-  pointer-events: none;
-}
-
-/* Placement variants — see dropdown.css note: both camelCase (legacy) and
- * kebab-case (canonical) selectors are kept in sync. */
-.sg-notification-topRight,
-.sg-notification-top-right {
-  top: var(--sg-padding-xl);
-  right: var(--sg-padding-xl);
-}
-
-.sg-notification-topLeft,
-.sg-notification-top-left {
-  top: var(--sg-padding-xl);
-  left: var(--sg-padding-xl);
-}
-
-.sg-notification-bottomRight,
-.sg-notification-bottom-right {
-  bottom: var(--sg-padding-xl);
-  right: var(--sg-padding-xl);
-}
-
-.sg-notification-bottomLeft,
-.sg-notification-bottom-left {
-  bottom: var(--sg-padding-xl);
-  left: var(--sg-padding-xl);
-}
-
-.sg-notification {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sg-padding-sm);
-  min-width: 300px;
-  max-width: 400px;
-  padding: var(--sg-padding-md) var(--sg-padding-lg);
-  background: var(--sg-color-bg-elevated);
-  border-radius: var(--sg-border-radius-lg);
-  box-shadow: var(--sg-shadow-lg);
-  border: 1px solid var(--sg-color-border-secondary);
-  pointer-events: auto;
-  animation: sg-notification-in var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-@keyframes sg-notification-in {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.sg-notification-icon {
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  font-size: var(--sg-font-size-sm);
-  font-weight: 700;
-  line-height: 1;
-}
-
-.sg-notification-success .sg-notification-icon {
-  color: var(--sg-color-success);
-  background: var(--sg-color-success-bg);
-}
-
-.sg-notification-error .sg-notification-icon {
-  color: var(--sg-color-error);
-  background: var(--sg-color-error-bg);
-}
-
-.sg-notification-warning .sg-notification-icon {
-  color: var(--sg-color-warning);
-  background: var(--sg-color-warning-bg);
-}
-
-.sg-notification-info .sg-notification-icon {
-  color: var(--sg-color-primary);
-  background: var(--sg-color-primary-bg);
-}
-
-.sg-notification-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.sg-notification-message {
-  font-size: var(--sg-font-size);
-  font-weight: 500;
-  color: var(--sg-color-text);
-  line-height: var(--sg-line-height);
-}
-
-.sg-notification-description {
-  font-size: var(--sg-font-size-sm);
-  color: var(--sg-color-text-secondary);
-  margin-top: var(--sg-margin-xs);
-  line-height: var(--sg-line-height);
-}
-
-.sg-notification-close {
-  flex-shrink: 0;
-  border: none;
-  background: none;
-  color: var(--sg-color-text-tertiary);
-  cursor: pointer;
-  font-size: var(--sg-font-size-lg);
-  line-height: 1;
-  padding: 0;
-  transition: color var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-notification-close:hover {
-  color: var(--sg-color-text);
-}
+.sg-notification-container {
+  position: fixed;
+  z-index: var(--sg-z-notification);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sg-margin-sm);
+  pointer-events: none;
+}
+
+/* Placement variants — see dropdown.css note: both camelCase (legacy) and
+ * kebab-case (canonical) selectors are kept in sync. */
+.sg-notification-topRight,
+.sg-notification-top-right {
+  top: var(--sg-padding-xl);
+  right: var(--sg-padding-xl);
+}
+
+.sg-notification-topLeft,
+.sg-notification-top-left {
+  top: var(--sg-padding-xl);
+  left: var(--sg-padding-xl);
+}
+
+.sg-notification-bottomRight,
+.sg-notification-bottom-right {
+  bottom: var(--sg-padding-xl);
+  right: var(--sg-padding-xl);
+}
+
+.sg-notification-bottomLeft,
+.sg-notification-bottom-left {
+  bottom: var(--sg-padding-xl);
+  left: var(--sg-padding-xl);
+}
+
+.sg-notification {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sg-padding-sm);
+  min-width: 300px;
+  max-width: 400px;
+  padding: var(--sg-padding-md) var(--sg-padding-lg);
+  background: var(--sg-color-bg-elevated);
+  border-radius: var(--sg-border-radius-lg);
+  box-shadow: var(--sg-shadow-lg);
+  border: 1px solid var(--sg-color-border-secondary);
+  pointer-events: auto;
+  animation: sg-notification-in var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+@keyframes sg-notification-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.sg-notification-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: var(--sg-font-size-sm);
+  font-weight: 700;
+  line-height: 1;
+}
+
+.sg-notification-success .sg-notification-icon {
+  color: var(--sg-color-success);
+  background: var(--sg-color-success-bg);
+}
+
+.sg-notification-error .sg-notification-icon {
+  color: var(--sg-color-error);
+  background: var(--sg-color-error-bg);
+}
+
+.sg-notification-warning .sg-notification-icon {
+  color: var(--sg-color-warning);
+  background: var(--sg-color-warning-bg);
+}
+
+.sg-notification-info .sg-notification-icon {
+  color: var(--sg-color-primary);
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-notification-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.sg-notification-message {
+  font-size: var(--sg-font-size);
+  font-weight: 500;
+  color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
+}
+
+.sg-notification-description {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  margin-top: var(--sg-margin-xs);
+  line-height: var(--sg-line-height);
+}
+
+.sg-notification-close {
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  color: var(--sg-color-text-tertiary);
+  cursor: pointer;
+  font-size: var(--sg-font-size-lg);
+  line-height: 1;
+  padding: 0;
+  transition: color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-notification-close:hover {
+  color: var(--sg-color-text);
+}

package/components/pagination.css

@@ -1,162 +1,162 @@
-/* inline-flex: shrink-wrap to content so wide parents (e.g. doc previews)
-   don't leave a dead zone to the right of the controls. */
-.sg-pagination {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sg-margin-xs);
-  row-gap: var(--sg-padding-sm);
-  font-size: var(--sg-font-size);
-  max-width: 100%;
-}
-
-.sg-pagination-disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.sg-pagination-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /* Lock the cell to a square so 1-, 2- and 3-digit pages render at the
-   * same width — combined with the 7-slot `buildPages` shape this keeps
-   * the strip width identical on every page transition (no layout jump
-   * between page 1 → 8 → 50). */
-  min-width: var(--sg-height-md);
-  width: var(--sg-height-md);
-  height: var(--sg-height-md);
-  padding: 0 var(--sg-padding-xs);
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
-  background: var(--sg-color-bg);
-  color: var(--sg-color-text);
-  cursor: pointer;
-  transition: all var(--sg-transition-duration) var(--sg-transition-timing);
-  font-size: var(--sg-font-size);
-  line-height: 1;
-}
-
-/* Prev/next still inherit the square base but auto-grow for wider arrow
- * glyphs / labels on RTL locales. */
-.sg-pagination-prev,
-.sg-pagination-next {
-  width: auto;
-  min-width: var(--sg-height-md);
-}
-
-.sg-pagination-item:hover:not(:disabled) {
-  color: var(--sg-color-primary);
-  border-color: var(--sg-color-primary);
-}
-
-.sg-pagination-item:disabled {
-  color: var(--sg-color-text-disabled);
-  cursor: not-allowed;
-  border-color: var(--sg-color-border);
-}
-
-.sg-pagination-item-active {
-  color: var(--sg-color-white, #fff);
-  background: var(--sg-color-primary);
-  border-color: var(--sg-color-primary);
-}
-
-.sg-pagination-item-active:hover:not(:disabled) {
-  color: var(--sg-color-white, #fff);
-  background: var(--sg-color-primary-hover);
-  border-color: var(--sg-color-primary-hover);
-}
-
-.sg-pagination-ellipsis {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--sg-height-md);
-  height: var(--sg-height-md);
-  color: var(--sg-color-text-disabled);
-  letter-spacing: 2px;
-}
-
-.sg-pagination-total {
-  color: var(--sg-color-text-secondary);
-  font-size: var(--sg-font-size-sm);
-  white-space: nowrap;
-}
-
-.sg-pagination-size-changer {
-  height: var(--sg-height-md);
-  padding: 0 var(--sg-padding-sm);
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
-  background: var(--sg-color-bg);
-  color: var(--sg-color-text);
-  font-size: var(--sg-font-size-sm);
-  font-family: inherit;
-  cursor: pointer;
-  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-pagination-size-changer:hover:not(:disabled) {
-  border-color: var(--sg-color-primary);
-}
-
-/* Native <select> draws its own focus ring — reset outline and use one
-   soft ring so we don't stack a second halo on top of the browser chrome. */
-.sg-pagination-size-changer:focus,
-.sg-pagination-size-changer:focus-visible {
-  outline: none;
-}
-
-.sg-pagination-size-changer:focus-visible {
-  border-color: var(--sg-color-primary);
-  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
-}
-
-.sg-pagination-quick-jumper {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sg-padding-xs);
-  color: var(--sg-color-text-secondary);
-  font-size: var(--sg-font-size-sm);
-  white-space: nowrap;
-}
-
-.sg-pagination-jumper-input {
-  box-sizing: border-box;
-  width: 52px;
-  min-width: 52px;
-  height: var(--sg-height-md);
-  padding: 0 var(--sg-padding-xs);
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
-  background: var(--sg-color-bg);
-  color: var(--sg-color-text);
-  font-size: var(--sg-font-size-sm);
-  font-family: inherit;
-  text-align: center;
-  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-pagination-jumper-input:hover:not(:disabled) {
-  border-color: var(--sg-color-primary);
-}
-
-.sg-pagination-jumper-input:focus,
-.sg-pagination-jumper-input:focus-visible {
-  outline: none;
-}
-
-.sg-pagination-jumper-input:focus-visible {
-  border-color: var(--sg-color-primary);
-  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
-}
-
-.sg-pagination-simple {
-  gap: var(--sg-padding-sm);
-}
-
-.sg-pagination-simple-pager {
-  color: var(--sg-color-text);
-  font-size: var(--sg-font-size);
-}
+/* inline-flex: shrink-wrap to content so wide parents (e.g. doc previews)
+   don't leave a dead zone to the right of the controls. */
+.sg-pagination {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sg-margin-xs);
+  row-gap: var(--sg-padding-sm);
+  font-size: var(--sg-font-size);
+  max-width: 100%;
+}
+
+.sg-pagination-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.sg-pagination-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Lock the cell to a square so 1-, 2- and 3-digit pages render at the
+   * same width — combined with the 7-slot `buildPages` shape this keeps
+   * the strip width identical on every page transition (no layout jump
+   * between page 1 → 8 → 50). */
+  min-width: var(--sg-height-md);
+  width: var(--sg-height-md);
+  height: var(--sg-height-md);
+  padding: 0 var(--sg-padding-xs);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg);
+  color: var(--sg-color-text);
+  cursor: pointer;
+  transition: all var(--sg-transition-duration) var(--sg-transition-timing);
+  font-size: var(--sg-font-size);
+  line-height: 1;
+}
+
+/* Prev/next still inherit the square base but auto-grow for wider arrow
+ * glyphs / labels on RTL locales. */
+.sg-pagination-prev,
+.sg-pagination-next {
+  width: auto;
+  min-width: var(--sg-height-md);
+}
+
+.sg-pagination-item:hover:not(:disabled) {
+  color: var(--sg-color-primary);
+  border-color: var(--sg-color-primary);
+}
+
+.sg-pagination-item:disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+  border-color: var(--sg-color-border);
+}
+
+.sg-pagination-item-active {
+  color: var(--sg-color-white, #fff);
+  background: var(--sg-color-primary);
+  border-color: var(--sg-color-primary);
+}
+
+.sg-pagination-item-active:hover:not(:disabled) {
+  color: var(--sg-color-white, #fff);
+  background: var(--sg-color-primary-hover);
+  border-color: var(--sg-color-primary-hover);
+}
+
+.sg-pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--sg-height-md);
+  height: var(--sg-height-md);
+  color: var(--sg-color-text-disabled);
+  letter-spacing: 2px;
+}
+
+.sg-pagination-total {
+  color: var(--sg-color-text-secondary);
+  font-size: var(--sg-font-size-sm);
+  white-space: nowrap;
+}
+
+.sg-pagination-size-changer {
+  height: var(--sg-height-md);
+  padding: 0 var(--sg-padding-sm);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size-sm);
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-pagination-size-changer:hover:not(:disabled) {
+  border-color: var(--sg-color-primary);
+}
+
+/* Native <select> draws its own focus ring — reset outline and use one
+   soft ring so we don't stack a second halo on top of the browser chrome. */
+.sg-pagination-size-changer:focus,
+.sg-pagination-size-changer:focus-visible {
+  outline: none;
+}
+
+.sg-pagination-size-changer:focus-visible {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-pagination-quick-jumper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  color: var(--sg-color-text-secondary);
+  font-size: var(--sg-font-size-sm);
+  white-space: nowrap;
+}
+
+.sg-pagination-jumper-input {
+  box-sizing: border-box;
+  width: 52px;
+  min-width: 52px;
+  height: var(--sg-height-md);
+  padding: 0 var(--sg-padding-xs);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size-sm);
+  font-family: inherit;
+  text-align: center;
+  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-pagination-jumper-input:hover:not(:disabled) {
+  border-color: var(--sg-color-primary);
+}
+
+.sg-pagination-jumper-input:focus,
+.sg-pagination-jumper-input:focus-visible {
+  outline: none;
+}
+
+.sg-pagination-jumper-input:focus-visible {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-pagination-simple {
+  gap: var(--sg-padding-sm);
+}
+
+.sg-pagination-simple-pager {
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size);
+}