@omnigrid/style 0.1.3 → 0.1.5

package/dist/index.css

@@ -101,34 +101,89 @@
 
 .omnigrid-slot {
     display: flex;
+    box-sizing: border-box;
 }
 
 .omnigrid-slot-top,
 .omnigrid-slot-bottom {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
     width: 100%;
     padding: 4px 8px;
     background: var(--omnigrid-slot-background);
 }
 
+.omnigrid-slot-top .omnigrid-slot-pos-start,
+.omnigrid-slot-bottom .omnigrid-slot-pos-start {
+    flex: 1 1 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.omnigrid-slot-top .omnigrid-slot-pos-center,
+.omnigrid-slot-bottom .omnigrid-slot-pos-center {
+    flex: 1 1 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.omnigrid-slot-top .omnigrid-slot-pos-end,
+.omnigrid-slot-bottom .omnigrid-slot-pos-end {
+    flex: 1 1 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
 .omnigrid-slot-left,
 .omnigrid-slot-right {
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
     flex-shrink: 0;
-    padding: 0 8px;
+    padding: 8px 4px;
     background: var(--omnigrid-slot-background);
     align-self: stretch;
 }
 
-.omnigrid-slot-item-group {
+.omnigrid-slot-left .omnigrid-slot-pos-start,
+.omnigrid-slot-right .omnigrid-slot-pos-start {
+    flex: 1 1 0;
     display: flex;
-    gap: 8px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
 }
 
-.omnigrid-slot-pos-center {
+.omnigrid-slot-left .omnigrid-slot-pos-center,
+.omnigrid-slot-right .omnigrid-slot-pos-center {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
 }
 
-.omnigrid-slot-pos-end {
+.omnigrid-slot-left .omnigrid-slot-pos-end,
+.omnigrid-slot-right .omnigrid-slot-pos-end {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
     justify-content: flex-end;
+    align-items: center;
+}
+
+.omnigrid-slot-item-group {
+    display: flex;
+    gap: 8px;
+}
+
+.omnigrid-slot-left .omnigrid-slot-item-group,
+.omnigrid-slot-right .omnigrid-slot-item-group {
+    flex-direction: column;
 }
 
 .omnigrid-slot-item {
@@ -136,25 +191,93 @@
     align-items: center;
 }
 
-/* Headless pager (PaginationPlugin). */
-.omnigrid-pagination {
+/* Reusable controls for slot-based plugin widgets. */
+.omnigrid-control-bar {
     align-items: center;
     display: flex;
-    gap: 8px;
+    gap: 24px;
+}
+
+.omnigrid-control-group {
+    align-items: center;
+    display: inline-flex;
+    gap: 4px;
+}
+
+.omnigrid-popup-control {
+    position: relative;
+}
+
+.omnigrid-control-button,
+.omnigrid-popup-option {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
 }
 
-.omnigrid-pagination-btn {
-    background: var(--omnigrid-button-background);
-    border: 1px solid var(--omnigrid-button-border);
+.omnigrid-control-button {
+    white-space: nowrap;
+}
+
+.omnigrid-popup-menu {
+    background: var(--omnigrid-grid-background, #fff);
+    border: 1px solid var(--omnigrid-grid-border, #ccc);
     border-radius: 4px;
-    color: var(--omnigrid-button-color);
+    bottom: calc(100% + 6px);
+    display: flex;
+    flex-direction: column;
+    left: 0;
+    min-width: 100%;
+    padding: 4px;
+    position: absolute;
+    z-index: 10;
+}
+
+.omnigrid-popup-option {
+    padding: 4px 8px;
+    text-align: left;
+}
+
+.omnigrid-popup-option:hover,
+.omnigrid-popup-option[aria-selected="true"] {
+    background: var(--omnigrid-cell-hover-background, #eee);
+}
+
+.omnigrid-number-input {
+    background: var(--omnigrid-grid-background, #fff);
+    border: 1px solid var(--omnigrid-grid-border, #ccc);
+    border-radius: 3px;
+    color: var(--omnigrid-cell-color, currentColor);
+    font: inherit;
+    padding: 2px 4px;
+}
+
+.omnigrid-icon {
+    display: block;
+    flex: 0 0 auto;
+}
+
+.omnigrid-icon-button {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: 3px;
+    color: inherit;
     cursor: pointer;
-    font-size: 12px;
-    line-height: 1.4;
-    padding: 3px 10px;
+    display: inline-flex;
+    justify-content: center;
+    line-height: 1;
+    padding: 4px;
+}
+
+.omnigrid-icon-button:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 1px;
 }
 
-.omnigrid-pagination-btn:disabled {
+.omnigrid-icon-button:disabled {
     cursor: default;
     opacity: 0.5;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnigrid/style",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Shared styles for OmniGrid",
   "keywords": [
     "omnigrid",