neo.mjs 6.15.5 → 6.15.6

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.15.5'
+         * @member {String} version='6.15.6'
          */
-        version: '6.15.5'
+        version: '6.15.6'
     }
 
     /**

package/apps/form/view/FormContainerController.mjs

@@ -45,7 +45,7 @@ class FormContainerController extends Component {
      */
     async onSaveButtonClick(data) {
         let form       = this.getReference('main-form'),
-            formValues = await form.getValues();
+            formValues = await form.getSubmitValues();
 
         Neo.main.addon.LocalStorage.updateLocalStorageItem({
             appName: this.component.appName,

package/apps/form/view/ViewportController.mjs

@@ -20,7 +20,7 @@ class ViewportController extends Component {
         let me         = this,
             form       = me.getReference('main-form'),
             formState  = await form.getFormState(),
-            formValues = await form.getValues();
+            formValues = await form.getSubmitValues();
 
         console.log('All pages', {formState, formValues});
 
@@ -34,7 +34,7 @@ class ViewportController extends Component {
         let me          = this,
             activeIndex = me.getModel().data.activeIndex,
             activeCard  = me.getReference('pages-container').items[activeIndex],
-            formValues  = await activeCard.getValues();
+            formValues  = await activeCard.getSubmitValues();
 
         await me.updateRecordValidityState(activeIndex)
 

package/apps/portal/view/home/MainContainer.mjs

@@ -70,8 +70,8 @@ class Viewport extends Container {
                 route : '#/learn/WhyNeo-Speed',
 
                 content: [
-                    'Item 1',
-                    'Item 2',
+                    'Multi-threaded',
+                    'Over 40,000 delta updates per second',
                     'Item 3'
                 ]
             }, {

package/apps/portal/view/learn/ContentView.mjs

@@ -134,7 +134,7 @@ class ContentView extends Component {
             Neo.main.addon.IntersectionObserver.observe({
                 disconnect: true,
                 id        : me.id,
-                observe   : '.neo-h2',
+                observe   : ['.neo-h2', '.neo-h3'],
                 windowId  : me.windowId
             })
         }

package/apps/portal/view/learn/LivePreview.mjs

@@ -207,33 +207,6 @@ class LivePreview extends Container {
         return lastClassName
     }
 
-    /**
-     * @param {String} reference
-     * @param {Object[]} items=this.items
-     * @returns {Object|Neo.component.Base|null}
-     */
-    getItem(reference, items=this.items) {
-        let i   = 0,
-            len = items.length,
-            item,
-            childItem;
-
-        for (; i < len; i++) {
-            item = items[i];
-            if (item.reference === reference) {
-                return item
-            } else if (item.items) {
-                childItem = this.getItem(reference, item.items);
-
-                if (childItem) {
-                    return childItem
-                }
-            }
-        }
-
-        return null
-    }
-
     /**
      * @returns {Neo.component.Base|null}
      */

package/apps/realworld2/view/user/LoginFormContainer.mjs

@@ -70,7 +70,7 @@ class LoginFormContainer extends Container {
      *
      */
     onLoginButtonClick() {
-        let values = this.getValues();
+        let values = this.getSubmitValues();
 
         console.log(values);
         console.log(this.isValid());

package/docs/app/view/MainContainer.mjs

@@ -8,7 +8,6 @@ import MainContainerController from './MainContainerController.mjs';
 import SourceViewComponent     from './classdetails/SourceViewComponent.mjs';
 import Splitter                from '../../../src/component/Splitter.mjs';
 import TutorialComponent       from './classdetails/TutorialComponent.mjs';
-import TutorialsTreeList       from './TutorialsTreeList.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**
@@ -71,15 +70,6 @@ class MainContainer extends Viewport {
                         iconCls: 'fa fa-code',
                         text   : 'API'
                     }
-                }, {
-                    module   : TutorialsTreeList,
-                    listeners: {leafItemClick: 'onTutorialListLeafClick'},
-                    reference: 'tutorials-treelist',
-
-                    tabButtonConfig: {
-                        iconCls: 'fa fa-hands-helping',
-                        text   : 'Tutorials'
-                    }
                 }, {
                     module   : ExamplesTreeList,
                     listeners: {leafItemClick: 'onExamplesListLeafClick'},
@@ -123,7 +113,7 @@ class MainContainer extends Viewport {
         }
 
         // Disable the examples Tab for dist versions until the webpack builds can handle this (see: #140)
-        me.items[1].items[0].items[2].tabButtonConfig.disabled = Neo.config.environment !== 'development';
+        me.items[1].items[0].items[1].tabButtonConfig.disabled = Neo.config.environment !== 'development';
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.15.5'
+         * @member {String} version='6.15.6'
          */
-        version: '6.15.5'
+        version: '6.15.6'
     }
 
     /**

package/examples/component/timer/MainContainerController.mjs

@@ -40,7 +40,7 @@ class MainContainerController extends ComponentController {
             me.getReference('closable').value = data.value;
         }
 
-        values = await form.getValues();
+        values = await form.getSubmitValues();
 
         values.appName = me.component.appName;
         button.disabled = !isValid;
@@ -61,7 +61,7 @@ class MainContainerController extends ComponentController {
     async createToast() {
         let me     = this,
             form   = me.getReference('form'),
-            values = await form.getValues(),
+            values = await form.getSubmitValues(),
             clear  = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable', 'timeout'];
 
         // use the defaults from toast if not set

package/examples/component/toast/MainContainerController.mjs

@@ -41,7 +41,7 @@ class MainContainerController extends ComponentController {
             me.getReference('closable').value = data.value;
         }
 
-        values = await form.getValues();
+        values = await form.getSubmitValues();
 
         values.appName = me.component.appName;
         button.disabled = !isValid;
@@ -62,7 +62,7 @@ class MainContainerController extends ComponentController {
     async createToast() {
         let me     = this,
             form   = me.getReference('form'),
-            values = await form.getValues(),
+            values = await form.getSubmitValues(),
             clear  = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable', 'timeout'];
 
         // use the defaults from toast if not set

package/examples/date/selectorContainer/MainContainer.mjs

@@ -0,0 +1,215 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import DateField             from '../../../src/form/field/Date.mjs';
+import DateSelector          from '../../../src/date/SelectorContainer.mjs';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+
+/**
+ * @class Neo.examples.date.selectorContainer.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className: 'Neo.examples.date.selectorContainer.MainContainer'
+    }
+
+    createConfigurationComponents() {
+        let me               = this,
+            exampleComponent = me.exampleComponent;
+
+        return [{
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getMonth() === 0,
+            hideValueLabel: false,
+            labelText     : 'currentDate (month)',
+            listeners     : {change: me.onMonthRadioChange.bind(me, 0)},
+            name          : 'month',
+            valueLabelText: 'Jan'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getMonth() === 1,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onMonthRadioChange.bind(me, 1)},
+            name          : 'month',
+            valueLabelText: 'Feb'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getMonth() === 2,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onMonthRadioChange.bind(me, 2)},
+            name          : 'month',
+            valueLabelText: 'Mar'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getMonth() === 3,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onMonthRadioChange.bind(me, 3)},
+            name          : 'month',
+            valueLabelText: 'Apr'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getFullYear() === 2025,
+            hideValueLabel: false,
+            labelText     : 'currentDate (year)',
+            listeners     : {change: me.onYearRadioChange.bind(me, 2025)},
+            name          : 'year',
+            style         : {marginTop: '10px'},
+            valueLabelText: '2025'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getFullYear() === 2024,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onYearRadioChange.bind(me, 2024)},
+            name          : 'year',
+            valueLabelText: '2024'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getFullYear() === 2023,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onYearRadioChange.bind(me, 2023)},
+            name          : 'year',
+            valueLabelText: '2023'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getFullYear() === 2022,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onYearRadioChange.bind(me, 2022)},
+            name          : 'year',
+            valueLabelText: '2022'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.dayNameFormat === 'narrow',
+            hideValueLabel: false,
+            labelText     : 'dayNameFormat',
+            listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'narrow')},
+            name          : 'dayNameFormat',
+            style         : {marginTop: '10px'},
+            valueLabelText: 'narrow'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.dayNameFormat === 'short',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'short')},
+            name          : 'dayNameFormat',
+            valueLabelText: 'short'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.dayNameFormat === 'long',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'long')},
+            name          : 'dayNameFormat',
+            valueLabelText: 'long'
+        }, {
+            module    : NumberField,
+            clearable : true,
+            labelText : 'height',
+            listeners : {change: me.onConfigChange.bind(me, 'height')},
+            maxValue  : 800,
+            minValue  : 230,
+            stepSize  : 10,
+            style     : {marginTop: '10px'},
+            value     : exampleComponent.height
+        }, {
+            module          : DateField,
+            labelText       : 'maxValue',
+            listeners       : {change: me.onConfigChange.bind(me, 'maxValue')},
+            matchPickerWidth: false,
+            value           : exampleComponent.maxValue
+        }, {
+            module          : DateField,
+            labelText       : 'minValue',
+            listeners       : {change: me.onConfigChange.bind(me, 'minValue')},
+            matchPickerWidth: false,
+            value           : exampleComponent.minValue
+        }, {
+            module   : CheckBox,
+            checked  : exampleComponent.showCellBorders,
+            labelText: 'showCellBorders',
+            listeners: {change: me.onConfigChange.bind(me, 'showCellBorders')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : exampleComponent.showDisabledDays,
+            labelText: 'showDisabledDays',
+            listeners: {change: me.onConfigChange.bind(me, 'showDisabledDays')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : exampleComponent.useAnimations,
+            labelText: 'useAnimations',
+            listeners: {change: me.onConfigChange.bind(me, 'useAnimations')},
+            style    : {marginTop: '10px'}
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.weekStartDay === 6,
+            hideValueLabel: false,
+            labelText     : 'weekStartDay',
+            listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 6)},
+            name          : 'weekStartDay',
+            style         : {marginTop: '10px'},
+            valueLabelText: '6 (Saturday)'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.weekStartDay === 0,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 0)},
+            name          : 'weekStartDay',
+            valueLabelText: '0 (Sunday)'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.weekStartDay === 1,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 1)},
+            name          : 'weekStartDay',
+            valueLabelText: '1 (Monday)'
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'width',
+            listeners : {change: me.onConfigChange.bind(me, 'width')},
+            maxValue  : 800,
+            minValue  : 240,
+            stepSize  : 10,
+            style     : {marginTop: '10px'},
+            value     : exampleComponent.width
+        }];
+    }
+
+    createExampleComponent() {
+        return Neo.create(DateSelector, {
+            height: 300,
+            width : 300
+        })
+    }
+
+    onMonthRadioChange(value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            let date = this.exampleComponent.currentDate;
+            date?.setMonth(value);
+            this.exampleComponent.currentDate = date;
+        }
+    }
+
+    onYearRadioChange(value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            let date = this.exampleComponent.currentDate;
+            date?.setFullYear(value);
+            this.exampleComponent.currentDate = date;
+        }
+    }
+}
+
+Neo.setupClass(MainContainer);
+
+export default MainContainer;

package/examples/date/selectorContainer/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.date.selectorContainer'
+});

package/examples/date/selectorContainer/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo DateSelector</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/date/selectorContainer/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/date/selectorContainer/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/package.json

@@ -1,7 +1,7 @@
 
 {
     "name": "neo.mjs",
-    "version": "6.15.5",
+    "version": "6.15.6",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -50,7 +50,7 @@
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.0.0",
         "cssnano": "^6.1.2",
-        "envinfo": "^7.11.1",
+        "envinfo": "^7.12.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^9.2.17",
@@ -59,7 +59,7 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.38",
-        "sass": "^1.72.0",
+        "sass": "^1.75.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",
         "webpack": "^5.91.0",

package/resources/data/deck/learnneo/pages/Welcome.md

@@ -25,7 +25,13 @@ You can ignore this! It just holds a site style sheet and other miscellanea.
 
 ## Using these topics
 
+### Layout 
+
 As you can see, the topics table of contents is on the left. Topic sections and sub-sections are shown on the right.
+And content is here in the middle. There are "next" and "previous" buttons at the bottom of each page, to make it
+easier to read several topics in sequence. 
+
+### Disclosure widgets
 
 Topics sometimes contain "disclosure" widgets, which are just <details> tags. These are used in cases 
 where we want to present high-level points and reveal details when the disclosure is expanded.
@@ -35,6 +41,8 @@ where we want to present high-level points and reveal details when the disclosur
 <p style="background-color:lightgreen;padding:8px">This is a fascinating piece of information which is revealed when the widget is expanded.</p>
 </details>
 
+### Runnable examples
+
 Topics also sometimes contain runnable examples. These are shown as tab panels with Source and Preview tabs.
 
 You can also launch the preview in a window by going to the Preview tab, then clicking on the little window

package/resources/data/deck/learnneo/pages/WhyNeo-Speed.md

@@ -12,9 +12,9 @@ If the default four threads aren't enough, you're free to launch additional web-
 to run other specialized logic. 
 
 
-### Example
+<details><summary>Example</summary>
 
-Look at this example. It's the `Neo.component.Helix` component. Besides looking cool, it illustrates how quickly Neo.mjs can update a complex user interface. 
+Take a look at this example. It's the `Neo.component.Helix` component. Besides looking cool, it illustrates how quickly Neo.mjs can update a complex user interface. 
 
 Click on Preview, then use your mouse or trackpad to pan and zoom &mdash; the helix zooms and spirals accordingly, very very rapidly. 
 If you move quickly, you might reach 20,000 or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per 
@@ -46,4 +46,6 @@ Neo.setupClass(Foo);
 
 
 If you're interested, there's <a href="../../examples/component/helix/index.html" target="_blank">a more full-featured helix example</a> that includes showing delta updates, 
-along with some other control. Look at the upper-right corner to see delta updates.
+along with some other control. Look at the upper-right corner to see delta updates.
+
+</details>

package/resources/data/deck/learnneo/tree.json

@@ -7,7 +7,7 @@
         {"name": "Quick Application Development",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Quick"},
         {"name": "Multi-Window Applications",               "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Window"},
         {"name": "Complexity and Effort",                   "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Effort"},
-    {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted"},
+    {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed":  true},
         {"name": "Setup",                                   "parentId": "GettingStarted",    "isLeaf": true,  "id": "Setup", "hidden":  false},
         {"name": "Workspaces and Applications",             "parentId": "GettingStarted",    "isLeaf": true,  "id": "2023-10-14T19-25-08-153Z"},
         {"name": "Describing a View",                       "parentId": "GettingStarted",    "isLeaf": true,  "id": "DescribingTheUI"},
@@ -16,11 +16,11 @@
         {"name": "Extending Classes",                       "parentId": "GettingStarted",    "isLeaf": true,  "id": "Extending"},
         {"name": "Config",                                  "parentId": "GettingStarted",    "isLeaf": true,  "id": "Config"},
         {"name": "Shared Bindable Data",                    "parentId": "GettingStarted",    "isLeaf": true,  "id": "ComponentModels"},
-    {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials"},
+    {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials",  "collapsed":  true},
         {"name": "Rock Scissors Paper",                     "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "RSP", "hidden":  true},
         {"name": "Earthquakes",                             "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "Earthquakes"},
         {"name": "Todo List",                               "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "TodoList"},
-    {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth"},
+    {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth",  "collapsed":  true},
         {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},
         {"name": "Instance Lifecycle",                      "parentId": "InDepth",           "isLeaf": false, "id": "InstanceLifecycle"},
         {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms"},
@@ -41,7 +41,7 @@
         {"name": "Other JavaScript Class Features",         "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T20-20-37-336Z"},
         {"name": "Super",                                   "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T21-58-25-809Z"},
         {"name": "New Node",                                "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-31T13-59-37-550Z"},
-    {"name": "Appendix",                                    "parentId": null,                                 "id": "appendix"},
+    {"name": "Appendix",                                    "parentId": null,                                 "id": "appendix",  "collapsed":  true},
         {"name": "Stylesheet",                              "parentId": "appendix",          "isLeaf": true,  "id": "stylesheet"},
         {"name": "Test",                                    "parentId": "appendix",          "isLeaf": true,  "id": "TestLivePreview"}
 ]}

package/resources/scss/src/date/SelectorContainer.scss

@@ -0,0 +1,120 @@
+.neo-dateselector.neo-container {
+    background-color: var(--dateselector-background-color);
+    color           : var(--dateselector-color);
+    font-size       : 16px; // todo: em-based once table headers are em based
+    font-weight     : 400;
+    user-select     : none;
+
+    &.neo-hide-inner-borders {
+        .neo-day-view {
+            .neo-row {
+                border: none !important;
+
+                .neo-cell {
+                    border: none !important;
+                }
+            }
+        }
+    }
+
+    .neo-header-toolbar {
+        background-color: var(--dateselector-header-background-color);
+        border          : 1px solid var(--dateselector-border-color);
+        border-bottom   : var(--dateselector-header-border-bottom);
+        min-height      : 30px;
+    }
+
+    .neo-day-view {
+        border        : 1px solid var(--dateselector-border-color);
+        border-top    : var(--dateselector-content-border-top);
+        display       : flex;
+        flex          : 1;
+        flex-direction: column;
+        font-size     : 12px;
+
+        .neo-row {
+            border-bottom: 1px solid var(--dateselector-border-color);
+            display      : flex;
+            flex         : 1;
+
+            &.neo-header-row {
+                border-bottom: var(--dateselector-header-cell-border-bottom) !important;
+                flex         : none;
+                height       : 30px;
+
+                .neo-cell {
+                    background-color: var(--dateselector-header-cell-background-color);
+                    color           : var(--dateselector-header-cell-color);
+                    cursor          : default;
+                    pointer-events  : none;
+                }
+            }
+
+            &:last-child {
+                border-bottom: 0;
+            }
+
+            .neo-cell {
+                align-items     : center;
+                background-color: var(--dateselector-cell-background-color);
+                border-right    : 1px solid var(--dateselector-border-color);
+                color           : var(--dateselector-cell-color);
+                cursor          : pointer;
+                display         : flex;
+                flex            : 1;
+                padding         : 2px;
+                justify-content : center;
+
+                &:focus {
+                    outline: 0;
+                }
+
+                &:last-child {
+                    border-right: 0;
+                }
+
+                &.neo-disabled {
+                    background-color: var(--dateselector-cell-background-color-disabled);
+                    color           : var(--dateselector-cell-color-disabled);
+                    opacity         : var(--dateselector-cell-opacity-disabled);
+                }
+
+                &.neo-disabled {
+                    cursor        : default;
+                    pointer-events: none;
+                }
+
+                &.neo-selected {
+                    .neo-cell-content {
+                        background-color: var(--dateselector-cell-today-border-color);
+                        border          : 1px solid var(--dateselector-header-cell-background-color);
+                        border-radius   : 50%;
+                        color           : var(--dateselector-cell-color-selected);
+
+                        &:before {
+                            content    : '';
+                            display    : inline-block;
+                            padding-top: 100%;
+                        }
+                    }
+                }
+
+                .neo-cell-content {
+                    align-items    : center;
+                    display        : flex;
+                    flex-basis     : 0.1px;
+                    flex-grow      : 0.2;
+                    justify-content: center;
+                    min-height     : 22px;
+                    min-width      : 22px;
+                    pointer-events : none;
+
+                    &.neo-today {
+                        border       : 1px solid var(--dateselector-cell-today-border-color);
+                        border-radius: 50%;
+                    }
+                }
+            }
+        }
+    }
+}